Why does Ajax form submit twice?

Question

Why does the below script cause the form to submit twice? I can't figure this out, even after trying other solutions posted around the internet. Submitting twice is causing duplicate entries in the database. Thank you in advance for looking into this!

<script type="text/javascript">
$(document).ready(function(){   
    $('#form-error').hide();
    $("#form-submit").click(function(){
        $("#form").submit();
    });
});

$('#form').submit(function(e) {
            register();
    e.preventDefault();
    });

function register()
{               
    jQuery.ajax({
        method: 'POST',
        url: 'actions/add.php',
        data: $('#form').serialize(),
        dataType:'json',
        success: function(msg){

            if(parseInt(msg.status)==1)
            {
                window.location=msg.txt;
            }
            else if(parseInt(msg.status)==0)
            {
                error(1,msg.txt);
            }
        }
    });

}               

function hideshow(el,act)
    {
    if(act) 
        {
        $('#'+el).hide(0).slideDown(500, 'linear');
        }
    else $('#'+el).hide();
    }   

function error(act,txt)
    {
    if(txt) 
        {
        $('#form-error').html(txt);
        }
    $('#form-error').hide(0).slideDown(500, 'linear');
    }
</script>

HTML Form:

 <form id="form">
            <p>First Name:</p>
            <input type="text" name="firstname" />
            <p>Last Name:</p>
            <input type="text" name="lastname" />
            <p>E-Mail Address:</p>
            <input type="text" name="emailaddress" />
            <p>Sequence Assignment:</p>
            <select name="sequence">
                <option value="1">Default Sequence</option>
            </select>
            <button id="form-submit">Add User</button>
            <p id="form-error"></p>
</form>

Does this answer your question? [jQuery AJAX form submits twice](https://stackoverflow.com/questions/20195483/jquery-ajax-form-submits-twice) — Davide Casiraghi, Jan 04 '21 at 13:38

ryubro · Accepted Answer · 2015-10-11T05:11:01.877

1

There are duplicated event listeners for the submit event:

1. When submit button clicked:

$("#form-submit").click(function(){
   $("#form").submit();
});

2. When form is submitted:

$('#form').submit(function(e) {
            register();
    e.preventDefault();
});

You need only one of them.

Change your code like:

<script type="text/javascript">
$(document).ready(function(){   
    $('#form-error').hide();
    $('#form').submit(function(e) {
        register();
        e.preventDefault();
    });
});

function register()
{
    .
    .
    .

edited Oct 11 '15 at 05:11

answered Oct 11 '15 at 05:05

ryubro

338
1
8

Worked! Thanks so much! Javascript isn't my forte, as you can probably tell. Thanks again! – Alex Parker Oct 11 '15 at 05:09

score 0 · Answer 2 · answered Oct 11 '15 at 05:04

I had a similar issue to this. If you just single click on the button does it enter duplicate data?

The way I got around it is once the click happened I disabled the button until after the Ajax call.

function register()
{      
    //disable button         
    jQuery.ajax({
        method: 'POST',
        url: 'actions/add.php',
        data: $('#form').serialize(),
        dataType:'json',
        success: function(msg){

            if(parseInt(msg.status)==1)
            {
                window.location=msg.txt;
            }
            else if(parseInt(msg.status)==0)
            {
                error(1,msg.txt);
            }
        }
    });
    //Enable Button
}

Another option would be to do some checks in the php code that submits it to the database to see if that data already exists.

Why does Ajax form submit twice?

2 Answers2