AJAX表单提交 - 每次点击提交表格i ++次数

问题描述：

我有一个问题，我的表单提交与AJAX第一次工作正常，但如果我再次点击提交按钮，或按回车，表单提交两次。第三次点击会导致表单被提交3次，依此类推。我试图在scripts.js文件中插入return false和preventDefault()无效。AJAX表单提交 - 每次点击提交表格i ++次数

我的形式的实现，可以发现here和输出结果的列表可以发现here

此外，我注意到scripts.js中从来没有进行到符合document.getElementById('test').innerHTML="this works3";

任何帮助将不胜感激。谢谢！

的index.html

<form id="form1" action="addpost.php" method="post"> 
    <div class="form-group" > 
     <label for="title">Title:</label> 
     <input name="title" type="title" class="form-control " id="title" placeholder="Enter title (Compulsory)" required> 
     <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span> 
    </div> 
    <div class="form-group"> 
     <label for="name">Name:</label> 
     <input type="name" class="form-control" id="name"> 
     <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span> 
    </div> 
    <div class="form-group"> 
     <label for="article">Article:</label> 
     <textarea name="article" class="form-control" rows="5" id="article"></textarea> 
    </div> 
    <div class="form-group"> 
     <label for="img1">Image 1:</label> 
     <input type="file" class="form-control" id="img1" accept="image/*"> 
     <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span> 
    </div> 
    <label id="test">hi</label> 
    <button class="btn btn-primary" onclick="poop()">Button</button> 
    <input type="submit" class="btn btn-primary" onclick="poop()" value = "submit"/> 
</form>

scripts.js中

function poop() 
{ 
    document.getElementById('test').innerHTML="this works"; 
    var form = $('#form1'); 
    document.getElementById('test').innerHTML="this works2"; 
    form.submit(function (event) 
    { 
     $.ajax 
     ({ 
      type: form.attr('method'), 
      url: form.attr('action'), 
      data: form.serialize(), 
      success: function (data) 
      { 
       alert('ok'); 
      } 
     }); 
    }); 
    document.getElementById('test').innerHTML="this works3"; 

}

你为什么不禁止你提交按钮，除非ü从服务器获取 –

维诺德嗨回应，我想利用'的onclick =“便便（）; this.disabled =真正的“'。但是，这并不妨碍用户通过按Enter键提交。但是，我认为这个问题依然存在。我不知道它是否是一个编码问题，因为我没有在C＃和ASP.net中遇到过这样的问题 –

为什么你有2个按钮，而且这些按钮不需要，而且你的代码不需要在便便功能它需要在window.load和输入类型提交足以触发提交事件 –

答

感谢利亚姆和维诺德指着我在正确的方向。我包含脚本来覆盖index.html文件中的提交功能。很好地解决了这个问题。

的index.html

 <form id="form1" action="addpost.php" method="post"> 
      <div class="form-group" > 
       <label for="title">Title:</label> 
       <input name="title" type="title" class="form-control " id="title" placeholder="Enter title (Compulsory)" required> 
       <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span> 
      </div> 
      <div class="form-group"> 
       <label for="name">Name:</label> 
       <input type="name" class="form-control" id="name"> 
       <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span> 
      </div> 
      <div class="form-group"> 
       <label for="article">Article:</label> 
       <textarea name="article" class="form-control" rows="5" id="article"></textarea> 
      </div> 
      <div class="form-group"> 
       <label for="img1">Image 1:</label> 
       <input type="file" class="form-control" id="img1" accept="image/*"> 
       <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span> 
      </div> 
      <label id="test">hi</label> 
      <input type="submit" class="btn btn-primary" value = "submit"/> 
     </form> 

// script included within body of html 
<script type="text/javascript"> 
     var form = $('#form1'); 
     document.getElementById('test').innerHTML="this works2"; 
     form.submit(function (event) 
     { 
      event.preventDefault(); 
      $.ajax 
      ({ 
       type: form.attr('method'), 
       url: form.attr('action'), 
       data: form.serialize(), 
       success: function (data) 
       { 
        alert('ok'); 
       } 
      }); 
     }); 
</script>

AJAX表单提交 - 每次点击提交表格i ++次数

相关推荐