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();
    });
});

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

3 个答案: