function undefined on button click

Question

У меня есть форма, которая должна быть отправлена ​​через ajax при нажатии кнопки отправки, но я получаю функцию undefined. Форма находится в div, который загружается на главную страницу, поэтому я поместил теги под форму, чтобы убедиться, что форма загружена перед скриптом. Прочитав некоторые другие решения, я попытался добавить window.NewSearchFunction вместо NewsearchFuntion, но он все равно не работает.

Моя форма:

<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="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> 

editemployeedetailsajax.js:

// JavaScript Document 
var NewSearchFunction; 
$(document).ready(function(){ 
    var window.NewSearchFunction; 

    NewSearchFunction(e) = function() { 
     e.preventDefault() 
     console.log() 
     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); 
      }); 
     ); 

Answer 1

Как Tushar заостренные, ваш NewSearchFunction (е) определен только после загрузки DOM, но когда DOM загружен, в входной элемент у вас есть ссылка на NewSearchFunction, которая не определена на данный момент.

Лучше подход действительно использовать JQuery элемент связывания:

$('input#submit').click(function(e) { 
e.preventDefault() 
    console.log() 
    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); 
     }); 
    ); 
}); 

Answer 2

Вместо размещения атрибута onclick на кнопку или регистрации обработчика щелчка события на кнопке, вы можете оставить кнопку с type="submit", и затем зарегистрируйте обработчик отправки события в форме. Вам просто нужно позвонить event.preventDefault() внутри обработчика отправки, чтобы предотвратить обычную отправку формы, и, конечно же, вы должны зарегистрировать обработчик событий внутри обработчика документа.

Соответствующие HTML:

<script src="editemployeedetailsajax.js"></script> 
<form name="Form1"> 
    <input type="hidden" name="employeeid" value="..." /> 
    <input type="text" name="pensioncompany" value="..." /> 
    <input type="submit" value="Update Details" /> 
</form> 

editemployeedetailsajax.js:

$(document).ready(function() { 
    $('form[name=Form1]').submit(function(event) { 
     event.preventDefault(); 
     $.ajax({ 
      type: "POST", 
      url: "submit.php", 
      data: $(this).serialize(), 
      dataType: 'html', 
      cache: false, 
      success: function(html) { 
       alert(html); 
      } 
     }); 
    }); 
});