Jquery displaying confirmation dialog on form submit

Question

I need to display confirmation dialog on image click. Code in "onclick" section of image should be only executed if jquery confirmation dialog returned true.

At this point when user clicks on $(".submit_image") - dialog is displayed, but form is still submitted.

The logic should be the same for both jquery.alerts plugin or regular javascript confirm dialog.

<form name="myform">
<img class="submit_image" onclick="myform.field1.value='1';myform.field1.value='2'; myform.submit();">
</form>


$(document).ready(function(){
   // catch submit 
   $(".submit_image").click(function(e){
       jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
      return r;
       });
   });
});

Answer 1

I found solution to my problem, but some changes in existing code still needs to be performed.

In html I placed image inside of anchor tag with href = to what I had in image onclick event.

<form name="myform">
<a href="javascript: myform.field1.value='1';myform.field2.value='2'; myform.submit();" class="submit_image_link"><img src="..."></a>
</form>

Added e.preventDefault() method to prevent default event for anchor, which is following link or javascript in href section. As I understand, "return=false" or preventDefault() didn't work for me in my original code, because "img" tag doesnt have any default action.

$(document).ready(function(){
   // catch submit 
   $(".submit_image_link").click(function(e){
    e.preventDefault();
    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
        if (r) location.href = $(".submit_image_link").attr('href');
    });
   });
});

Answer 2

return jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
  return r;
});

Maybe? jQuery needs you to return "false" from the .click function to stop the default action, and right now you're not returning anything from that function.

* EDIT *

I just looked at jConfirm, and because of how it works (specifically because it doesn't return anything; it can only return the value via its callback) it's impossible to use it the way you want. What you'll need to do instead is just ALWAYS return false from your onclick handler, and then in your jConfirm callback manually invoke a form submission.

Example:

$(document).ready(function(){
  // catch submit 
  $(".submit_image").click(function(e){
    jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
      // If they confirmed, manually trigger a form submission
      if (r) $(".submit_image").parents("FORM").submit();
    });
    // Always return false here since we don't know what jConfirm is going to do
    return false;
  });
});

Answer 3

You need to break up your events. One for the image's onclick to call form's onsubmit, and then form's onsubmit, which is the appropriate place for the 'false' return to halt form submission.