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代码中进行一些检查，将其提交给数据库以查看该数据是否已经存在。

为什么Ajax表单提交两次？

2 个答案: