Javascript 单击按钮时未定义函数
我有一个表单,当单击submit按钮时,它应该通过ajax提交,但我得到的函数未定义。表单位于一个div中,该div被加载到主页中,因此我将标记放在表单下,以确保在脚本之前加载表单。阅读了一些其他解决方案后,我尝试添加window.NewSearchFunction而不是NewsearchFuntion,但仍然不起作用 我的表格:Javascript 单击按钮时未定义函数,javascript,php,jquery,Javascript,Php,Jquery,我有一个表单,当单击submit按钮时,它应该通过ajax提交,但我得到的函数未定义。表单位于一个div中,该div被加载到主页中,因此我将标记放在表单下,以确保在脚本之前加载表单。阅读了一些其他解决方案后,我尝试添加window.NewSearchFunction而不是NewsearchFuntion,但仍然不起作用 我的表格: <form class="inline" name="Form1"> <input class="inline" name="employe
<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>
与Tushar指出的一样,NewSearchFunction(e)仅在加载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);
});
);
});
与Tushar指出的一样,NewSearchFunction(e)仅在加载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);
});
);
});
您可以将按钮保留为
type=“submit”
,然后在表单上注册提交事件处理程序,而不是在按钮上放置onclick
属性或在按钮上注册单击事件处理程序。您只需在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>
您可以将按钮保留为
type=“submit”
,然后在表单上注册提交事件处理程序,而不是在按钮上放置onclick
属性或在按钮上注册单击事件处理程序。您只需在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>
将函数移出
ready()
。或者使用jquery来处理事件,更好吗?这已经停止了未定义的问题,但现在应该提交的所有内容都只是进入地址栏并刷新页面,而不是发布提交。phpChange fromtype=submit
totype=button
与您的问题无关,但是,您可能需要查看一下,您似乎还缺少一堆}
括号将函数移到ready()
之外。或者使用jquery来处理事件,更好吗?这已经停止了未定义的问题,但现在应该提交的所有内容都只是进入地址栏并刷新页面,而不是发布提交。phpChange fromtype=submit
totype=button
与您的问题无关,但是您可能想看看,您似乎还缺少一堆}
括号