单击按钮时功能未定义

Question

我有一个表单应该在单击提交按钮时通过ajax提交但是我的函数未定义。表单位于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（e）只在加载DOM之后才被定义，但是当加载DOM时，在input元素中你有对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);
            }
        });
    });
});