Home > Developer > JavaScript
First look at the following JSF pages:
<%...@ page language= "java" pageencoding= "UTF-8"%>
<%...@ taglib uri= "http://java.sun.com/jsf/html" prefix= "H"%>
<%...@ taglib uri= "Http://java.sun.com/jsf/core" prefix= "F"%>
<title>my JSF ' login.jsp ' starting page</title>
<script type= "Text/javascript" ....
function IsEmpty () ... {
var username = document.getElementById ("Formlogin:txtusername"). Value;
var password = document.getElementById ("Formlogin:txtpassword"). Value;
if (username = = "") ... {
Alert ("Give me the user name!") ");
document.getElementById ("Formlogin:txtusername"). focus ();
return false;
}
if (password = = "") ... {
Alert ("Do not lose the password you login to a shovel!" ");
document.getElementById ("Formlogin:txtpassword"). focus ();
return false;
}
}
</script>
<body>
<center>
<f:view>
<div id= "Input" >
styleclass= "FormText"/>
<br>
styleclass= "FormText"/>
</div>
<div id= "Submit" >
styleclass= "Formbutton"/>
styleclass= "Formbutton"/>
</div>
</f:view>
</center>
</body>
This page uses JavaScript to confirm that the username and password are empty at logon, the table Single-name is formlogin, two input components are named txtUserName and Txtpassword, and when the button is clicked, the JavaScript function is invoked IsEmpty () , display the dialog box or submit the form according to the condition.
Note that you cannot access a form component in a JavaScript function by using a similar syntax such as the following:
Document.formLogin.txtUsername.value;
Instead, you should use:
document.getElementById ("Formlogin:txtusername"). Value;
Or:
document.forms.formlogin["Formlogin:txtusername"].value;
This is because JSF interprets the above
<form id= "Formlogin" method= "post" action= "/project_blog/login.faces"
Enctype= "application/x-www-form-urlencoded" >
<div id= "Input" >
<label> User name:</label>
<input id= "Formlogin:txtusername" type= "text"
Name= "Formlogin:txtusername" class= "FormText"/>
<br>
<label> Password:</label>
<input id= "Formlogin:txtpassword" type= "password"
Name= "Formlogin:txtpassword" value= "" class= "FormText"/>
</div>
<div id= "Submit" >
<input type= "Submit" Name= "Formlogin:_id2" value= "submitted"
class= "Formbutton"/>
<input type= "button" Name= "FORMLOGIN:_ID3" value= "reset"
class= "Formbutton"/>
</div>
<input type= "hidden" name= "Formlogin" value= "Formlogin"/>
</form>
All form controls generated by JSF have names that conform to the Formname:componentname format, where the formName represents the name of the form of the control, while the componentname represents the component name. If you do not specify an id attribute, the JSF framework automatically creates an identifier, just like the button in the HTML fragment above. Therefore, to access the above user name segment, you must use the following methods:
document.getElementById ("Formlogin:txtusername"). Value;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
