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:
Try Online: 