JavaScript就这么回事4：表单

转自javascript.com.cn(放在这里主要是方便我自己的学习,如果不允许的话,请通知我,我将自行删除)

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='#' 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=”#” 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='#' 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=”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方法把表单中的数据转换为编码，在提交表单之前完成了简单的表单数据加密～

原始的个站转移了