單擊“提交”按鈕時，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上輸入。

您應該只在submit事件上附加processInfo()函數。 刪除onlick dom0事件處理程序（應避免使用內聯腳本）。

另外，不要使用return false; 因為它可以防止事件冒泡。 請改用ev.preventDefault（）。

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