Question

I’m trying to insert records into DB using AJAX. I’m not sure why, but it seems the javascript function referenced in the onclick tag of the submit button gets fired twice, and hence I get two records in my DB per click.

Placing alerts in the JS, I have managed to figure out that the problem is in the JS function getting called twice, and not the PHP script making two inserts. So, I’m not posting the PHP script, unless asked.

Here’s the HTML for the form:

<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

You are calling processInfo twice once in submit handler and once in click handler. This might be the reason.

Here onclick="processInfo()" and inside
$("#notify").submit(function() {
processInfo();
return false;
});