IE下form.action不能提交表单(用于动态转到地址)

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

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

document.getElementById('post').action='http://unmi.cc/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://unmi.cc/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> 元素取出来是这样子的：

1 2 3

< form id = "post" action = "<a href=" http://unmi.cc">http://unmi.cc</ a >">      < input type = "hidden" name = "action" value = "Save" /> </ 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 属性值：

1 2 3 4 5 6

//jQuery 的话可以用注释中的代码   document.getElementById( 'post' ).attributes[ 'action' ].value= 'http://unmi.cc/another' ;   //$('#post').attributes['action'].value='http://unmi.cc/another';   alert(document.getElementById( 'post' ).attributes[ 'action' ].value);   //alert($('#post').attr('action'));   //alert($('#post').attr('attributes')['action'].value)

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

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

1 2 3 4 5

document.getElementById( 'post' ).action= 'http://unmi.cc/another' ; //或 $( '#post' ).attr( 'action' )= 'http://unmi.cc/another' ; //或 $( '#post' ).get(0).action= 'http://unmi.cc/another' ;

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

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

 

本文链接 http://unmi.cc/form-action-undefined-not-support,