javascript下一种表单元素获取方法存在的问题

一. 测试环境
浏览器: IE6+, FF 3.5.5, Opera 10, Chrome 4.0.249, Safari 4.0.3

二. 例子


代码如下:

<form name="test-form" action="" method="">
<input type="checkbox" name="kk">
<form>
<script type="text/javascript">
var oForm = document.forms['test-form'],
eles = oForm.elements['kk'];
alert(eles.length); // undefined
alert(eles.nodeType); // 1
</script>

三. 解决方法(我想到的方法是改变获取方式, 基于YUI)


代码如下:

<script type="text/javascript">
var oForm = document.forms['test-form'],
eles = YAHOO.util.Dom.getElementsBy(function(el) {
return el.type === 'checkbox' && el.name === 'kk';
}, 'input', oForm);
alert(eles.length); // 1
</script>

document.formname.inputname

这个问题我之前已经遇到过一次了，但是这次又忘记了，依然又犯错了，所以我必须要记录一下。

看一下这个例子：


代码如下:

<form name="hehe">
<input type="checkbox" name="haha" />
</form>
<form name="hehe2">
<input type="checkbox" name="haha" />
<input type="checkbox" name="haha" />
</form>
<script type="text/javascript">
document.write(document.hehe.haha.length);
document.write('<br />');
document.write(document.hehe2.haha.length);
</script>

演示

无标题文档

document.write(document.hehe.haha.length);
document.write('
');
document.write(document.hehe2.haha.length);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在获取表单的input时，我一般都习惯这么做，但是这样做往往就出现问题了，因为很多时候我会去对比已选的checkbox和所有的 checkbox数量是否相等，但是只有一个的时候就会出错，因为它返回的就是checkbox本身，并没有length这个属性，所以我们需要先判断所取到的input是否有length属性以便进一步操作。

另外记录下location.reload()，它还有一个可选参数，true或者false，如果省略或者设置为false，它就会用HTTP头 If-Modified-Since来检测服务器上的文档是否已改变。如果文档已改变，reload()会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果设置为true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。就是传说中的强制刷新。

赞 (0)

相关推荐

  • js 判断一个元素是否在页面中存在

    1. 判断表单元素是否存在(一) 复制代码 代码如下: Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->if("periodPerMonth" in document.theForm) { return true; } else{ return false; } 2. 判断页面元素是否存在 复制代码 代码如下: if(document

  • jQuery检查元素存在性(推荐)

    javascript检查元素存在性:即使这个元素被删除了,也不担心javascript代码报错: jquery检查元素存在性: 代码如下: if(!document.getElementById("preview")) return false; jquery $("#preview")获取的永远是对象,即使网页上没有此元素. 不能使用以下代码: if($("#preview"){ //do something } 因此要用jquery检查某个元

  • javascript下判断一个元素是否存在的代码

    1. 判断表单元素是否存在(一) 复制代码 代码如下: if("periodPerMonth" in document.theForm) { return true; } else{ return false; } 2. 判断页面元素是否存在 复制代码 代码如下: if(document.getElementById("XXX")) { //存在 } 3. 判断表单元素是否存在(二) 复制代码 代码如下: if(document.theForm.periodPerM

  • javascript下一种表单元素获取方法存在的问题

    一. 测试环境 浏览器: IE6+, FF 3.5.5, Opera 10, Chrome 4.0.249, Safari 4.0.3 二. 例子 复制代码 代码如下: <form name="test-form" action="" method=""> <input type="checkbox" name="kk"> <form> <script type=&

  • JavaScript实现动态添加Form表单元素的方法示例

    本文实例讲述了JavaScript实现动态添加Form表单元素的方法.分享给大家供大家参考,具体如下: 之前写过类似的文章(如:javascript实现的动态添加表单元素input,button等),现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有: document.getElementById(); objNode.parentNode; objNode.cloneNode(); objNo

  • Smarty简单生成表单元素的方法示例

    本文实例讲述了Smarty简单生成表单元素的方法.分享给大家供大家参考,具体如下: smarty生成表单元素功能实现的原理是:给smarty一个数组,用于生成和显示菜单或选项,另外在传递一个选项的值,用于默认选择的匹配: 示例如下: php文件:index.php <?php include("smarty_inc.php"); $smarty->assign('cust_ids',array(1000,1001,1002,1003)); $smarty->assig

  • jQuery获取和设置表单元素的方法

    jQuery提供了val()方法,使用它我们可以快速地获取和设置表单的文本框.单选按钮.以及单选按钮的值.使用val()不带参数,表示获取元素的值使用val()给定参数,则表示把值赋给元素 如下: 复制代码 代码如下: //获取值alert($("input#mytextbox").val());alert($("select#mylist").val());alert($("input#myradio").val()); //设置值$(&quo

  • Vue.js 中的 v-model 指令及绑定表单元素的方法

    Vue.js 中的 v-model 指令及绑定表单元素的方法

    我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定. 1 基础用法 1.1 文本输入框(text) 这里演示了在文本输入框上输入的内容,会实时映射到绑定的数据上. html: <div id="app"> <input type="text" v-model="content" placeholder="请输入"> <p>输入框:{{content}}</p

  • JavaScript实现表单元素的操作

    JavaScript实现表单元素的操作

    一.forms[]; Form 表单对象 document.forms[] 是一个数组,包含了文档中所有的表单(<form>).要引用单个表单,可以用 document.forms[x],但是一般来说,人们都会这样做:在<form>标记中加上“name="..."”属性,那么直接用 “document.<表单名>”就可以引用了. 1.属性 name 返回表单的名称,也就是<form name="...">属性. act

  • jquery中通过过滤器获取表单元素的实现代码

    jquery中通过过滤器获取表单元素的实现代码

    :enable 获取可输入状态的元素 :disabled 获取不可输入状态的元素 :checked 获取选中的表单元素 :seleced 获取下拉框中选中的元素 下面看一粒例子 Html 复制代码 代码如下: <body> <form id="form1" runat="server"> <div> <ul> <li><label>订单号码:</label><input typ

  • 表单元素值获取方式js及java方式的简单实例

    大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于checkbox或者radio或者select我们如何用javascript获取和在服务器中获取提交过来的参数呢? 多说无用.上代码: Jsp-html代码:  <form action="input.do" name="formkk"> <table>

  • JavaScript获取按钮所在form表单id的方法

    本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button id="button1" type=&q

  • jquery获取元素值的方法(常见的表单元素)

    jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $('input[name=items][checked]').val(); 获取select被选中项的文本 var item = $("select[name=items] option[selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id

随机推荐