0

When one of my forms is submitted a user may be redirected to either of two pages depending on the value entered into a certain field of the form. The redirect is at the users discretion so I use a confirmation box. If the user presses "Ok" they get one page, if they press "Cancel" they get the other page. Unfortunately "Yes" and "No" buttons make more sense than "Ok" and "Cancel" in my case. I have made a new box using dialog in jQuery's ui library which has "Yes" and "No" buttons and I call it when the form is submitted like this:

$("#myForm").submit(function() {.....

The problem is that it just flashes on the screen and does not give the user enough time to make a choice, unlike a confirm box which prevents the form from submitting until the user has made a selection.

Is there any way I make the dialog box halt form submission the same way as a confirm box does? I can think of some work arounds, but all require me to stop using $("#myForm").submit(function() {.....

ubiquibacon
  • 10,451
  • 28
  • 109
  • 179

2 Answers2

0

How about you replace the submit button with a normal button type="button" and send the form manually after the dialog.

PiTheNumber
  • 22,828
  • 17
  • 107
  • 180
  • The reason I didn't want to do that is because I am using Grails, which provides a nice `` tag. I can change it to a standard `` tag, but for some reason it does not render as nicely as what Grails provided (the box model is to wide even though I am using the same class). – ubiquibacon Oct 18 '11 at 22:29
0

PiTheNumber makes a good point in that you may want to send the form after the dialog. I think the reason it flashes the dialog without giving the user a chance is that the dialog() method is an asynchronous method, so the submit goes ahead already while the dialog is being brought up.

Then, for the following:

If you want to specify specific buttons, you can pass the buttons option to the dialog:

$( ".selector" ).dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } })

This way, you can specify your own button texts, functions, etc.

Also, you can make the dialog a modal dialog to prevent the user from doing anything else on the screen while the dialog is showing:

$( ".selector" ).dialog({ modal: true });

These examples come from http://jqueryui.com/demos/dialog/, by the way. Go over there and check it out. Obviously you must combine the options and pass them together to dialog().

mydoghasworms
  • 18,233
  • 11
  • 61
  • 95