jquery form submit with confirmation in a modal

Question

I've used some code from another question asked years ago Implement jQuery confirmation modal in a form submit?

but that question didn't go far enough to show how a form could be submitted when responding with Yes and I haven't been able to get this to work.

You will see all the ways I've tried to make work (they are commented out). Does anybody know what I'm doing wrong here?

     <div id="dialog-confirm" title="Ready?">
         <p>Are you sure?</p>
     </div>

    <form action"" id="myform" name="myform2" type="post">
        <input type="submit" value="Yes" name="moveOn" />
    </form>

     <script>
      $(function() {
        $("#dialog-confirm").dialog({
         resizable: false,
         height:190,
         autoOpen: false,
         width: 330,
         modal: true,
         buttons: {
           "Yes": function() {
             //$('#myform')[0].submit();
             //document.myform2.submit();
             //document.getElementById("#myform").submit();

              },
        No: function() {
           $(this).dialog("close");
         }
     }

   });

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

       });

Here is working solution that is answered before: http://stackoverflow.com/questions/6457750/form-confirm-before-submit?noredirect=1&lq=1 — Meghdad Hadidi, Dec 05 '16 at 09:28

Christos Lytras · Accepted Answer · 2016-12-08T17:17:03.057

Try this one here. Instead of putting a submit button, make the button a normal button and handle its click event. Then you just submit the form if the user clicks Yes. You also have some syntax errors like this unneeded form action <form action"", remove the action at all, you're posting at the same form.

Your code slightly changed

<div id="dialog-confirm" title="Ready?">
    <p>Are you sure?</p>
</div>

<form id="myform" name="myform" method="post">
    <input type="hidden" name="moveOn" value="Yes" />
    <input type="button" id="moveOn" value="Yes" />
</form>

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

        $('#moveOn').on('click', function(e) {
            $("#dialog-confirm").dialog('open');
        });
    });
</script>

UPDATE

I have updated my code to use a hidden field to pass the moveOn post variable to PHP. The changes inside the form are:

<input type="hidden" name="moveOn" value="Yes" />
<input type="button" id="moveOn" value="Yes" />

UPDATE 2

It appears you have one more error that prevents the form from submitting the data. It's the form type="post" which of course is incorrect and to set the correct form method you need to use method="post":

<form id="myform" name="myform" method="post">
...
</form>

You can try my example here: http://zikro.gr/dbg/html/submit-confirm/

Here is a screen capture with my example working:

UPDATE 3

I suppose you already have a PHP code that handles the POST data at the beggining of the script, like this one here:

<?php 

if(isset($_POST['moveOn']) && $_POST['moveOn'] == 'Yes') {
    echo '<h3>The form was posted!</h3>';
}

?>

Take a look here.. https://usc.thrivezone.org/z.php I have this code if (isset($_REQUEST['moveOn']) && $_REQUEST['moveOn']=='Yes'){ echo "submitted"; } that should result in the word submitted being echo, but it's not..am I doing something wrong? — Allen, Dec 08 '16 at 01:44
@Allen Yes you have absolutely right! Please check my updated answer. — Christos Lytras, Dec 08 '16 at 06:44

score 2 · Answer 2 · edited May 23 '17 at 12:18

2

The problem you are experiencing is: when you click YES the submit handler is called again.

To solve this you may use the trigger event with extraParameters in order to distinguish if the submit is triggered from within the dialog or not.

Because the dialog is asynchronous you can use a deferred approach, an old answer I gave here.

The code and jsfiddle:

$(function () {
  $("#dialog-confirm").dialog({
    resizable: false,
    height:190,
    autoOpen: false,
    width: 330,
    modal: true,
    buttons: {
      "Yes": function() {
        //
        // Instead to submit the form trigger the
        // submit event with a parameter.....
        //
        $('#myform').trigger('submit', true);
      },
      No: function() {
        $(this).dialog("close");
      }
    }
  });

  $('#myform').submit(function(e) {
    //
    // Test if the submit event has been triggered from within the dialog
    //
    alert(arguments.length);
    if (!(arguments.length == 2 && arguments[1] === true)) {
      $("#dialog-confirm").dialog('open');
      return false;
    } else {
       // submitted
    }
  });


});

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div id="dialog-confirm" title="Ready?">
    <p>Are you sure?</p>
</div>

<form action="" id="myform" name="myform2" type="post">
<input type="submit" value="Yes" name="moveOn" />
</form>

edited May 23 '17 at 12:18

Community

1
1

answered Dec 04 '16 at 22:06

gaetanoM

41,594
6
42
61

seems like this should work..I added what you suggest but it still doesn't submit (even when I try to run the code snippet on this site) – Allen Dec 04 '16 at 22:13
yes, you can see it here (running on a cloud server) https://usc.thrivezone.org/z.php – Allen Dec 04 '16 at 22:21
it doesn't, at least for me. It should say "submitted" after it successfully submits. – Allen Dec 04 '16 at 22:24
ok..I put your exact code on my site usc.thrivezone.org/z.php and I'm still not getting it to submit (I took out the alerts you added). As for message after it submit, I just want it to submit and I'm using php to echo submitted if it actually submits. – Allen Dec 04 '16 at 22:35
Ok..when I use a plain on return confirm, like on this video, you can see I get a response of submitted. This is not what I'm getting using the other code. https://db.tt/k7wHUgPis – Allen Dec 05 '16 at 00:13
here is the correct link https://www.dropbox.com/s/sd49wwr2nrsxc8g/2016-12-04_16-10-55.mp4?dl=0 – Allen Dec 05 '16 at 01:07
@Allen the message you see after submitting is generated from the php server side: if the php runs as a post request a new message is added to the page. For more details see http://stackoverflow.com/questions/359047/detecting-request-type-in-php-get-post-put-or-delete – gaetanoM Dec 05 '16 at 14:54
right..I've had that code on my page for the last day or so. – Allen Dec 05 '16 at 17:01
@Allen I'm glad for you. – gaetanoM Dec 05 '16 at 17:03

piscator · Answer 3 · 2016-12-05T07:40:38.997

A straightforward solution would be to set a flag that checks if you already clicked "Yes":

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

  $('#myform').on('submit', function(e) {
    if(!postForm) {
      e.preventDefault();
      $("#dialog-confirm").dialog('open');
    } else {
      console.log('form submitting...')
    }
  });
});

See here for a working JSFiddle

Another solution would be to disable the submitting of the form (using e.preventDefault()) and to post the data of the form manually after clicking "Yes" using AJAX:

$(function() {
  $("#dialog-confirm").dialog({
    resizable: false,
    height:190,
    autoOpen: false,
    width: 330,
    modal: true,
    buttons: {
      "Yes": function() {
        $.ajax({
          type: "POST",
          url: $('#myform').attr('action'),
          data: $('#myform').serialize(),
          success: function(response) {
            console.log('form submitted');
          }
        });
      },
      "No": function() {
        $("#dialog-confirm").dialog("close");
      }
    }
  });

  $('#myform').on('submit', function(e) {
    e.preventDefault();
    $("#dialog-confirm").dialog('open');
  });
});

thanks..well, you can see the first solution here, which doesn't appear to submit https://usc.thrivezone.org/z.php I can't really use an ajax solution because of the way the site works. — Allen, Dec 04 '16 at 21:01

score 0 · Answer 4 · edited Dec 06 '18 at 06:37

0

$("#dialog-confirm").dialog({
  resizable: false,
  height: 190,
  autoOpen: false,
  width: 330,
  modal: true,
  buttons: [{
    text: "Yes",
    click: function() {
      console.log("ASD");
      $(this).dialog("close");

      $('#myform').attr("data-submit", "true").submit();
    }
  }, {
    text: "No",
    click: function() {
      $(this).dialog("close");
    }
  }]
});

$('#myform').on("submit", function() {
  var attr = jQuery(this).attr("data-submit");
  if (attr == "false") {
    $("#dialog-confirm").dialog('open');
    return false;
  }
});

<div id="dialog-confirm" title="Ready?">
  <p>Are you sure?</p>
</div>

<form action='www.google.com' id="myform" name="myform2" type="post" data-submit="false">
  <input type="submit" value="Yes" name="moveOn" />
</form>

This should be working.

Html:

<div id="dialog-confirm" title="Ready?">
<p>Are you sure?</p>
</div>

<form action='www.google.com' id="myform" name="myform2" type="post" data-submit="false">
<input type="submit" value="Yes" name="moveOn" />

JS:

$("#dialog-confirm").dialog({
  resizable: false,
  height: 190,
  autoOpen: false,
  width: 330,
  modal: true,
  buttons: [{
    text: "Yes",
    click: function() {
      console.log("ASD");
      $(this).dialog("close");

      $('#myform').attr("data-submit", "true").submit();
    }
  }, {
    text: "No",
    click: function() {
      $(this).dialog("close");
    }
  }]
});

$('#myform').on("submit", function() {
  var attr = jQuery(this).attr("data-submit");
  if (attr == "false") {
    $("#dialog-confirm").dialog('open');
    return false;
  }
});

And a working jsfiddl.

edited Dec 06 '18 at 06:37

Akber Iqbal

14,487
12
48
70

answered Dec 05 '16 at 06:52

Kalimah

11,217
11
43
80

Thanks....this is getting confusing...I see this works in jsfiddle, but if you go here (where I've copied your code), its not firing off the modal. https://usc.thrivezone.org/z.php Is there something I'm missing? – Allen Dec 05 '16 at 14:23
Can remove this line alert(attr);. Generally, if you want to debug JS code a better way is to use console.log("error title", "message", anyVar, anotherVar, .. ); – Kalimah Dec 05 '16 at 17:36
Also, now when using exactly your code here usc.thrivezone.org/z.php the modal opens and then submits before any clicks happen. – Allen Dec 05 '16 at 17:49
The code has an error at $('#myform')..on('submit', function(e). You need to place one "." So it should be $('#myform').on('submit', function(e) – Kalimah Dec 06 '16 at 01:26
thanks..fixed that...now if you try it again, it won't work since it immediately submits – Allen Dec 06 '16 at 01:31
You have another error: "elem.getClientRects is not a function". To fix it check this topic http://stackoverflow.com/questions/37914869/jquery-ui-error-f-getclientrects-is-not-a-function – Kalimah Dec 06 '16 at 08:38
I'm not getting this error..that reference looks like is for a different problem....how are you seeing this in my code (which is actually your code)? – Allen Dec 06 '16 at 16:07
It is a different problem. But for JS code to work the page should be JS error-free. I am seeing this error using firebug. You can use any browser developer tool and check the console section to see the error. – Kalimah Dec 07 '16 at 10:29
yes, I've been using firebug...here is a video of your exact code on my server and you'll see no errors and it submits immediately https://db.tt/pnXER8LyhK – Allen Dec 07 '16 at 14:42
Next to console word in console tab there is an arrow. Click on it and make sure that "Show JavaScript Error" option is enabled. Reload the page and try again. – Kalimah Dec 08 '16 at 11:20
see here https://db.tt/Ol0usBBLX5 all javascript errors enabled...and it submits immediately – Allen Dec 08 '16 at 15:43

jquery form submit with confirmation in a modal

4 Answers4

Linked