Form submitted multiple times

I am working on a single page application using codeigniter and jquery, clicking on the menu I load the content and it works great, it loads the first time and when I try to submit the modal form it works, but every time I reload the content and I submit same form again, I saw it was submitted the number of times I reloaded the content on the page.

this is how I load the main content into the container when I click on the menu item:

case 'Parametrage':
      $("#container").empty();
      $("#container").load("params");
      break;

      

and a script loaded by the "param" controller that represents the modal form:

$(function(){
    $('body').on('submit', 'form', function(e){
       e.preventDefault();

        $.ajax({
            type: "POST",
            url: "<?php echo site_url("params/save_form"); ?>",
            data:$(this).serialize(),
            success: function(response){ 
                if(response == 'true'){
                    $.modal.close();    
                    var table = $('#table_id').DataTable();
                    table.ajax.reload();
                    $('#dialog-message').attr('title','Enregistrement');
                    $('#msgIcon').attr('class','ui-icon ui-icon-circle-check');
                    $('#msgMessage').html('Enregistré avec succès');
                    $("#dialog-message").dialog({
                      modal: true,
                      buttons: {
                        Ok: function() {
                          $(this).dialog("close");
                        }
                      }
                    });
                }else{
                    $('#errors_container').html(response);  
                }

            },
            error: function(){
                alert('Error');
            }
        });     
    });
});

      

You can help?

thank

Based on Shaiful Islam's answer, this solves the problem:

case 'Parametrage':
     $("#container").empty();
     //Added this line
     $('body').off("submit", "form");
     $("#container").load("params");
     break;

      

+3


source to share


4 answers


Every time you load the main content it seems like javascript is loading it too. So the change event is bound every time with your form. You need to remove the previous binding every time you load the main content.

Just add this line before $('body').on('submit', 'form', function(e){



$(body).off("submit", "form");

      

It will disable your previous binding and keep one binding.

+4


source


See the quotes in the ajax url. Change this

url: "<?php echo site_url("params/save_form"); ?>",

      



to please

url: '<?php echo site_url("params/save_form"); ?>',

      

+3


source


 url: "<?php echo site_url("params/save_form"); ?>",

      

Please change this to

 url: "<?php echo site_url(\"params/save_form\"); ?>"

      

OR

url: "<?php echo site_url('params/save_form'); ?>",

      

+2


source


you cannot use double quote

internally double quote

so change like this: -

url: '<?php echo site_url("params/save_form"); ?>',

      

also change $('body').on('submit', 'form', function(e){

to$('body').off('submit').on('submit',function(e){

+2


source







All Articles