Implement jQuery confirmation modal in a form submit?

Question

I am using jQuery modal confirmation like this:

$(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:190,
      width: 330,
      modal: true,
      buttons: {
        "Yes": function() {
          $( this ).dialog( "close" );
        },
        No: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

  <div id="dialog-confirm" title="Genalytics">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure want to unshare?</p>
</div>

I have a input button in a form like this:

<input type="submit" value="Unshare" name="unshare" />

I want to popup dialog box when user clicks on the button. How can I do that?

score 2 · Answer 1 · answered Jun 11 '13 at 09:30

2

I have created Model popup by own no third party plugin.

Could you please try given link.

<input type="button" id="btnShowSimple" value="Simple Dialog" />
<input type="button" id="btnShowModal" value="Modal Dialog" />

See Demo

Hope it likes you.

answered Jun 11 '13 at 09:30

Neeraj Dubey

4,401
8
30
49

Good job. I like the example. – JoshYates1980 Oct 07 '15 at 18:18

jcubic · Accepted Answer · 2013-06-11T09:01:22.877

1

you need to use the submit event in the form where the submit button is.

$(function() {
    var submit = false;
    $("#dialog-confirm").dialog({
      resizable: false,
      height:190,
      autoOpen: false,
      width: 330,
      modal: true,
      buttons: {
        "Yes": function() {
          $(this).dialog("close");
          submit = true;
        },
        No: function() {
          $(this).dialog("close");
        }
      }
    });

    $('form').submit(function() {
        if (!submit) {
            $("#dialog-confirm").dialog('open');
            return false;
        }
    });
});

edited Jun 11 '13 at 09:01

answered Jun 11 '13 at 06:22

jcubic

61,973
54
229
402

Did that but the text is displayed with the dialog box like this on the bottom of the page "Are you sure want to unshare?" And When I click on the button no popup is displayed. – pynovice Jun 11 '13 at 06:26
@user2032220 you can create dialog outside of event with `autoOpen: false` and use `dialog('open');` inside the event. – jcubic Jun 11 '13 at 06:31
Please update your answer and I will mark your answer best answer. Thank you – pynovice Jun 11 '13 at 06:35
I have button inside a div :

Does it matter? – pynovice Jun 11 '13 at 07:15
@user2032220 onclick event will not work on submit you need to use submit function on a form. or onsubmit attribute if you need to put a function inside html. – jcubic Jun 11 '13 at 07:21
Can I just put onclick=functioName() in the submit input form. I did that for a Javascript alert and it worked. – pynovice Jun 11 '13 at 07:22
@user2032220 but it will not prevent submiting of a form. but the alert will block the submit because everything stops when it's show up. Only `return false` (or `preventDefault`) in submit form will prevent submiting a form. – jcubic Jun 11 '13 at 07:25
Alright got it. Like you said, the Unshare button should display the dialog box and if the user presses Yes jquery should submit the form. If the user presses no, form should not be submitted. How can I do that? – pynovice Jun 11 '13 at 08:50
Your solution above, doesn't show the the line at last first and whenever I click on the unshare button the modal is not shown. – pynovice Jun 11 '13 at 08:56
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31572/discussion-between-jcubic-and-user2032220) – jcubic Jun 11 '13 at 09:01

Implement jQuery confirmation modal in a form submit?

2 Answers2

Linked