JQuery modal form DIV that does a window.location.href with querystring values from the form

Question

I'd like to use a jQuery Modal Dialog of some kind to present 4 or 5 options on a form to a user. When the user clicks Save, the dialogue would validate and then window.location.href somewhere else using values from the form in the arguments.

I can't find a good example of doing this; almost every sample is Ajax...

Answer 1

You can easily achieve this using facebox plugin

Answer 2

To use a jQuery UI Dialog, you have to define the HTML for it on the page and then call dialog() to display it. This isn't too practical when you need to change the options to display at runtime.

You could use a plugin I wrote to simplify this kind of task. You can create dialogs on demand wiht it. The plugin assumes that you already have the proper JS and a jQuery UI Theme installed. Here's the plugin: http://mosttw.wordpress.com/2010/08/07/dialogwrapper-simplified-use-of-jquery-ui-dialogs/ and here's an example:

$.showDialog("Title", "Choose your option:<br/> <input type='radio' value='1'/> Option 1<p></p>... etc.", {
    buttons: {
        'Ok': function() {
            // Do your validation here

            // And then close the dialog
            $.hideDialog();
        }
    }
});

Demo:

http://jsfiddle.net/BquUe/