Question

I have a form like this:

<select>
    <option value="page1.html" class="confirm">Page 1</option>
    <option value="page2.html" class="confirm">Page 2</option>
    <option value="page3.html">Page 3</option>
</select>

I want to use SimpleModal to show a confirmation before going to Page 1 or Page 2, but not if Page 3 is selected. The confirmation message should be the same for Page 1 and Page 2. I’m a little confused about how to do the syntax.

Answer 1

Using the JavaScript from the SimpleModal Confirm Demo as an example, you could do the following:

    // replace 'form' with your form selector
$('form').submit(function (e) {

            // replace 'option:selected' with a more specific selector
    var opt = $('option:selected');

            // if the selected option has a class of confirm, show the dialog
    if (opt.hasClass('confirm')) {

        e.preventDefault();

        // example of calling the confirm function
        // you must use a callback function to perform the "yes" action
        confirm("Continue to the SimpleModal Project page?", function () {
            window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
        });
    }
});