javascript form

最新推荐文章于 2022-09-05 13:32:14 发布

呵呵后

最新推荐文章于 2022-09-05 13:32:14 发布

阅读量800

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/oHeHeHou/article/details/9325493

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

呵呵后

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript form

document对象：document对象在遇到HTML标签时自动定义document层次结构一些重要的方法：clear() 清空当前文档所有内容getElementById()返回指定id的对象的引用getElementsByName()返回具有指定name属性的对象集合forms数组：如上图所示，因为表单是html文档的一部分，所以form对象是docu
复制链接

扫一扫

专栏目录