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