单击按钮时重复的表单提交？ [英] Duplicate form submission whtn button clicked?

问题描述

我之前遇到过一个似乎已经解决的问题，但经过仔细检查，它并没有完全修复。我有一个按钮，当点击激活一个javascript发送表单数据，然后清除表单，然后关闭隐藏div。除了我检查数据库似乎提交两次之外，它工作得很好吗？我看了，看不出问题出在哪里？

I had a problem earlier that seemed to be solved but on closer inspection it is not fully fixed. I have a button that when clicked activates a javascript to send form data, then clear the form and then close hide the div. It works great apart from when I check the database it seems to submit twice? I have looked and cant see where the problem lies?

按钮是：

<button name ='send' value="Send" type='submit' class='btn btn-primary'>Finish</button>

和重复输入的新JS代码是：

and the new JS code that duplicates entry is :

    $(function() {
    $('form').on('submit', function(e) { 
      e.preventDefault();
      $('.output_message').text('Processing...'); 

      var form = $(this);
      $.ajax({
        url: form.attr('action'),
        method: form.attr('method'),
        data: form.serialize(),
        success: function(result) {
          if (result == 'success') {
            $('.output_message').text('Message Sent!');
            form[0].reset();
            $('#5box').hide();
          } else {
            $('.output_message').text('Error Sending email!');
          }
        }
      });
    });
  });

和旧的js（没有清算表格和隐藏div但不重复条目）是：

and the old js(without clearing form and hiding div but does not duplicate entry) is :

 $(document).ready(function() {
   $('#btn-finish').on('click', function() {

        // Add text 'loading...' right after clicking on the submit button. 
        $('.output_message').text('Processing...'); 

        var form = $(this);
        $.ajax({
            url: form.attr('action'),
            method: form.attr('method'),
            data: form.serialize(),
            success: function(result){
                if (result == 'success'){
                    $('.output_message').text('Message Sent!');

                } else {
                    $('.output_message').text('Error Sending email!');
                }
            }
        });

        // Prevents default submission of the form after clicking on the submit button. 
        return false;   
    });
});

推荐答案

删除按钮type = submit和

remove button "type =submit" and

然后使用下面的旧代码。

then use your old code below.

$(document).ready(function() {
   $('#btn-finish').on('click', function() {

        // Add text 'loading...' right after clicking on the submit button. 
        $('.output_message').text('Processing...'); 

        var form = $(this);
        $.ajax({
            url: form.attr('action'),
            method: form.attr('method'),
            data: form.serialize(),
            success: function(result){
                if (result == 'success'){
                    $('.output_message').text('Message Sent!');

                } else {
                    $('.output_message').text('Error Sending email!');
                }
            }
        });

        // Prevents default submission of the form after clicking on the submit button. 
    });
});

这篇关于单击按钮时重复的表单提交？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！