CODEWITHSUNDEEP
jqueryformsform-submit
Ben Dauphinee
Ben Dauphinee

Reputation: 4181

jQuery submit() and AJAX event; How can I trigger a regular form submit?

I'm working on a project where when the submit button is clicked, I catch the event and run the form through an external service to check that something is valid.

If there is a problem, I pop a dialog telling the user that there was a problem, and give them the option of overriding to continue on.

The problem is how to trigger the form submit. If I just use .submit(), it send the form into the dialog catch again.

$('#editAddr').submit(function(){
    var checkString = addrString();
    $.getJSON('/validate.php' + checkString, function(data){
        if(data == 0){
            var confw = '';
            confw += '<div><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>';
            confw += 'Failed validation.</p></div>';

            var $dialog = $(confw).dialog({
                title: "Validation Problem",
                modal: true, resizable: false, width: 500,
                buttons: {
                    "Edit": function(){
                        $(this).dialog('close');
                    },
                    "Override": function(){
                        $(this).dialog('close');
                        $('#editAddr').submit();
                    }
                }
            });
        }else{
            $('#editAddr').submit();            
        }
    });

    return false;
});

How can I submit this form properly through the dialog button click?

EDIT: Make sure your form does not include a button with the id="submit", or you will break the jQuery .submit()

Upvotes: 1

Views: 9923

Answers (5)

Ben Barden
Ben Barden

Reputation: 2111

Your issue is that calling submit on the Jquery object runs it back through the jquery onsubmit again. Once you're done with the validator, you just need to call it on the DOM object - you can get this with

document.GetElementById(editAddr).submit();

or with

$("#editAddr").get(0).submit();

At least, this is the way it works with the validation submit handler. I presume it works the same way with the standard submit handler.

Upvotes: 1

j08691
j08691

Reputation: 207901

Instead of binding to the submit event of your form, bind to the click event of the submit button instead. This way you can catch the click event of the submit event and return false when you need to, or proceed with the submit() event on the form.

​$('input[type="submit"]').click(function(e){
    e.preventDefault();
    if() // invalid data
    {

    }
    else // good to go
    {
        $('form').submit();
    }
})​

This solution will also degrade nicely if someone disabled JavaScript. Some of the other solutions I've read won't allow this.

Upvotes: 4

Olivier Refalo
Olivier Refalo

Reputation: 51445

The issue comes from the way you wired the logic.

Your button in the form, should be made a regular button, not a submit button
then, its onaction property should be pointing to the method above.

after that form.submit() should work as expected.

The other option is to add a flag on the method.

Upvotes: 1

Bradley Mountford
Bradley Mountford

Reputation: 8273

Add something like an isOverride or isValid boolean that you check in the beginning of the submit function to bypass further processing.

Upvotes: 0

simshaun
simshaun

Reputation: 21466

Just call .submit() on the form's dom element.

I think you can get it from jQuery like this:

$('#editAddr')[0].submit();  // goes in your Override button logic

Upvotes: 1

Related Questions