javascript form

来源：互联网发布：科学计算可视化算法编辑：程序博客网时间：2024/06/14 22:07

document对象：document对象在遇到HTML<body>标签时自动定义

document层次结构

一些重要的方法：

clear() 清空当前文档所有内容

getElementById()返回指定id的对象的引用

getElementsByName()返回具有指定name属性的对象集合

forms数组：如上图所示，因为表单是html文档的一部分，所以form对象是document对象的一个属性。如果文档中有多个form对象，它们组成forms[]数组

elements数组：表单中的button，radio等控件是一个element，它们组成elements[]数组

<form name="form1">  <input type="text" name="yourname1" />  <input type="button" name="button1" /></form><form name="form2">  <input type="text" name="yourname2" />  <input type="button" name="button2" /></form>

它们的对象层次如下

访问form下的name="yourname1"的文本框有3种方法

1.document.forms[0].elements[0]

2.document.forms["form1"].elements["yourname1"]

3.document.forms.form1.yourname1

提交表单前进行操作的几种方式：

1.监听提交按钮的点击事件

<form name="form1">  <input type="text" name="yourname1" onClick="readySubmit();"/></form>……     <script type="text/javascript">       function readySubmit() {          if (confirm("ready to submit?") {              return true;          } else {              return false;          }        }    </script>

2.onSubmit事件处理函数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>  <meta http-equiv="content-type" content="text/html; charset=windows-1250">  <meta name="generator" content="PSPad editor, www.pspad.com">  <title>  </title>     <script type="text/javascript">       function checkForm(forminfo) {          if (forminfo.namestring.value == "" ||            forminfo.names9tring.value == null          ) {           alert("不能为空");           return false          }          else {           return true;          }       }   </script>  </head>  <body>      <form name="info"        action=""        method="post"        onSubmit="checkForm(this);"      >      <big><p>      Type your name here:      <input type="text" name="namestring" size="50">      </p>      <input type="submit" value="Submit" />      <input type="reset" value="Clear" />      </form>  </body></html>

3.使用form对象自己的submit()方法，这个方法并不会触发onSubmit函数

<form name="form1">  <input type="text" name="yourname1" onClick="JavaScript:form1.submit();"/></form>