函数未在表单提交时调用

时间:2015-09-06 23:20:51

标签: javascript jquery forms

我已将您的所有评论记录在案,并将代码更改为以下内容。但是现在一切都以地址栏中的字符串结尾,页面刷新。我的代码现在是:

表格的一部分:

<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)});
);
  

嗨当我提交表单时附加到提交的功能   按钮不会被调用。表格在div中   由ajax根据用户在另一个div中的选择检索。该   javascript在第一页的标题中引用 - 我不是   确定这是否是问题所在。

     

表格的一部分:

<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(以下所有字段都是表单的一部分,但是   简化我在上面的表格中只留下一个问题的问题

// 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 +'&amp; town ='+ town +'&amp; county ='+ county +'&amp; postcode ='+   邮编+'&amp; tel1 ='+ tel1 +'&amp; work ='+ work +'&amp; mobile ='+ mobile +   '&amp; sex ='+ sex +'&amp; DOB ='+ DOB +'&amp; ninumber ='+ ninumber +   '&amp; payrollnumber ='+ payrollnumber +'&amp; sortcode ='+ sortcode +   '&amp; accountnumber ='+ accountnumber +'&amp; annualleaveentitlement ='+   annualleaveentitlement +'&amp; vehicleid ='+ vehicleid +'&amp; fuelcardid ='+   fuelcardid +'&amp; mobileid ='+ mobileid +'&amp; pensionindividual ='+   pensionindividual +'&amp; pensioncompany ='+ pensioncompany;

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

1 个答案:

答案 0 :(得分:0)

问题是表单提交是在处理onclick事件之前发生的。将您的HTML块更改为onclick="myFunction(e);"

然后,将您的功能更改为以下内容开始:

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

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

这将停止提交表单并允许您的代码执行。您也不需要在结尾处返回false以阻止它提交。

e是onclick事件对象。