通过getElementById来取得Form里的表单元素

<1>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>湖南易通</title>

    <script src="jquery-1.10.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        function btnClick1() {
            textbox1.value = "黄雪辉";
        }

        function btnClick2() {
            //textbox2.value = "雪辉"; //当点击对应的“点一下”按钮的时候浏览器抛出错误“textbox2”未定义:这是因为textbox2是放置到form框架中的,所以如果直接取值的话是取不到的。所以要用以下方法来取:
            form1.textbox2.value = "雪辉"; //在前面加上form框架的id,一级一级的来调用。
        }

        //在做网页开发的时候一般都是需要用到form框架的,表单元素也一般会放置到form中,每次取表单元素还需要判断它是否在form里面,所以我们通过好的方式来取得表单元素,getElementById("");通过getElementById就能在整个页面中通过id直接取到表单元素,而不需要判断表单元素是否在form中。

        function btnClick3() {
            var name = document.getElementById("textbox1"); //取得textbox1这个元素
            name.value = "斌"; //给textbox1元素的value设为"斌"

            var name2 = document.getElementById("textbox2"); //取得textbox2这个元素
            name2.value = "黄雪辉";
        }
    </script>
</head>
<body>
<!--------------------直接放在body下的表单------------------>

<input type="text" id="textbox1"/> <input type="button" value="点一下" onclick="btnClick1()"/>

<!--------------------放在form框架中的表单------------------>
<form action="HTMLPage1.htm" method="get" id="form1">

<input type="text" id="textbox2"/> <input type="button" value="点一下" onclick="btnClick2()"/>

<input type="button" value="用getElementById来取元素" onclick="btnClick3()"/>

</form>
<!---------------------------------------------------------->
</body>
</html>

通过getElementById来取得Form里的表单元素

时间: 2024-10-13 12:24:01

通过getElementById来取得Form里的表单元素的相关文章

form表单元素中disabled的元素的值不会提交到服务器

1.表单元素中disabled的元素的值不会提交到服务器,后台获取的值为null <form id="myForm" action="#" method="post"> <input name="username" disabled="disabled" /> <input type="submit" value="提交"/> &l

jQuery操作Form表单元素

Web开发中常常须要操作表单,form表单元素有select.checkbox.radio.textarea.button.file.text.hidden.password等. 当中checkbox和radio的读写值操作比較多变,checkbox和radio常常常使用在一个分组里.实现多选或者单选. jQuery提供了利用表单选择器我们能够极其方便地获取表单的某个或某类型的元素. 选择器 返回 演示样例 :input 集合元素 $(":input")选取全部,,和元素. :text

element-ui 解决 table 里包含表单验证的问题!

实际项目中的场景,需要在table里做表单的验证,如图效果: 其实问题关键就在于如何给el-form-item动态绑定prop :prop="'tableData.' + scope.$index + '.字段名'" 详见代码: <template> <div v-bgb-block> <div style="margin-top:10px;"> <el-form :rules="model.rules"

$(&#39;#itemAddForm&#39;).form(&#39;reset&#39;);重置表单是报错?

$('#itemAddForm').form('reset');重置表单是报错Uncaught TypeError: $(...).reset is not a function 以为是方法错误于是就换了$('#itemAddForm').reset()和$('#itemAddForm').resetForm()依然报错. 后来把重置按钮的type属性换成了submit就OK了,<input type="sbumit" onclick="clearForm()"

form表单 无法提交js动态添加的表单元素问题。。

第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url  "> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </form> &l

jquery.form.js 让表单提交更优雅

jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="/src/jquery.form.js"></script> 2.使用 $(function () { va

HTML5 学习笔记(二)——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由

HTML5 学习总结(二)——HTML5新增属性与表单元素

一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1" style="height:900px; backgrou

使用 Zend_Form_Element 生成表单元素 --(手册)

表单由元素组成,它一般对应于 HTML 表单输入.Zend_Form_Element 封装了单个表单元素,并完成下列工作: 校验(提交的数据有效乎?) 抓取校验错误代码和消息 过滤(在校验和/或输出之前元素如何转义或规范化?) 解析(元素如何显示?) 元数据和属性(什么信息进一步修饰元素?) 基础类 Zend_Form_Element 对许多类有合理的缺省设置,但最好还是继承这个类来完成特殊意图的元素.另外,Zend Framework 带有许多标准的 XHTML 元素. 1.  插件加载器 Z