0

I want to show a JQuery-UI dialog when I submit the form. I have the code with me but I have the following ideas and want to know which would be the most ideal.

   var openDialog =function(){
      //set up dialog .
      var saveButton = // "OK" of dialog -> click event calls: submit the form
      var cancel = //  "Cancel" of dialog -> click event calls :close the dialog
   };


METHOD 01

Should I setup the form as:

$('form').submit(function(evt){
   openDialog();
});


Doubt

If I do this and call form.submit() when the saveButton is clicked wont the openDialog called again this would create a cycle.


OR


METHOD 02

Should I setup a click on the submit button /link in the form to call openDialog() and with submit as well. How would I call form.submit() when the "Ok" button of confirm is clicked without triggering the submit event setup on the form.

Edit: I would appreciate it if this could be answered as well

This being said. If I have ASP.NET MVC Data Annotations setup on the form. How can set up the script such that the dialog opens up only if the MicrosoftValidations are run. I am using ASP.MVC 3.0 and not using jQuery Validation/Validator.


BottomLine:
How do I setup a dialog such that I get the modal dialog when one tries to submit a form?

2 Answers 2

1

A graceful degradation approach. Off the top of my head...

<form>
    <input type="submit" id="submit" text="Submit" />
</form>    


$("#submit").click(function ()
{
    // open dialog here

    return false;
});


If JavaScript is disabled, the form will simply submit. But if JavaScript is enabled, the click-event on the submit button (in the form) will open a dialog and prevent the form from submitting. What you need to do now is attach a click-event on the "OK" button in the dialog, and submit the form from there...

$("#dialog_submit").click(function ()
{
    $("form").submit();
});
1
  • What about the case when javascript is enabled and the user submits the form by hitting Enter/Return. there would not be a dialog shown in this case. Mar 30, 2011 at 23:45
-1

Add preventDefault() to not submit the form so you can submit it later, with the dialog

$('form').submit(function(evt){
   evt.preventDefault();
   openDialog();
   // I think return false should work too
   return false;
});

Edit : ok there is a infinite loop To avoid this you must submit the form in the openDialog with :

$('form')[0].submit()

In this case submit event is not triggered (tested in Safari)

$().ready(function()
{
$('form').submit(function(evt){
   evt.preventDefault();
   openDialog();
   // I think return false should work too
   return false;
})
})

function openDialog()
{
    if(confirm("ok ?"))
        $('form')[0].submit()       
    else
        alert('form not submitted')
}
3
  • This would satisfy that I will get a dialog opened when I try to submit the form.However my openDialog() has a "OK" button which calls form.submit() when you click it. Wont this trigger the openDialog() again. Mar 30, 2011 at 21:21
  • You could just do return confirm("Ok?") in the form submit event. Also; I think that what friction wants his own custom dialog, not the standard JavaScript confirm dialog.
    – cllpse
    Mar 30, 2011 at 21:43
  • the confirm is just for example, you can do you want
    – JiDai
    Mar 30, 2011 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.