In this article I hope to show how to use a Jquery UI dialog prevent / cancel form submission. Based on a work requirement I wanted to stop the submission of a form, so I could validate the some checkboxes using JQuery, if they were all checked the okay button would be enabled and the form would be submitted. This Solution, always for an infinite amount of check boxes to be iterated through and only if all of them are checked will you be allowed to proceed, then it will submit the form as per original. You can check the entire Fiddle here

jquery ui dialog

<form id="objectdata" name="objectdata" action="newOrder.jsp" method="post">
    <div id="validateServicesContainer" title="Service Cancellation"  style="display: none">
        <tr>
            <td>
                The following Services will be suspended during upgrade.<br /> 
                Check service to confirm?
            </td>
        </tr><br /><br />
    <input class="sServices" id="chkBox1" type="checkbox"/>Service 1<br /> 
    <input class="sServices" id="chkBox2" type="checkbox"/>Service 2<br /> 
    <input class="sServices" id="chkBox3" type="checkbox"/>Service 3<br /> 
    <input class="sServices" id="chkBox4" type="checkbox"/>Service 4<br /> 
    <input class="sServices" id="chkBox5" type="checkbox"/>Service 5       
     </div>
     <input id="chkBox6" type="checkbox"/>Service 6<br /><br />
     <input type="submit" id="btnOpenDialog" value="Validate then submit" onclick="checkUpgradeSuspensions.call(this,event)"/>
</form>

There import requirement was that the code needed to make allocation for unlimited checkboxes and it’s does really in the “Id”

function checkUpgradeSuspensions(event){  
    $("#validateServicesContainer").dialog({
        resizable: false,
        modal: true,
        title: "Service Cancellation",
        width: 350,
    	closeOnEscape: true, 
        buttons: {
                "Ok": function () {
                $(this).dialog('close');                    
                callback(true);
            },
                "Cancel": function () {
                $(this).dialog('close');
                callback(false);
            }
        },
        open: function () {            
    	    event.preventDefault();
            $(this).parent().find('button:nth-child(1)').button('disable');
            $("input[type='checkbox'].sServices").change(function(){
                var a = $("input[type='checkbox'].sServices");
                (a.length == a.filter(":checked").length) ?
                    jQuery('.ui-dialog button:nth-child(1)').button('enable'):
                    jQuery('.ui-dialog button:nth-child(1)').button('disable');
            });        }
    });
}
 
function callback(value) {
    if (value)
        $('#objectdata').submit();
    return value();
}
 
$("form").submit(function (e) {
    event = e;
    alert('form submitted');
    //e.preventDefault();  // Put this in for stopping during testing
});

Lets look more closely at the code and what happening, specifically in the open: Function

	$(this).parent().find('button:nth-child(1)').button('disable');

This looks at the parent in this case the container for the button, JQuery Ui has a built in functions for dealing with these buttons. Here we disable the button when the Dialog is opened, so using the $(this).parent() will work.

	$("input:checkbox.sServices").change(function()

The next step is to trigger the event that will do the check, this is done by looking for checkboxes with the className sServices, if we didn’t do this then we would be tripped up by another checkbox on the parent form. Which may not be checked and then we would never get an enabled “Ok” button

	(a.length == a.filter(":checked").length) ?
		jQuery('.ui-dialog button:nth-child(1)').button('enable'):
		jQuery('.ui-dialog button:nth-child(1)').button('disable');

This step is a little less complex but it’s very important to note that the button is search for in a different way, as now we will not be opening the page so this would not fire if just using “$(this).parent().find(‘button:nth-child(1)’).button(‘disable’);” so to get around this we look for all instances on the form using “jQuery(‘.ui-dialog button:nth-child(1)’).button(‘enable’):”. Having only one dialog open should mean that only the one will fire.

Stopping events firing using JQuery.

	onclick="checkUpgradeSuspensions.call(this,event)"
	function checkUpgradeSuspensions(event){

Callbacks

No, this is not that irritating call by a Telemarketer, it’s the part that helps stop the further execution of a page. Let’s understand a little more about the call back and why we need it. The call back it there to wait for an event to come true, if the event / result is true then we will submit the form. In this case we are just mimicking the original form submission, but you could append values to the form here should you wish.

	function callback(value) {
	    if (value)
	        $('#objectdata').submit();
	    return value();
}

Our final dialog box is pretty functional.JQuery-UI dialogbox prevent form submission

Hope this helps out, if you still stuck contact me

Leave a Reply

You must be logged in to post a comment.