JavaScript 表单提交方式

最新推荐文章于 2023-06-14 06:50:31 发布

原创最新推荐文章于 2023-06-14 06:50:31 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #表单

JavaScript 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了如何使用JavaScript操作HTML表单元素，包括设置表单的action属性并提交表单，以及通过不同方法获取表单对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>

  <body>
       <form  name="form1"  action="test.html" method="post">
          <input type="text" name="username" value="zhang" />
          <input type="button" name="ok" value="保存1"/>
       </form>

       <form name="form2" action="test1.html" method="post">
          <input type="text" name="username" value="zhang2" />
          <input type="button" name="ok2" value="保存2"/>
       </form> 
  </body>  
  <script language="JavaScript">
    //使用两种方式输出表单的action值 (使用表单的名称,使用表单数组forms)
    //方法一：document.表单名
    var form1 = document.form1;
    //alert(form1.action);


    //使用两种方式输出表单的method的值(使用表单数组forms,使用表单数组forms)
    //方法二：document.forms[索引值](表单对象)
    var form2 = document.forms[1];
    alert(form2.action);
  </script> 

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>form.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
       <form name="form1" action="" method="post">
          患者姓名:<input type="text" name="username" value="zhang" />
          <input type="button" name="ok" value="打印患者信息" onclick="printPerson()" />
          <input type="button" name="ok" value="查询患者信息" onclick="selectPerson()" />
       </form>
  </body>

  <script language="JavaScript">
    //通过javaScript函数的方式访问printPerson.html和selectPerson.html
    function printPerson(){
        //1. 获取表单
        var form1 = document.form1;
        //2. 设置表单的action属性
        form1.action = "printPerson.html";
        //3. 提交表单
        form1.submit();
    }

    function selectPerson(){
        var form1 = document.forms[0];
        form1.action = "selectPerson.html";
        form1.submit();
    }

  </script>

</html>