HTML form continues to submit before JQuery Dialog selection is made?

Question

I have a form in HTML:

<form id="notes" method="post" onsubmit="return notes_validate()">

In this form I've included a JQuery Dialog box (I've connect the scripts and it's working):

<div id="dialog-confirm" title="Alert" style="display:none;">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Continue and submit?</p>
</div>

I have a JavaScript script called "notes_validate()" that validates elements on the form and returns true if all elements pass the checks.

In this script, as one of the final validation steps, I prompt the user with this JQuery Dialog box; I'm trying to get the Dialog box to submit the form if "Yes" is selected and return false (don't submit the form) if "Cancel" is selected.

In "notes_validate()" is:

if(validated){

        $(function() {
            $( "#dialog-confirm" ).dialog({
                resizable: false,
                height:240,
                width:300,
                modal: true,
                buttons: {
                    "Yes": function() {
                        $( this ).dialog( "close" );
                        return true;
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                        return false;
                    }
                }
            });
        });

    }

The issue is that the form is automatically submitting before any option is selected. I also have a submit button in the form in HTML:

<input class="submit" style="float:left" type="submit" value="submit" />

What's the issue(s)?

I might be wrong but maybe you need `preventdefault()` somewhere ? — Maximus2012, Feb 23 '16 at 22:03
https://api.jquery.com/event.preventdefault/ http://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting — Maximus2012, Feb 23 '16 at 22:04
welcome to the wonderful world of asynchronous javascript. Your return true and return false cannot affect the outcome of the form's submit event where they are located. — Kevin B, Feb 23 '16 at 22:14
I wrote an answer over here that will solve your problem, simply replace the ajax request with your dialog. http://stackoverflow.com/a/14486639/400654 — Kevin B, Feb 23 '16 at 22:16
the functions that handle `yes` & `cancel` return either true or false but those return values need to be passed to the parent function do they not to so that the parent function itself returns either true ( form will submit ) or false ( the form will not submit )? — Professor Abronsius, Feb 23 '16 at 22:21
@RamRaider the problem is the parent function has to return before those callbacks can run, therefore the parent function can't possibly return what those callbacks do. — Kevin B, Feb 23 '16 at 22:22
not being proficient with jQuery and not seeing the entire function doesn't help but the parent function needs to return either true or false for the method it is invoked does it not? — Professor Abronsius, Feb 23 '16 at 22:23
yes, and it's simply not possible. :) so another approach has to be taken. It's like trying to eat your pizza before it is delivered. — Kevin B, Feb 23 '16 at 22:23
you mention asynchronous javascript which implies ajax but I see nothing that suggests ajax. But then - not being proficient with jquery I might well have missed the point of that — Professor Abronsius, Feb 23 '16 at 22:25
The dialog is asynchronous. You open a dialog, then at some point later, the user will click ok or cancel, thus triggering the callback asynchronously. The parent function cant wait for that click to occur, because the click can't happen until after the parent function returns. — Kevin B, Feb 23 '16 at 22:25

Andy Arndt · Accepted Answer · 2016-02-23T22:18:42.347

The problem is you're expecting onsubmit="return notes_validate()" to keep the form from submitting, but your threading is messed up. You're not returning anything directly from notes_validate().

Once you hit $( "#dialog-confirm" ).dialog({...}), that's a different "thread". Your notes_validate method is continuing on as if nothing happened.

What you need is

function notes_validate(event) {
    if(validated){
    $(function() {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:240,
            width:300,
            modal: true,
            buttons: {
                "Yes": function() {
                    $( this ).dialog( "close" );
                    $( "#notes" ).submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
    }
    event.preventDefault();
}

Update: As pointed out, it would be better to remove the onsubmit portion of this altogether. Changing your button to the following after removing the onsubmit from your form should do the trick:

<input class="submit" style="float:left" type="button" onclick="notes_validate()" />

there's one minor flaw here. by using `$( "#notes" ).submit();`, you will re-trigger the submit event possibly causing an infinite loop. You should instead submit the form without triggering the event. `$("#notes")[0].submit();` — Kevin B, Feb 23 '16 at 22:18
Good point, would be better to trigger this on button click. I'll update the answer. — Andy Arndt, Feb 23 '16 at 22:19
Thank you! I would also add that when I added multiple dialog boxes, they weren't working until I added this line to each of the Cancel functions: $( this ).dialog( "destroy" ); — draft, Feb 24 '16 at 15:26

HTML form continues to submit before JQuery Dialog selection is made?

1 Answers1