The demo shows how to setup a dialog submission with a confirm step using the YUI framework.

You may want to start by clicking the show demo button above so you can see what we're accomplishing, then you can follow along with the commentary as we show the code.

We have a sample form which accepts some fields and has save, delete and cancel buttons. The form itself "blocks" submission by normal means -- that is, there is no submit button and the <form> tag contains code to block any browser's "standard" or "default" submissions (such as when the enter key is pressed). The following code blocks the "normal" submission(s):

<form onsubmit="return(false);" ...                            

The complete <form> in our example is shown below. Note that the <form> is missing the action and post attributes in the demo. To actually make a real submission, we would need these attributes.

<form onsubmit="return(false);" name="frmSample">
    <table>
        <tr><td class="FORMLABEL">First Name:</td><td class="FORMFIELD"><input type="text" name="firstname" value="" class="FORMINPUT"></td></tr>
        <tr><td class="FORMLABEL">Last Name:</td><td class="FORMFIELD"><input type="text" name="lastname" value="" class="FORMINPUT"></td></tr>
        <tr><td class="FORMLABEL">Address:</td><td class="FORMFIELD"><input type="text" name="addr1" value="" class="FORMINPUT"></td></tr>
        <tr><td class="FORMLABEL">Address (cont'd):</td><td class="FORMFIELD"><input type="text" name="addr2" value="" class="FORMINPUT"></td></tr>
        <tr><td class="FORMLABEL">City:</td><td class="FORMFIELD"><input type="text" name="city" value="" class="FORMINPUT"></td></tr>
        <tr><td class="FORMLABEL">State/Provence:</td><td class="FORMFIELD"><input type="text" name="st" value="" class="FORMINPUT"></td></tr>
        <tr><td class="FORMLABEL">ZIP/Postal Code:</td><td class="FORMFIELD"><input type="text" name="zip" value="" class="FORMINPUT"></td></tr>
        <tr><td class="FORMLABEL">Country:</td><td class="FORMFIELD"><input type="text" name="cc" value="" class="FORMINPUT"></td></tr>
        <tr><td class="FORMLABEL">Phone:</td><td class="FORMFIELD"><input type="text" name="phone" value="" class="FORMINPUTM"> ext-<input type="text" name="ext" value="" class="FORMINPUTM2"></td></tr>
        <tr><td class="FORMLABEL">Email:</td><td class="FORMFIELD"><input type="text" name="email" value="" class="FORMINPUT"></td></tr>
        </table>
    <hr>
    <button id="cmdSave" class="ACTIONBUTTON"><img src="<?=/images/?>t_chk.gif"> Save</button>
    &nbsp;&nbsp;&nbsp;
    <button id="cmdDelete" class="ACTIONBUTTON"><img src="<?=/images/?>t_del.gif"> Delete</button>
    &nbsp;&nbsp;&nbsp;
    <button id="cmdCancel" class="ACTIONBUTTON"><img src="<?=/images/?>no.gif"> Cancel</button>
    <input type="hidden" name="action" value="">
    <input type="hidden" name="somethingelse" value="">
</form>
                            

So we need to handle the subission ourselves. We want to be to determine which button was pressed for any actions going to the server. We'll hook the three buttons with the following code:

YAHOO.util.Event.addListener("cmdSave", "click", function(){YConfirm('Are you sure you want to save this record?',function(){sendForm(document.frmSample,'save');});});
YAHOO.util.Event.addListener("cmdDelete", "click", function(){YConfirm('Are you sure you want to delete this record?',function(){sendForm(document.frmSample,'delete');});});
YAHOO.util.Event.addListener("cmdCancel", "click", function(){frmDemo.hide();});                            

We're simply asking YUI to call a function when each of the buttons is clicked. In this case, we're declaring the function inline, but this could also be a function name (without the () after the name) to reference a function declared elsewhere on the page. In the first two cases, save and delete, we are simply going to ask the user if they are sure, and if so, we're going to send the form data and the "action" the user is performing. YConfirm() is just a helper function that presents a nicer alert()-type confirmation message. It's second parameter is the function to call (or execute) if the user selects "yes". The YConfirm() function is in the global helper function script module included by the page (yuihelp.js). Again, we declare anonymous functions inline.

In either case, if the user selects "yes", the sendForm() function is called. To make this function as generic as possible, we are passing in the actual form we want sent plus a special action flag that will tell the server what function we want performed (ie, what button was clicked.) If you have PHP on your server, for example, you would tell which button was hit by looking at the variable $_GET["action"] (if your <form> tag has method="GET" attribute) or $_POST["action"] (if <form> is method="POST"). Other server-side scripting languages have similar means to access form submission variables. In a real-life scenario, you would also probably have the record id in a hidden field so you knew which record was being acted upon.

This demo does not actually submit the form. However, submitting the form is very easy. The <form> tag would need an action and method attribute to determine where and how to transmit the data, and we would set some hidden variables to include our "action" flag (and any additional data we wanted to send.) A "functional" sendForm() function might look like this:

function sendForm (frm, action) {
    frm.action.value = action;
    frm.somethingelse.value = 'YUI is awesome!';
    frm.submit();
}                            

That's it! We now have a dialog we can popup and submit under our control.