jQuery impromptu: Form getting submitted even before Yes or No ic clicked

Answer 1

Fancy prompts like this show a message on/over the page, but they don't suspend execution like alert and confirm do. (This is what they mean on the docs page when they say " This is not intended to be a modal replacement...") So although you're showing the prompt, the form submission continues.

The usual way to handle this is to show the prompt but cancel the form submission, and then submit the form programmatically if the user says "Yes."

Basically, you:

• Set up a submit handler on the form so that it cancels the submission if it's told to
• Set up the image click to tell the form to cancel the submission and show the prompt instead
• Set up a handler on the prompt's "Yes" button to submit the form

Answer 2

Try something like this:

<input type="image" name="delete" src="images/delete.png" onclick="$.prompt('Are you sure??',{ buttons: { Ok: $('form#foo').submit(), Cancel: false } }); return false;">

Even better, try to make your JS unobstrusive:

<input type="image" name="delete" src="images/delete.png" />

 

$('input[name=delete]').click(function() {
    $.prompt('Are you sure??',{
        buttons: {
            Ok: $('form#foo').submit(),
            Cancel: false
        }
    });
    return false;
});