Html表单提交按钮不调用成功方法？答案

【问题标题】：Html form submit button not calling succes method?Html表单提交按钮不调用成功方法？
【发布时间】：2014-12-04 10:08:36
【问题描述】：

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 方法而是它调用错误方法..任何帮助将不胜感激？

【问题讨论】：

提交按钮需要什么。
@AravindSivam 我正在使用提交，因为当我使用 required 属性进行验证时，表单会直接调用 contactus 而不是验证...
你可以去找昆汀的答案。

标签： javascript jquery html forms button

【解决方案1】：

提交处理程序不会阻止表单提交。

JavaScript 将运行，然后表单将立即提交。浏览器在获得对 Ajax 请求的响应之前将离开当前页面并加载新页面。新页面上将不存在事件处理程序。

您需要阻止默认的表单操作。使用您采用的 90 年代风格方法，您需要从事件处理程序返回 false。

onsubmit="contactus(); return false;"

【讨论】：

@Quentin 工作得很好，但我能知道 2014 年的进场风格吗？？