form.action 怎么就不能设置表单的处理页了呢?

一个网页里时常会写多个提交按钮,可以点击不同按钮时分别设置某个隐藏域的值,都是提交到同一个页面,然后在处理页面可以知道应如何区别对待。也可能各自的 onclick 事件中改变 form 的 action 属性指向不同的处理页面后提交表章。在处理表单页面逻辑复杂且无多少相关性的时候,我会选择后一种处理方式。

可以今天碰到一个事情,在点击某个提交按钮,欲用(假设 form 的 id 为 'post')

document.getElementById('post').action='http://yanbin.blog/some'

改变 form 的 action 属性时,提示:

---------------------------
Error
---------------------------
A Runtime Error has occurred.
Do you wish to Debug?

Line: 14
Error: Object doesn't support this property or method
---------------------------
Yes   No
---------------------------

这在以前都是无可厚非的呀,怎么这次却掉了链,再次换着 jQuery 的方式,$('#post').attr('action',http://yanbin.blog/some),也是一样的错误。可是在 FireFox 里是没问题的,可以成功换掉 form 的 action 属性,提交到不同的处理页。

不能设置,那取 form 的 action 值又该为何呢?用

 alert(document.getElementById('post').action) //看到的是一个 object,不是 form 的 action 字符串值吗?

用 jQuery 的办法,alert($('#post').attr('action')), 能够得到 form 预期的 action 属性值,jQuery 果然强大。

在网上查查相关的问题,并结合为何 document.getElementById('post').action 为何会是个 object 这样一个事实,果然在 form 中还暗藏了一个名为 action 的表单域,整个 <form> 元素取出来是这样子的:

就是这个名为 action 的隐藏域搅的局。还记得更早的时候访问表单域是怎么访问的吗?就是用 document.forms[0].fieldName,是的正好 form 中间有一个 name="action" 的隐藏域,所以 document.getElementById('post').action 返回的不是 form 的 action 属性,而是直接指向到 name="action" 的那个隐藏域去了,这也是为什么它会是个 object。

认清了这个,该如何规避这种问题呢,其一可以不在 form 中放置名为 action 的表单域就不会出现混淆了。可如果 name="action" 的那个表单域非要不可(例如作为特定框架约定的),则必须找到一种办法能咬定住是 form 的 action 属性,还不是 form  下的那个名为 action 元素,就必须用下面几行代码来访问或设置 form 的 action 属性值:

不得不 attributes['action'].value 一下。jQuery  在这里表现的有点暧昧,既然是可以用 $('#post').attr('action') 取到 form 的 action 属性值,为何不让人直接用 $('#post').attr('action','http://yanbin.blog/another') 来进行赋值呢?

如果 form 中有名为 action 的表单域,在其他浏览器,我 FireFox 3.6.8,Opera 10.61,Chrome 5.0, Safari 5.0.1 上测试后是发现不用对 form 的 action 属性特别对待,依常理用:

统一操作便可,就是 IE 有区别的,所以保险的代码必须用 form.attributes['action'].value 来处理。

还以为这是在 IE 上的通病,回到家里的 IE 8 中却发现在 IE 8 中已经与其他浏览器统一了行为,有问题的浏览器是 IE 7,估计 IE 6 也是走不掉的,所以安全的代码还得写成 form.attributes['action'].value = 'http://yanbin.blog/another'。当然,如果你十分的确定在 form 中不可能出现 name='action' 的表单域的话,那就用 form.action='http://yanbin.blog/another' 也无妨。

本文链接 https://yanbin.blog/form-action-undefined-not-support/, 来自 隔叶黄莺 Yanbin Blog

[版权声明] Creative Commons License 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。

Subscribe
Notify of
guest

2 Comments
Inline Feedbacks
View all comments
Peatfalkskisk
14 years ago

Hello! Can you tell me how i can register mail at google [url=http://google.com]google[/url] http://google.com