The code works several times in IE / Opera

Question

I have a problem on my page with code running multiple times in IE and Opera, although it works in FF, Chrome, and Safari. I am using the latest jQuery, validation plugin and form plugin. My code comes from the following html:

<form action="/case_study/php/survey_submit.php" id="mt_survey" method="post"> ... ... <fieldset id="submit_button_box"> <input id="submit_button" type="submit" value="Submit Case Data" /> </fieldset></form> 

When I click the submit button, it should run the following jquery:

  $('#mt_survey').submit(function() { if ( ($("#mt_survey").valid() == true) || confirm("Unfinished form, continue saving as temporary?")) { $('#mt_survey').ajaxSubmit({ data: {table: "mt_data"}, target: '#messages', success: function() { $('#messages').fadeIn('slow'); $( 'html, body' ).animate( { scrollTop: 0 }, 0 );} }); } return false; }); 

Now it works when I press the submit button for the first time. At this point, the form is cleared for the next data set. This is done using the following code.

  $('#clear_form').click(function() { $("#mt_survey").resetForm(); $("#messages").replaceWith('<div id="messages"></div>'); $("#messages").hide(); $("#escort_div").hide(); $("#transport_a_div").hide(); $("#transport_l_div").hide(); $("#item_div").hide(); $("#item2_div").hide(); $("label.error").hide(); $("#correction_button").attr('disabled', 'disabled'); $("#submit_button").attr('disabled', ''); }); 

Now that this is done, the form will be filled out again, and click again to submit. But this time in IE and Opera, the code for it runs several times. I know for sure that it starts several times, as I checked by placing warnings there, but basically it calls my file "survey_submit.php" several times and inserts the data into MySQL. Any ideas why? It tormented me for a long time, and I see no reason why this is so.

Answer 1

Do you really need to use a form plugin? You can probably get the same effect using

 $('#mt_survey').submit(function() { var $this = $(this); if ( ($this.valid() == true) || confirm("Unfinished form, continue saving as temporary?")) { $.ajax({ data: $this.serialize + "&table=mt_data", success: function(response) { $('#messages').html(response).fadeIn('slow'); //you may also need to do some processing of the response data before injecting as html $( 'html, body' ).animate( { scrollTop: 0 }, 0 );} }); } return false; }); 

And then debugging will be easier

Answer 2

IE and Opera cache data and use cache data, so you can't call next time

Change the code to:

 $('#mt_survey').ajaxSubmit({ cache : false, data: {table: "mt_data"}, 

I have already encountered this problem, hope this helps you