jquery submit inside validation creates too much recursion

Question

because the way jquery dialogs woks, when using a "confirm" dialog, you have to return false immediately, and if the user selects "Ok", then trigger the form submit.

so, I'm using this code:

     function validoForm()
    {
//some code here...
        if (datosTdcIncompletos==true)
        {
            var $dialogTDC= $('<div></div>')
            .html("TDC information incomplete\n\rDo you want to continue?")
            .dialog({
                autoOpen: false,
                modal:true,
                title: 'Confirm',
                buttons: {
                    Ok: function() {$( this ).dialog( "close" ); $('#bookForm').submit();},
                    Cancel: function() {$( this ).dialog( "close"); return false;}
                }

            });
            $dialogTDC.dialog('open');
            return false;


        }
        $('#bookForm').submit();
    }

and

<script type="text/javascript">
    $(document).ready(function() {

        $('#submitBtn').click(function (){ $('#bookForm').submit();});

        var options1 = {
                  target: '#bookForm', 
                  url: 'http://localhost/include/processForm.php',
                  type:'post', 
                  beforeSubmit:validoForm, 
                  success: showResponse
                  };
        $('#bookForm').ajaxForm(options1); 

    });
</script>

The problem arises because of the Ok button function (Ok: function() {$( this ).dialog( "close" ); $('#bookForm').submit();},) because this is submitting the form again and I get a "too much recursion" error.

how should this be done?

Answer 1

You need the entire validation and dialogue to work as a single entity. So when the submit button is clicked, the javascript validation kicks in and the dialogue shows in one go. Then the dialogue acts as the final step in the validation process.

So at the end of your validate method you should return the value returned from the dialogue or return true (assuming the dialogue shows when the form is incomplete).

That also means removing the click event on the submit button as otherwise you'll just go around in a loop as you have seen.

Answer 2

Your submitBtn click handler should just run the validation method (and return false to prevent the default mechanism).

Then your validation method should only call submit when the user confirms OK.

You also need to remove the last $('#bookForm').submit(); in your validation method, that gets called all the time.