今天突然碰到form表单的名字与js方法的名字相同导致找不到js方法的问题,根据网上的一些资料和自己的理解,总结出一定原因,个人理解有错误请指正~~~
代码:
<form name="test" id="test" >
<a href="#" onclick="test()" name="test">aa</a>
</form>
<script type="text/javascript">
function test(){
alert("ssss");
}
</script>
这样就提示找不到test方法。
这个form是一个HTML DOM对象有莫大的关系,根据事件的触发对象的作用域链往上找名为test的对象,因为javascript中方法其实也为对象,在沿着对象的作用域链往上找时,他首先回找到名字为test的HTML DOM对象form,而不会找到window.test这个对象,而找到的这个test不是一个方法,所以会提示找不到方法。这跟以下代码情况是一样的
<form name="aaa" id="test" >
<input type="button" onclick="test()" name="test">aa</a>
</form>
<script type="text/javascript">
function test(){
alert("ssss");
}
</script>
因为button也是一个HTML DOM对象,所以首先找到的是button这个对象,所以也提示找不到方法。
改成外部绑定事件就不会出现这种情况,因为这时这时aa的环境就在window对象中,回直接找到test方法,看代码:
<form name="aaa" id="test" >
<input type="button" onclick="test()" name="test">click me</a>
</form>
<script type="text/javascript">
var aa = document.getElementById("sss");
aa.onclick = test;
function test(){
alert("ssss");
}
</script>
总结:
用元素的onclick事件时,文档中不能出现与方法名一样的HTML DOM对象,因为根据作用域链他最后才会找到window对象的方法,所以都会显示找不到方法。
分享到:
相关推荐
然而,当这些复选框具有相同的`name`属性时,提交表单时可能会出现一些特定的问题。这篇博客将探讨这个问题,并提供解决方案。 **一、表单提交与checkbox** 在HTML表单中,`<input type="checkbox">`用于创建复选...
通过jQuery提供的val()方法和attr()方法,我们可以轻松获取或设置input元素的值。 首先,要获取表单中input元素的值,最常用的方法是使用jQuery的val()方法。当使用 $("#id") 选择器选中了一个元素后,可以使用 ....
总结一下,要从name值一样的form表单中取值并拼接,主要步骤包括:获取同名的input元素集合,遍历并获取每个元素的值,使用`join()`方法拼接成字符串,然后根据需要处理这个字符串。在提供的"【压缩包子文件的文件...
先看下基于JS代码实现input密码输入框输入密码变黑点...input type=hidden id=md5-password name=password> <button type=submit>Submit</button> </form> js代码 function checkForm() { v
在项目中因为动态表单无法确定标签...form:input path=formAttribute1 class=input-xlarge value= name=测试1/> <form:input path=formAttribute1 class=input-xlarge value= name=测试2/> <form:input p
### JSP 页面中 JS 调用 Form 表单的值的方法 在 Web 开发中,JSP(Java Server Pages)是一种广泛使用的服务器端技术,它允许开发者将动态内容嵌入到静态 HTML 页面中。本篇文章主要介绍如何在 JSP 页面中通过 ...
这段代码会在`form action`后面添加一个名为`param`的查询参数,其值为`paramValue`,并且使用`encodeURIComponent`对参数进行编码,防止特殊字符导致的问题。 4. **其他动态操作** - **动态创建和添加表单**:...
`FormValidation.js` 提供了详细的API文档,包括初始化、验证方法、事件、插件等,方便开发者根据具体需求进行深度开发和定制。 通过以上介绍,我们可以看到 `FormValidation.js` 的强大之处在于其丰富的验证规则、...
### 关于jQuery Validate 插件中相同name的多个元素只能验证第一个元素的问题及解决方法 #### 问题背景 在Web开发中,表单验证是非常重要的一环,它能够确保用户输入的数据符合预期的要求,从而避免数据错误或者...
在上述代码中,我们定义了一个名为MakeForm的函数,它首先创建了一个<form>元素,并设置了该元素的id和name属性。接着创建了一个类型为"text"的<input>元素,并设置了其type、name、value属性。然后将这个<input>...
script language="JavaScript" type="text/javascript" src="JS/validate.js"> 在form表单上添加一个提交事件调用验证数据方法 <form name="listform" action="resume-doAdd" method="post" onsubmit="return ...
本文实例讲述了JavaScript获取表单内所有元素值的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以遍历指定表单中的所有元素,并输出元素的值 <!DOCTYPE html> <html> <body> <form id=...
通过上述方法,我们可以有效地限制用户在Form表单Input框中的输入长度,确保数据的有效性和一致性。这种方法不仅适用于汉字输入限制,也可以轻松扩展到其他特殊字符或格式的输入限制。希望本文对你有所帮助,在实际...
`<form>` 标签是创建表单的基础,它的 `action` 属性定义了处理表单数据的服务器端脚本,而 `method` 属性则指定了数据发送的方式,如 "GET" 或 "POST"。 在表单中,`<input>` 标签是最常用的控件之一,它可以以...
$('#dynamicForm').append('<label>' + item.label + ':</label><input type="text" name="' + item.name + '" lay-verify="required" />'); } }); form.verify({ required: function(value, item) { if (!value...
本文实例讲述了JS定义网页表单提交(submit)的方法。分享给大家供大家参考。具体如下: 这段代码表示网页表单提交时不是提交到指定的页面,而是执行一个特定的函数 [removed] function saveInfo() { localStorage...
在Web开发中,表单提交是一种常见的方式,用于将数据发送到服务器。但是在某些情况下,除了表单内的数据外,还需要向服务器...每种方法都有其适用场景和限制,了解这些可以为开发者在处理类似问题时提供更多的灵活性。
JavaScript获取网页表单的action属性是一种常用的操作,通常用于获取表单提交时要发送到的URL地址。在Web开发中,表单是用来收集用户输入数据并将其发送到服务器的HTML元素。action属性指定了表单提交后,服务器处理...
-- 三个相同name的input --> <input name=zhai/> <input name=zhai/> </form> jquery validate在对多个相同name校验时,只校验第一个input框。 解决方案一: 在表单页对应的js中加入如下...
具有相同`name`属性的单选按钮组内只能选择一个。通过`value`属性定义选项的值,`checked`属性表示预选状态。 ### 8. `type="image"` - 图像提交按钮 `type="image"`创建一个图像作为提交按钮,点击图像的不同部分...