How to make a modal confirmation dialog before submitting a form?

Hi all, I am a beginner in web/javascript programming and wonder if anyone can give me a kick start simple example of a modal confirm dialog just before a form with multiple submit buttons being submitted using a pre-defined button? I stumbled upon jQuery and SimpleModal and wonder if it would fit my ASP MVC project.

I ended up in the following non-working codes, I think my 1st problem is do not know how to return a value from the dialog?:

<script type="text/javascript">
    $(document).ready(function() {
    $("form").submit(function(ev) {
            return confirm("Confirm?");
        });
    });

    function confirm(message) {
        $("#confirm").modal({
            close: true,
            overlayId: "confirmModalOverlay",
            containerId: "confirmModalContainer",
            onShow: function modalShow(dialog) {
                dialog.overlay.fadeIn("slow", function() {
                    dialog.container.fadeIn("fast", function() {
                        dialog.data.hide().slideDown("slow");
                    });
                });

                dialog.data.find(".confirmMessage").append(message);
                dialog.data.find(".btnYes").click(function() {
                    $.modal.close();                                       
                });
            }
        })
    }        
</script>


<div id="confirm" style="display:none">
    <a href="#" title="Close" class="modalCloseX simplemodal-close">x</a>
    <div class="confirmHeader"><span>Confirm</span></div>
    <p class="confirmMessage"></p>
    <div class="buttons">
     <div class="btnYes">Yes</div><div class="btnNo simplemodal-close">No</div>
    </div>
</div>

It would be nice if anyone direct me to somewhere online for a crash course of web programming :)

From stackoverflow William

• You don't need to use jquery for a simple modal confirm dialog when submitting a form. The browser provides a few modal system looking dialogs. One being "confirm".

  This simple javascript would do:

  <form method="post" action="myurl.aspx" onsubmit="return confirm('Submit this form?')">
  ...
  </form>
  

  For a crash course you could check out W3Schools or just search google for tutorials.

  From Matthew Lock

• Personally, I didn't bother doing it that way.

  Boxy is a jQuery plugin that has a confirm box control already.

  The example for it is as follows:

  $('#confirm-actuator').click(function() {
      Boxy.confirm("Please confirm:", function() { alert('Confirmed!'); }, {title: 'Message'});
      return false;
  });
  

  If you take a look at the Boxy site itself, it'll also show you how to retrieve the value submitted etc.

  EDIT: Implementation for you would be....

   $(document).ready(function() {
      $("form").submit(function(ev) {
          $('#mySubmitBtn').click(function() {
              Boxy.confirm("Are you sure?", function() { /**DO ACTION FOR CONFIRM**/ }, {title: 'Confirm'});
              return false;
          });
      });
  
  });
  

  And then place an ID on the submit button of mySubmitBtn.

  I've not tested that code off hand but that should hopefully do the trick.

  Hope this helps.

  Though according to the developer this method is not intended to replace the native window.confirm() function provided by browsers as it does not have the capability to block program execution while the dialog is visible.

  However, I don't think that would effect your form submit, so you should be all good to use this method.

  William : Thank you very much for your help. I have tried Boxy and learned a bit more on all those javascript stuff. However I cannot get it working too well and I ended up in using another jQuery plugin (the field plugin for reading/setting hidden fields) and the builtin confirm dialog for my current project.

  Liam : What do you mean by you can't get it to work too well? I had a few problems when I first tried using it, but I'm happy to help if I can. Don't forget to vote up and mark as answer if it's helped by the way. Though I'm new here myself so I'm not sure if everyone does that or not.
  From Liam

• Here's a breakdown of 3 different ways to accomplish this:

  Modal Confirmation Dialog on Form Submit

  From Jen

• I'm looking for a good simple solution, too.

  In our case, we're actually trying to replace javascript's "confirm" - apparently the default alert box looks too much like an error so we want to be able to customize it to look more friendly.

  From Sus