JavaScript就这么回事4：表单

luckfly

43 表单构成
  

form method=”post” action=”target.html” name=”thisForm”>
  

input type=”text” name=”myText”>
  

select name=”mySelect”>
  

option value=”1”>First Choiceoption>
  

option value=”2”>Second Choiceoption>
  

select>
  

br>
  

input type=”submit” value=”Submit Me”>
  

form>
44 访问表单中的文本框内容

form name=”myForm”>

input type=”text” name=”myText”>

form>

a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Fielda>
45 动态复制文本框内容

form name=”myForm”>

Enter some Text: input type=”text” name=”myText”>br>

Copy Text: input type=”text” name=”copyText”>

form>

a href=”#” onClick=”document.myForm.copyText.value =

document.myForm.myText.value;”>Copy Text Fielda>
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”>1option>

option value=”Second Choice”>2option>

option value=”Third Choice”>3option>

select>

form>

a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection Lista>
48 动态增加Select项
  

form name=”myForm”>
  

select name=”mySelect”>
  

option value=”First Choice”>1option>
  

option value=”Second Choice”>2option>
  

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”;

49 验证表单字段
  

script language=”JavaScript”>
  

function checkField(field) {
  

if (field.value == “”) {
  

window.alert(“You must enter a value in the field”);
  

field.focus();
  

}
  

}
  

  

Text Field:

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=”login.gif” value=”Login”>

form>

//注意：图像按钮在表单中的作用相当于提交按钮
53 表单数据的加密
  

SCRIPT LANGUAGE='JavaScript'>
  

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);

}

}

//-->

Enter Some Text:

上面的encryptForm方法把表单中的数据转换为编码，在提交表单之前完成了简单的表单数据加密～

本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/15511/showart_97518.html