Dojo ToolTipsDialog
In this example you will learn how to develop a dojo tooltipsdialog. You see the following code and follows the following code and crate a ToolTipsDialog.
If you click on the "Change Password" command button the you get a dialog box under this command button. Similarly, you get the whenever, you click on the the "Forgot Password" command button the you get a dialog box under this command button.
Try Online: ToolTipsDialog
Here is the code:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Show and hide Dialog example</title> <style type="text/css"> @import "../dijit/themes/soria/soria.css"; @import "/resources/dojo.css"; </style> <script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"></script> <script > dojo.require("dojo.parser"); dojo.require("dijit.form.Button"); dojo.require("dijit.Dialog"); dojo.require("dijit.form.TextBox"); dojo.addOnLoad(showDialog); dojo.addOnLoad(hideDialog); function showDialog() { dijit.byId('dialog1').show(); } </script> </head> <body class="soria"> <div dojoType="dijit.Dialog" id="dialog1" title="Login"> <form action="Login" method="post" validate="true" id="loginForm"> <table width="258"> <tr> <td><label>Login</label></td> <td><input type="text" trim="true" dojoType="dijit.form.TextBox" value="" name="login" id="userId"/></td> </tr> <tr > <td><label>Password</label></td> <td><input type="password" trim="true" dojoType="dijit.form.TextBox" value="" name="password" id="password"/></td> </tr> <tr> <td colspan="2" align="center"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="top" width="40%"> <!-- button ok --> <button dojoType="dijit.form.Button" type="submit" id="LoginButton" onClick="return validate();">User Login</button></td> <td align="left" valign="top" width="40%" > <!-- button cancel --> <button dojoType="dijit.form.Button" type="submit" onclick="document.Login.reset()" id="Cancel">Cancel</button></td> </td> </tr> </table> </td> </tr> </table> <table width="180" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div dojoType="dijit.form.DropDownButton"> <span>Change Password</span> <div dojoType="dijit.TooltipDialog" id="dialog12" title="First Dialog" execute="checkPw(arguments[0]);"> <table> <tr> <td><label for="name">Old Password: </label></td> <td><input dojoType="dijit.form.TextBox" type="password" name="oldpw" id="oldpw"></td> </tr> <tr> <td><label for="loc">New Password: </label></td> <td><input dojoType="dijit.form.TextBox" type="password" name="newpw" id="newpw"></td> </tr> <tr> <td><label for="desc">Confirm New Password: </label></td> <td><input dojoType="dijit.form.TextBox" type="password" name="confirmpw" id="confirmpw"></td> </tr> <tr> <td colspan="2" align="center"> <button dojoType=dijit.form.Button type="submit" onclick="changePassword();">Submit</button></td> </tr> </table> </div> </div> </td> <td> </td> <td> <div dojoType="dijit.form.DropDownButton"> <span>Forgot Password</span> <div dojoType="dijit.TooltipDialog" id="dialog11" title="First Dialog" execute="checkPw(arguments[0]);"> <table> <tr> <td><label>Enter UserId: </label></td> <td><input dojoType="dijit.form.TextBox" type="text" name="userId"></td> </tr> <tr><td>Or</td></tr> <tr> <td><label>Enter Email Address: </label></td> <td><input dojoType="dijit.form.TextBox" type="text" name="email"></td> </tr> <tr> <td colspan="2" align="center"> <button dojoType=dijit.form.Button type="submit"> Submit</button></td> </tr> </table> </div> </div> </td> </tr> </table> </form> </div> <script> function validate(){ userId = document.getElementById('userId').value password = document.getElementById('password').value errMsg=" "; if(userId == ""){ errMsg +="Please enter User Name\n"; } if(password == ""){ errMsg +="Please enter Password" ; } if(errMsg!= " "){ alert(errMsg); return false; } document.forms['loginForm'].submit(); } </script> <script> function validate1(){ userName = document.getElementById('userName').value email = document.getElementById('email').value errMsg=" "; if(userName == "" && email == ""){ errMsg +="Please enter userName Or email address\n"; } var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if (!(email == "")){ if(reg.test(email) == false) { errMsg+='Invalid Email Address'; } } if(errMsg!= " "){ alert(errMsg); return false; } document.forms['resetPasswordForm'].submit(); } </script> <script> function changePassword(){ newpw=document.getElementById('newpw').value confirmpw=document.getElementById('confirmpw').value if (newpw!=confirmpw){ alert('Please enter correct confirm password.'); } else{ alert('You can do any type of action'); } } </script> </body> </html>
Output:
Click on the Change Password Command button:
Click on the Forgot Password command button: