Javascript function fires twice on clicking 'Submit' button

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

score 3 · Accepted Answer · answered Oct 17 '11 at 09:09

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

answered Oct 17 '11 at 09:09

Narendra Yadala

9,554
1
28
43

I'm aware I'm calling `processInfo` from the click handler, but wasn't aware about the submit handler (i'm new to JS). Is it the first 6 lines of the JS code I posted that's setting up the submit handler? Does it matter which of the two I remove? – Ayush Oct 17 '11 at 09:12
I see you expanded your answer, which answers my above question. Thanks! – Ayush Oct 17 '11 at 09:12
You can remove `click` handler because the `return false` inside submit handler might be necessary for you. – Narendra Yadala Oct 17 '11 at 09:13

score 1 · Answer 2 · answered Oct 17 '11 at 09:11

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.

score 1 · Answer 3 · answered Oct 17 '11 at 09:14

1

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

answered Oct 17 '11 at 09:14

Cristian Necula

1,247
13
17

While the others are right in saying that the onclick is unnecessary, it should be noted that jQuery's submit by itself [is known to fire twice](http://stackoverflow.com/questions/10321323/form-submitted-twice-using-submit-on-keyup), too. I solved this by chaining `.keydown(function(e){ if (e.which == 13) { e.preventDefault(); } })` behind the submit. – WoodrowShigeru Oct 08 '15 at 18:12

Javascript function fires twice on clicking 'Submit' button

3 Answers3