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;
       });

       });

Answer 1

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>';
}

?>

Answer 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>