为什么Ajax表单提交两次？

Question

为什么以下脚本导致表单提交两次？ 即使尝试了互联网上发布的其他解决方案，我也无法弄清楚。 提交两次会导致数据库中重复条目。 预先感谢您对此进行调查！

<script type="text/javascript">
$(document).ready(function(){   
    $('#form-error').hide();
    $("#form-submit").click(function(){
        $("#form").submit();
    });
});

$('#form').submit(function(e) {
            register();
    e.preventDefault();
    });

function register()
{               
    jQuery.ajax({
        method: 'POST',
        url: 'actions/add.php',
        data: $('#form').serialize(),
        dataType:'json',
        success: function(msg){

            if(parseInt(msg.status)==1)
            {
                window.location=msg.txt;
            }
            else if(parseInt(msg.status)==0)
            {
                error(1,msg.txt);
            }
        }
    });

}               

function hideshow(el,act)
    {
    if(act) 
        {
        $('#'+el).hide(0).slideDown(500, 'linear');
        }
    else $('#'+el).hide();
    }   

function error(act,txt)
    {
    if(txt) 
        {
        $('#form-error').html(txt);
        }
    $('#form-error').hide(0).slideDown(500, 'linear');
    }
</script>

HTML表单：

 <form id="form">
            <p>First Name:</p>
            <input type="text" name="firstname" />
            <p>Last Name:</p>
            <input type="text" name="lastname" />
            <p>E-Mail Address:</p>
            <input type="text" name="emailaddress" />
            <p>Sequence Assignment:</p>
            <select name="sequence">
                <option value="1">Default Sequence</option>
            </select>
            <button id="form-submit">Add User</button>
            <p id="form-error"></p>
</form>

Answer 1

提交事件有重复的事件侦听器：

1.单击提交按钮时：

$("#form-submit").click(function(){
   $("#form").submit();
});

2.提交表格时：

$('#form').submit(function(e) {
            register();
    e.preventDefault();
});

您只需要其中之一。

更改您的代码，例如：

<script type="text/javascript">
$(document).ready(function(){   
    $('#form-error').hide();
    $('#form').submit(function(e) {
        register();
        e.preventDefault();
    });
});

function register()
{
    .
    .
    .

Answer 2

我有与此类似的问题。 如果仅单击按钮，是否输入重复数据？

我解决问题的方法是，一旦单击发生，我就禁用了按钮，直到Ajax调用之后。

function register()
{      
    //disable button         
    jQuery.ajax({
        method: 'POST',
        url: 'actions/add.php',
        data: $('#form').serialize(),
        dataType:'json',
        success: function(msg){

            if(parseInt(msg.status)==1)
            {
                window.location=msg.txt;
            }
            else if(parseInt(msg.status)==0)
            {
                error(1,msg.txt);
            }
        }
    });
    //Enable Button
}           

另一个选择是在将其提交到数据库的php代码中进行一些检查，以查看该数据是否已经存在。