Alex Rivera | Logout

Infinite loop of form submit using jquery event

Asked 2012-03-21T21:06:57.407
17

The code is stuck in a loop when I try to catch a form submission. The purpose is to replace a value of the form before it goes out.

$('form').submit(function(e){
   e.preventDefault();
   $.ajax({
      type: "POST",
      url: 'convert.asp',
      data: $('form').serialize(),
      success: function(response){
         $('input[name="field1"]').val(response);
         $('form').submit();
      }
   });
   return false;
});

Does anyone have any ideas?

UPDATE: I originally had it bound to a button click event and it was working but I wanted to preserve the [enter] key element of the submit button. Seeing that the code is kind of illogical, would catching a keypress be a better idea?

jquery form-submit
Edit
Report

2 Answers

53

I assume your ajax is an attempt to validate the form before its eventual submission. In that case just unbind the validation function before submitting the form.

  success: function(response){
     $('input[name="field1"]').val(response);
     // Add unbind to remove validations
     $('form').unbind().submit(); 
  }
answered 2012-03-21T21:13:56.960
8

In the success you trigger another submit...

$('form').submit(function(e){
   e.preventDefault(); // redundant,  you return false in the end. <<<===
   $.ajax({
      type: "POST",
      url: 'convert.asp',
      data: $('form').serialize(),
      success: function(response){
         $('input[name="field1"]').val(response);
         $('form').submit(); // <=== delete this! <<<<=================
      }
   });
   return false;
});
answered 2012-03-21T21:09:35.850

Your Answer