关于form.submit()一个少为人知的问题

Question

最近在通过JS处理表单提交时遇到一个问题，此问题在IE底下不会出现，问题如下：var f = d.createElement("form");f.setAttribute("method", method);f.setAttribute("action", url);for (var e in hashtable) {var t = d.createElement("input");t.setAttribute("type", "text"); t.setAttribute("name", e);t.value = hashtable[e];f.appendChild(t);}其中hashtable以"username":"abc"形式出现，动态生成一个Form。当hashtable里的字段出现类似"submit":"1"时，即构造出<input type="text" name="submit" value="1" />时，在调用f.submit()时chrome下会提示错误："Uncaught TypeError: Property 'submit' of object [object HTMLFormElement] is not a function"网上搜索了一下：
"I was just trying to submit an HTML form using document.formname.submit() method and was getting these error on different browser. document.formname.submit is not a function Uncaught TypeError: Property 'submit' of object #HTMLForm element is not a function Thats weird! It worked all the time. I was clueless why JavaScript would behave like this...? Yeah, that was a silly mistake. I didn't realize that I named the submit button as 'submit' and that why javascript is failing. We may do this kind of mistakes every now and then..."请问如果我hashtable里必须出现"submit":"1"的话，有什么解决办法，让这个错误消失吗？

Answer 1

在chrome 12.0.742.112版本中，用下面的代码测试，并未发生楼主所说的情况window.onload = function () {
            var frm = document.createElement("form");
            frm.action = "index.html";
            frm.method = "get";
            var textbox = document.createElement("input");
            textbox.type = "text";
            textbox.name = "submit";
            textbox.value = "1";
            frm.appendChild(textbox);
            document.body.appendChild(frm);
        }

Answer 2

到最后有没有调用frm.submit();提交呢？提交的时候才会出现这错误。

Answer 3

var f = d.createElement("form");
f.setAttribute("method", method);
f.setAttribute("action", url);
for (var e in hashtable) {
var t = d.createElement("input");
t.setAttribute("type", "text");    
t.setAttribute("name", e);
t.value = hashtable[e];f.appendChild(t);
}代码重新排版一下

Answer 4

我知道原因了，出于对旧式表单访问的考虑，许多浏览器都允许这样访问表单元素
<form name="theForm">
<input type="text" name="txtName" />
</form>theForm.txtName现在就可以理解了theForm.submit ,这样其实是在对一个dom元素的引用，并不是一个方法。所以出现上面的提示。

Answer 5

这种方法可以接收吗？t.setAttribute("name", e);
在这里做下判断，如果e==="submit"时，将e修改为"_submit"

Answer 6

说错了，是将name修改为_submit

Answer 7

请问楼上是指将
<input type="text" name="submit" value="1" />
改成
<input type="text" name="_submit" value="1" />
吗？不行，因为目标页面需要submit这个字段

Answer 8

视乎无解，这个主要是根据浏览器到底是先访问哪个对象决定的。将submit改为Submit，以区分表单的提交方法submit.反正服务器端接收键值对不区分大小写

Answer 9

这个问题遇到过，当时找错误可费劲了。就是因为name使用了submit，

Answer 10

回复楼上朋友：一开始我也觉得换个大小写应该可以，可事实上不行，服务器端就死认这个了，搞得很囧刚再测试，只要不是submit，即使大小写不同也通不过！

Answer 11

一开始我也觉得换个大小写应该可以，可事实上不行，服务器端就死认这个了，搞得很囧刚再测试，只要不是submit，即使大小写不同也通不过！

Answer 12

这样，了解一下服务端是用get方法还是post方法读submit的值的。
如果是get方法，你就不要frm.submit()了，直接window.location.replace("target.aspx?a=1&b=2");如果是用post的话，就使用ajax，去设置请求的主体部分数据不知道是否可行？？？

Answer 13

确定是post，用ajax可解决。现在纠结这问题，主要是觉得这问题将来有可能会碰到，如果这里的朋友能解决，那将一劳永逸！

Answer 14

先看问题本质：名称冲突。
再想解决办法：如果不能改那个，就改这个喽：<form id="aa" name="aa" action="http://hi.csdn.net/space-44012.html">
</form>
<input type="button" onclick="ff()" value="用别名提交">
<script>
var theforever_csdn=document.aa.submit;
function ff(){
theforever_csdn();
}
</script>

Answer 15

就是给表单的提交事件用var theforever_csdn=document.aa.submit的方法起个别名，在提交的时候，用这个别名去调用提交事件，就和你建立的submit属性没什么冲突了。

Answer 16

请问 var theforever_csdn=document.aa.submit; 这一句中的theforever_csdn是返回一个function还是一个dom引用？