Stories Tagged ‘Dialog’

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>

Read Full Article