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

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

• javascript

3 Answers 3

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

processInfo() is called twice, both here, when the form submits:

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

and here, when you click the submit button:

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

You should remove one of them.

You are calling the processInfo() function twice: once on the form submit event, and once on the onclick on the input.

You should only attach the processInfo() function on the submit event. Remove the onlick dom0 event handler (inline scripts are to be avoided).

Also, do not use return false; as it prevents event bubbling. Use ev.preventDefault() instead.

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