Assume that you want to allow your users to create a new account, if they enter information into all fields. In this blog post, we will use the jqxButton and jqxWindow widgets. In order to use the Button and Window, we need to include the jqxbuttons.js, jqxwindow.js and the jQWidgets Framework(jqxcore.js). We will use the ‘Shiny Black’ visual style and we add the jqx.base.css and jqx.shinyblack.css CSS stylesheets.
The HTML structure for the Window widget is shown below:
<div id="popupWindow"> <div>Register a new account</div> <div> <table> <tr> <td align="right">First Name:</td> <td align="left"><input id="firstName" /></td> </tr> <tr> <td align="right">Last Name:</td> <td align="left"><input id="lastName" /></td> </tr> <tr> <td align="right">E-Mail:</td> <td align="left"><input id="email" /></td> </tr> <tr> <td align="right"></td> <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Register" value="Register" /><input id="Cancel" type="button" value="Cancel" /></td> </tr> </table> </div></div>
In the above html, we added three Input elements for entering the ‘First Name’, ‘Last Name’ and ‘E-mail’ fields and also 2 buttons. The ‘Cancel’ button will cancel the new account registration and the ‘Register’ button will confirm that there’s entered data. We want to dynamically ‘Enable’ or ‘Disable’ the ‘Register’ button based on the user’s input.
To create the Window and Button widgets, we call the jqxButton constructor twice for the 2 buttons and also the jqxWindow constructor for the window’s initialization.
$("#Cancel").jqxButton({theme: 'shinyblack'});$("#Register").jqxButton({ disabled: true, theme: 'shinyblack' });$("#popupWindow").jqxWindow({ width: 260, resizable: false, okButton: $('#Register'), cancelButton: $('#Cancel'), theme: 'shinyblack' });
The final step is to implement the logic that changes the ‘disabled’ property of the ‘Register’ button. To achieve that, we bind to the ‘change’ and ‘keyup’ events of the input fields and call a validate function. The validate function checks whether there’s data in the input fields and based on the result, enables or disables the button.
var validate = function () { var isValid = $("#firstName").val().length > 0 && $("#lastName").val().length > 0 && $("#email").val().length > 0; if (isValid) { $("#Register").jqxButton({ disabled: false}); } else { $("#Register").jqxButton({ disabled: true }); }}$("#firstName, #lastName, #email").bind('change keyup', function () { validate();});
Here’s the full source code:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.shinyblack.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script> <script type="text/javascript"> $(document).ready(function () { var validate = function () { var isValid = $("#firstName").val().length > 0 && $("#lastName").val().length > 0 && $("#email").val().length > 0; if (isValid) { $("#Register").jqxButton({ disabled: false}); } else { $("#Register").jqxButton({ disabled: true }); } } $("#firstName, #lastName, #email").bind('change keyup', function () { validate(); }); $("#Cancel").jqxButton({theme: 'shinyblack'}); $("#Register").jqxButton({ disabled: true, theme: 'shinyblack' }); $("#popupWindow").jqxWindow({ width: 260, resizable: false, okButton: $('#Register'), cancelButton: $('#Cancel'), theme: 'shinyblack' }); }); </script></head><body class='default'> <div id="popupWindow"> <div>Sign Up</div> <div> <table> <tr> <td align="right">First Name:</td> <td align="left"><input id="firstName" /></td> </tr> <tr> <td align="right">Last Name:</td> <td align="left"><input id="lastName" /></td> </tr> <tr> <td align="right">E-Mail:</td> <td align="left"><input id="email" /></td> </tr> <tr> <td align="right"></td> <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Register" value="Register" /><input id="Cancel" type="button" value="Cancel" /></td> </tr> </table> </div> </div></body></html>