JavaScript精简学习4（动态表单和链接处理）
JavaScript精简学习4：表单
43 表单构成
< form method =”post” action =”target.html” name =”thisForm” >
< input type =”text” name =”myText” >
< select name =”mySelect” >
< option value =”1” > First Choice </ option >
< option value =”2” > Second Choice </ option >
</ select >
< br >
< input type =”submit” value =”Submit Me” >
</ form >
44 访问表单中的文本框内容
< form name =”myForm” >
< input type =”text” name =”myText” >
</ form >
< a href ='http://HdhCmsTestwebjx测试数据/htmldata/2006-02-06/1139212451.html#' onClick ='window.alert(document.myForm.myText.value);' > Check Text Field </ a >
45 动态复制文本框内容
< form name =”myForm” >
Enter some Text: < input type =”text” name =”myText” >< br >
Copy Text: < input type =”text” name =”copyText” >
</ form >
< a href =http://HdhCmsTestwebjx测试数据/htmldata/2006-02-06/”#” onClick =”document.myForm.copyText.value =
document.myForm.myText.value;” > Copy Text Field </ a >
46 侦测文本框的变化
< form name =”myForm” >
Enter some Text: < input type =”text” name =”myText” onChange =”alert(this.value);” >
</ form >
47 访问选中的Select
< form name =”myForm” >
< select name =”mySelect” >
< option value =”First Choice” > 1 </ option >
< option value =”Second Choice” > 2 </ option >
< option value =”Third Choice” > 3 </ option >
</ select >
</ form >
< a href ='http://HdhCmsTestwebjx测试数据/htmldata/2006-02-06/1139212451.html#' onClick ='alert(document.myForm.mySelect.value);' > Check Selection List </ a >
48 动态增加Select项
< form name =”myForm” >
< select name =”mySelect” >
< option value =”First Choice” > 1 </ option >
< option value =”Second Choice” > 2 </ option >
</ select >
</ form >
< script language =”JavaScript” >
document.myForm.mySelect.length ++ ;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1 ].text = “ 3 ”;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1 ].value = “Third Choice”;
</ script >
49 验证表单字段
< script language =”JavaScript” >
function checkField(field) {
if (field.value == “”) {
window.alert(“You must enter a value in the field”);
field.focus();
}
}
</ script >
< form name =”myForm” action =”target.html” >
Text Field: < input type =”text” name =”myField”onBlur=”checkField(this)” >
< br >< input type =”submit” >
</ form >
50 验证Select项
function checkList(selection) {
if (selection.length == 0) {
window.alert(“You must make a selection from the list.”);
return false;
}
return true;
}
51 动态改变表单的action
< form name =”myForm” action =”login.html” >
Username: < input type =”text” name =”username” >< br >
Password: < input type =”password” name =”password” >< br >
< input type =”button” value =”Login” onClick =”this.form.submit();” >
< input type =”button” value =”Register” onClick =”this.form.action = ‘register.html’; this.form.submit();” >
< input type =”button” value =”Retrieve Password” onClick =”this.form.action = ‘password.html’; this.form.submit();” >
</ form >
52 使用图像按钮
< form name =”myForm” action =”login.html” >
Username: < input type =”text” name =”username” >< br >
Password: < input type =”password”name=”password” >< br >
< input type =”image” src =http://HdhCmsTestwebjx测试数据/htmldata/2006-02-06/”login.gif” value =”Login” >
</ form >
53 表单数据的加密
< SCRIPT LANGUAGE ='JavaScript' >
<!--
function encrypt(item) {
var newItem = '' ;
for (i = 0 ; i < item.length; i ++ ) {
newItem += item.charCodeAt(i) + ' . ' ;
}
return newItem;
}
function encryptForm(myForm) {
for (i = 0 ; i < myForm.elements.length; i ++ ) {
myForm.elements.value = encrypt(myForm.elements.value);
}
}
// -->
</ SCRIPT >
< form name ='myForm' onSubmit ='encryptForm(this); window.alert(this.myField.value);' >
Enter Some Text: < input type =text name =myField >< input type =submit >
</ form >
上面的encryptForm方法把表单中的数据转换为编码，在提交表单之前完成了简单的表单数据加密～
查看更多关于JavaScript精简学习4（动态表单和链接处理）的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did48428