单击“提交”按钮时，Javascript 函数会触发两次

Question

我正在尝试使用 AJAX 将记录插入数据库。我不知道为什么，但似乎提交按钮的 onclick 标记中引用的 javascript 函数被触发了两次，因此每次点击我的数据库中都会获得两条记录。

在 JS 中放置警报，我设法找出问题在于 JS 函数被调用了两次，而不是 PHP 脚本进行了两次插入。所以，除非被问到，否则我不会发布 PHP 脚本。

这是表单的 HTML：

<form id="notify" method="post" action="add_notify.php">            
            Name: <input type="text" class="formname" name="name" value="" size="20"/>
            Email: <input type="text" class="formname" name="email" value="" size="20"/>
            <input type="submit" class="sendform" name="submit" onclick="processInfo()" value="Go!"/>
</form>

Javascript：

$("document").ready(function() {
    $("#notify").submit(function() {
        processInfo();
        return false;
    });
});

function processInfo() 
{
    var errors = false;
    // Validate name
    var name = $("#notify [name='name']").val();
    if (!name) {
        errors = true;
        document.getElementById('name_error').innerHTML = 'You must enter a name.';
    }

    var email = $("#notify [name='email']").val();
    if (!email) 
    {
        errors = true;
        document.getElementById('email_error').innerHTML = 'You must enter an email.';
    }
    else
    {
        var validEmail = true;      

        validEmail = validateEmail(email);

        if (!validEmail)
        {
            errors = true;
            document.getElementById('email_error').innerHTML = 'You must enter a valid email address.';         
        }
    }

    if (!errors) 
    {
        $("#notify").ajaxSubmit({success:showResult});
        return false;
    }
}

Answer 1

您在提交处理程序和点击处理程序中调用了两次processInfo。这可能是原因。

这里onclick="processInfo()" 和里面 $("#notify").submit(function() { processInfo(); return false; });

Answer 2

processInfo() 被调用两次，都在这里，当表单提交时：

$("#notify").submit(function() {
        processInfo();
        return false;
    });

在这里，当您单击提交按钮时：

<input type="submit" class="sendform" name="submit" onclick="processInfo()" value="Go!"/>

您应该删除其中一个。

Answer 3

您调用了两次processInfo() 函数：一次是在表单提交事件上，一次是在输入的onclick 上。

您应该只在提交事件上附加processInfo() 函数。删除 onlick dom0 事件处理程序（应避免使用内联脚本）。

另外，不要使用return false;，因为它可以防止事件冒泡。请改用 ev.preventDefault()。

$("document").ready(function() {
    $("#notify").submit(function(ev) {
        ev.preventDefault();
        processInfo();
    });
});