Функция не звонит в форму submit

Question

Я принял все ваши комментарии на борту и изменил код на нижеследующий. Однако теперь все заканчивается строкой в ​​адресной строке, и страница обновляется. Мой код теперь:

Часть формы:

<form class="inline" name="Form1"> 
<input class="inline" name="employeeid" id="employeeid" type="hidden" size="30" autofocus value="<?php echo $employee[$k]["employeeid"]; ?>" /> 
.... more fields here..... 
<p class="inline"> 
     <label class="inline" for="pensionindividual">Individual Pension:</label> 
     <input class="inline" id="pensionindividual" type="text" name="pensionindividual" size="30" value="<?php echo $employee[$k]["pensionindividual"]; ?>" /> 
    </p> 
    <p class="inline"> 
     <label class="inline" for="pensioncompany">Company Pension:</label> 
     <input class="inline" type="text" id="pensioncompany" name="pensioncompany" size="30" value="<?php echo $employee[$k]["pensioncompany"]; ?>" /> 
    </p> 
    <input id="submit" type="submit" onclick="NewSearchFunction(e)" value="Update Details"> 
     </td></tr></table></td></tr></table> 
</form> 
<script src="editemployeedetailsajax.js"></script> 

editemployeedetailsajaxjs:

// JavaScript Document 
$(document).ready(function 
NewSearchFunction(e) { 
    e.preventDefault() 

var employeeid=document.getElementById("employeeid").value; 
var firstname=document.getElementById("firstname").value; 
var surname=document.getElementById("lastname").value; 
var addr1=document.getElementById("addr1").value; 
var addr2=document.getElementById("addr2").value; 
var town=document.getElementById("town").value; 
var county=document.getElementById("county").value; 
var postcode=document.getElementById("postcode").value; 
var tel1=document.getElementById("tel1").value; 
var work=document.getElementById("work").value; 
var mobile=document.getElementById("mobile").value; 
var sex=document.getElementById("sex").value; 
var DOB=document.getElementById("DOB").value; 
var ninumber=document.getElementById("ninumber").value; 
var payrollnumber=document.getElementById("payrollnumber").value; 
var sortcode=document.getElementById("sortcode").value; 
var accountnumber=document.getElementById("accountnumber").value; 
var annualleaveentitlement=document.getElementById("annualleaveentitlement").value; 
var vehicleid=document.getElementById("vehicleid").value; 
var fuelcardid=document.getElementById("fuelcardid").value; 
var mobileid=document.getElementById("mobileid").value; 
var pensionindividual=document.getElementById("pensionindividual").value; 
var pensioncompany=document.getElementById("pensioncompany").value; 

// Returns successful data submission message when the entered information is stored in database. 

var dataString = '&employeeid=' + employeeid + '&firstname=' + firstname + '&surname=' + lastname + '&addr1=' + addr1 + '&addr2=' + addr2 + '&town=' + town + '&county=' + county + '&postcode=' + postcode + '&tel1=' + tel1 + '&work=' + work + '&mobile=' + mobile + '&sex=' + sex + '&DOB=' + DOB + '&ninumber=' + ninumber + '&payrollnumber=' + payrollnumber + '&sortcode=' + sortcode + '&accountnumber=' + accountnumber + '&annualleaveentitlement=' + annualleaveentitlement + '&vehicleid=' + vehicleid + '&fuelcardid=' + fuelcardid + '&mobileid=' + mobileid + '&pensionindividual=' + pensionindividual + '&pensioncompany=' + pensioncompany; 

// AJAX code to submit form. 
$.ajax({ 
type: "POST", 
url: "submit.php", 
data: dataString, 
cache: false, 
success: function(html) { 
alert(html)}); 
); 

Hi When I submit my form the function that is attached to the submit button does not get called. The form is within a div which is retrieved by ajax based upon user's selection in another div. The javascript is referenced in the header of the first page - I'm not sure if this is the problem.

part of form:

<div id="mainform"> 
<div class="innerdiv"> 
<form class="inline" name="Form1"> 
    <p class="inline"> 
     <label class="inline" for="pensioncompany">Company Pension:</label> 
     <input class="inline" type="text" name="pensioncompany" size="30" value="<?php echo $employee[$k]["pensioncompany"]; ?>" /> 
    </p> 
    <input id="submit" type="button" onclick="myFunction()" value="Update Details"> 
     </td></tr></table></td></tr></table> 
</form> 

editemployeeajax.js (all the fields below are part of the form but to simplify the question I only left one in the form above)

// JavaScript Document 
function myFunction() { 

var employeeid=document.getElementById("employeeid").value; 
var firstname=document.getElementById("firstname").value; 
var surname=document.getElementById("lastname").value; 
var addr1=document.getElementById("addr1").value; 
var addr2=document.getElementById("addr2").value; 
var town=document.getElementById("town").value; 
var county=document.getElementById("county").value; 
var postcode=document.getElementById("postcode").value; 
var tel1=document.getElementById("tel1").value; 
var work=document.getElementById("work").value; 
var mobile=document.getElementById("mobile").value; 
var sex=document.getElementById("sex").value; 
var DOB=document.getElementById("DOB").value; 
var ninumber=document.getElementById("ninumber").value; 
var payrollnumber=document.getElementById("payrollnumber").value; 
var sortcode=document.getElementById("sortcode").value; 
var accountnumber=document.getElementById("accountnumber").value; 
var annualleaveentitlement=document.getElementById("annualleaveentitlement").value; 
var vehicleid=document.getElementById("vehicleid").value; 
var fuelcardid=document.getElementById("fuelcardid").value; 
var mobileid=document.getElementById("mobileid").value; 
var pensionindividual=document.getElementById("pensionindividual").value; 
var pensioncompany=document.getElementById("pensioncompany").value; 

// Returns successful data submission message when the entered information is stored in database. 

var dataString = '&employeeid=' + employeeid + '&firstname=' + firstname + '&surname=' + lastname + '&addr1=' + addr1 + '&addr2=' + 

addr2 + '&town=' + town + '&county=' + county + '&postcode=' + postcode + '&tel1=' + tel1 + '&work=' + work + '&mobile=' + mobile + '&sex=' + sex + '&DOB=' + DOB + '&ninumber=' + ninumber + '&payrollnumber=' + payrollnumber + '&sortcode=' + sortcode + '&accountnumber=' + accountnumber + '&annualleaveentitlement=' + annualleaveentitlement + '&vehicleid=' + vehicleid + '&fuelcardid=' + fuelcardid + '&mobileid=' + mobileid + '&pensionindividual=' + pensionindividual + '&pensioncompany=' + pensioncompany;

// AJAX code to submit form. 
&.ajax({ 
type: "POST", 
url: "submit.php", 
data: dataString, 
cache: false, 
success: function(html) { 
alert(html); 
} 
}); 
} 
return false; 
} 

Answer 1

Проблема заключается в том, что представление формы происходит до того, как событие OnClick, обрабатывается. Измените ваш HTML блок будет onclick="myFunction(e);"

Затем измените функцию, чтобы начать со следующим:

function myFunction(e) { 
    e.preventDefault(); 

    // ... The rest of your code. 
} 

Это остановит форму от их представлений и дать код для выполнения. Вам также не нужно будет возвращать false в конце, чтобы остановить его от отправки.

e - объект события onclick.