HTML表單提交按鈕不調用succes方法？

Question

HTML表單：

<form class="form-horizontal" id="contactfrm" onsubmit="contactus()"> 

<fieldset class="scheduler-border"> 

<!-- Form Name --> 
<legend class="scheduler-border">Fill contact details</legend> 
<!-- Text input--> 
<div class="form-group"> 
<label class="col-md-4 control-label" for="fname">First Name</label> 
<div class="col-md-6"><input id="fname" name="firstName" type="text" placeholder="First Name" class="form-control input-md" title="Enter your First Name" required="required"></div> 
</div> 
<!-- Text input--> 
<div class="form-group"> 
<label class="col-md-4 control-label" for="lname">Last Name</label> 
<div class="col-md-6"><input id="lname" name="firstName" type="text" placeholder="Last Name" class="form-control input-md" title="Enter your Last Name" required="required"></div> 
</div> 

<!-- Button --> 
<div class="form-group"> 
<label class="col-md-4 control-label" for="button"></label> 
<div class="col-md-4"> 
        <button type="submit" value="Submit" class="btn btn-success" id="submit" /> 
</div> 
</div> 
</fieldset> 
</form> 

腳本代碼：

<script type="text/javascript"> 
    function contactus(){ 
    alert("hi"); 
    var test = JSON.stringify({ 
     "help": $('#help').val(),  
     "firstName": $('#fname').val(), 
     "lastName":$('#lname').val() 
     }); 

    alert("test values are"+test); 
     $.ajax({ 
      type: "POST", 
      contentType: 'application/json', 
      url: baseurl+"contact/add", 
      data: test, 
      dataType:"text", 
      success:successmethod, 
      error: function(data,status) 
      { 
      alert("Error "+status); 
      } 
     }); 

    } 

    function successmethod(data){ 
    document.getElementById("contactfrm").reset(); 
    $('#showcontactmessage').show(); 
    alert("Contact Details Saved"); 
    } 
    </script> 

錨標籤：

<a href="javascript:contactus();" class="btn btn-success">Contact us now</a> 

在當我使用錨標記提交表單上面表格的每一件事工作正常，即;該函數被調用，值被保存在數據庫中，成功的方法被調用和執行。但問題是，當我使用按鈕標籤提交表單值時，值被保存在數據庫中，但succes方法不被調用，而是它調用錯誤的方法..任何幫助將不勝感激??

Answer 1

提交處理程序不會阻止表單提交。

JavaScript將運行，然後表單將立即提交。瀏覽器將在離開當前頁面並加載一個新頁面，然後獲得對Ajax請求的響應。新頁面上將不存在事件處理程序。

您需要防止默認窗體操作。使用90s風格的方法，您需要從事件處理函數返回false。

onsubmit="contactus(); return false;"