Jquery submits form multiple times

Question

I'm creating the modal window which consist of form, For some reason the first time I submit the form, it works. However, when I submit the form a second time (without page reload) it submits the form twice. When I submit a third time, I get three submissions - and so on.

Here is the code

  $(function() {

levels = ['Expert',
          '1',
          'Advanced',
          '2',
          'Intermediate',
          '3',
          'Basic',
          '4',
          'Entry',
          '5'
          ]


// load the modal window
$('a.modal').click(function(){
    var req_name=this.id;
    // scroll to top
    $('html, body').animate({scrollTop:0}, 'fast');


    var selectField = document.getElementById("category");

    if(req_name=='task')
        {
        selectField.style.display = "none";
        }
    else{

    selectField.options.length = 0;
    for (i=0; i<levels.length; i=i+2) 
    {
        selectField.options[selectField.options.length] = new Option(levels[i],levels[i+1]);

     }
    }

    $.ajaxSetup ({
        cache: false
    });

    // before showing the modal window, reset the form incase of previous use.
    $('.success, .error').hide();
    $('form#contactForm').show();

    // Reset all the default values in the form fields

    $('#name').val('');
    $('#element_id').val('');
    $('#category').val('');

    //show the mask and contact divs
    $('#mask').show().fadeTo('', 0.7);
    $('div#contact').fadeIn();


    $('input#submit').click(function(event) {

        //Inputed Strings
        var name = $('#name').val(),
            element_id = $('#element_id').val()

            //No Errors?
            event.preventDefault();

            event.stopPropagation() 
        $.ajax({
            url: '/add_requirement/',
            dataType: 'json',
            data: {req_name:req_name,
                   name:name,
                   element_id:element_id
                   },
            traditional: true,
            success: function(msg){

                alert(msg.word)
                $('#contactForm').reset();
              }
         });

        var tab = document.getElementById(req_name+'_formset_table');
        id = (tab.rows.length)-1; 
        var BODY = tab.getElementsByTagName('tbody')[0];
        var TR = document.createElement('tr');
        var TD1 = document.createElement('td');
        TD1.setAttribute("id","detail_resp");
        var TD2 = document.createElement('td');
        TD2.setAttribute("id","level");
        var TD3 = document.createElement('td');

        var TD4 = document.createElement('td');
        //TD4.setAttribute("id","level");

        var new_req = document.createElement("input");
        new_req.value = name;
        new_req.setAttribute("name", req_name+"_formset-"+id+"-"+req_name);

        var imp = document.createElement("input");
        imp.setAttribute("name", req_name+"_formset-"+id+"-importance");


        var level_field = document.createElement('SELECT');
        level_field.setAttribute("name", req_name+'_formset-'+id+'-level');

        level_field.options.length = 0;
        for (i=0; i<levels.length; i=i+2) 
        {
            level_field.options[level_field.options.length] = new  Option(levels[i],levels[i+1]);

         }



        var check_box = document.createElement("input");
        check_box.setAttribute("type","checkbox");
        check_box.setAttribute("id","delete_checkbox");
        check_box.setAttribute("name", req_name+"_formset-"+id+"-DELETE");

        TD1.appendChild(new_req);
        TR.appendChild (TD1);
        TD2.appendChild(imp);
        TD3.appendChild(level_field);
        TR.appendChild (TD2);
        TR.appendChild (TD3);
        TD4.appendChild(check_box);
        TR.appendChild (TD4);
        BODY.appendChild(TR);
        count = (tab.rows.length)-1; 
        total_forms = document.getElementById('id_'+req_name+'_formset-   TOTAL_FORMS');
        total_forms.value = count       

        return false;
    });





    // stop the modal link from doing its default action
    return false;
});

// close the modal window is close div or mask div are clicked.
$('div#close, div#mask').click(function() {
    $('div#contact, div#mask').stop().fadeOut('slow');

});

$('#contactForm input').focus(function() {
    $(this).val(' ');
});

$('#contactForm textarea').focus(function() {
    $(this).val('');
   });

// when the Submit button is clicked...


   });

Thanks in advance

Answer 1

You're binding a click handler to the submit button on every a.modal click event.

$('a.modal').click(function(){
[...]
    $('input#submit').click(function(event) {

Chances are you are clicking a.modal more than once, and hence end up binding multiple handlers to the submit button, and they all fire each time the submit button is clicked.

This is why you are seeing incremental submission

• First time you open the modal, one handler bound, one submission when submit button clicked
• Second time you open the modal, another handler bound (now total two), two submissions
• ...etc.

You can try:

• Binding the submit click handler outside of the a.modal click handler
• Unbinding the current click handler before binding another one if for whatever reason you have to bind this within the a.modal click
  • This can be done by calling .off('click') (jQuery 1.7) or unbind('click') (jQuery 1.4)

Answer 2

It may have to do with where on the page lifecycle you are binding the click event. Try either moving it around or removing the click binding (to "clean" previous bindings) before the bind

$('a.modal').unbind('click');
$('a.modal').click( function { ... } );

I'd try the second option to check if that's the problem, and if it is, then try to find where it'd be the proper place to put that instruction (perhaps document.ready)

Answer 3

I think you are not closing the modal window after every submit, you are just doing the

fadeout();

Due to this the earlier modal windows are still in existence hence the form.