用JS提交参数创建form表单在FireFox中遇到的问题
更新时间：2013年01月16日 16:25:29 作者：
在一个前端页面上，需要通过JavaScript来提交参数，使用JS创建form表单，将参数append到表单中进行提交,接下来将介绍如何操作与实现
在一个前端页面上，需要通过JavaScript来提交参数，使用JS创建form表单，将参数append到表单中进行提交，代码如下：
Js代码:
functionloadConfig(gameUrl,skinId){
vartemp=document.createElement("form");
temp.action="${createLink(controller:'mobileConfig',action:'beforeLaunchConfig')}";
temp.method="POST";
temp.style.visibility="hidden";
varopt=document.createElement("input");
opt.name="gameUrl";
opt.id="gameUrl";
opt.value=gameUrl;
varopt2=document.createElement("input");
opt2.name="skinId";
opt2.id="skinId";
opt2.value=skinId;
temp.appendChild(opt);
temp.appendChild(opt2);
temp.submit();
}
该功能在Chrome及Safari上都能成功运行，但在使用FireFox（17.0.1）时不能成功提交，经过研究发现，FireFox在提交页面表单时要求页面有完整的标签项，即<html><head><title></title></head><body><form></form</body</html>这样的标签结构。因此，将该段JS做了写小改动：
Js代码:
functionloadConfig(gameUrl,skinId){
varpageDiv=document.getElementById("page");
vartemp=document.createElement("form");
temp.action="${createLink(controller:'mobileConfig',action:'beforeLaunchConfig')}";
temp.method="POST";
temp.style.visibility="hidden";
temp.name="loadConfigPage";
varopt=document.createElement("input");
opt.name="gameUrl";
opt.id="gameUrl";
opt.value=gameUrl;
varopt2=document.createElement("input");
opt2.name="skinId";
opt2.id="skinId";
opt2.value=skinId;
temp.appendChild(opt);
temp.appendChild(opt2);
pageDiv.appendChild(temp);
temp.submit();
}
在<body>标签内append此处创建的form表单，再进行提交就能成功了。
Js代码:
复制代码 代码如下:
functionloadConfig(gameUrl,skinId){
vartemp=document.createElement("form");
temp.action="${createLink(controller:'mobileConfig',action:'beforeLaunchConfig')}";
temp.method="POST";
temp.style.visibility="hidden";
varopt=document.createElement("input");
opt.name="gameUrl";
opt.id="gameUrl";
opt.value=gameUrl;
varopt2=document.createElement("input");
opt2.name="skinId";
opt2.id="skinId";
opt2.value=skinId;
temp.appendChild(opt);
temp.appendChild(opt2);
temp.submit();
}
该功能在Chrome及Safari上都能成功运行，但在使用FireFox（17.0.1）时不能成功提交，经过研究发现，FireFox在提交页面表单时要求页面有完整的标签项，即<html><head><title></title></head><body><form></form</body</html>这样的标签结构。因此，将该段JS做了写小改动：
Js代码:
复制代码 代码如下:
functionloadConfig(gameUrl,skinId){
varpageDiv=document.getElementById("page");
vartemp=document.createElement("form");
temp.action="${createLink(controller:'mobileConfig',action:'beforeLaunchConfig')}";
temp.method="POST";
temp.style.visibility="hidden";
temp.name="loadConfigPage";
varopt=document.createElement("input");
opt.name="gameUrl";
opt.id="gameUrl";
opt.value=gameUrl;
varopt2=document.createElement("input");
opt2.name="skinId";
opt2.id="skinId";
opt2.value=skinId;
temp.appendChild(opt);
temp.appendChild(opt2);
pageDiv.appendChild(temp);
temp.submit();
}
在<body>标签内append此处创建的form表单，再进行提交就能成功了。
相关文章
这篇文章主要为大家详细介绍了第四篇Javascript动画效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了javascript中2个感叹号的用法,并用大量的实例讲述了!!的常见应用情况,是非常实用的技巧,需要的朋友可以参考下2014-09-09
常见的浏览器存储方式（cookie、localStorage、sessionStorage）
今天我们从前端的角度了解一下浏览器存储，我们常见且常用的存储方式主要由两种：cookie、webStorage（localStorage和sessionStorage）。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-05-05
ES6新增的math,Number方法,小编觉得非常不错，需要的朋友参考下吧2017-08-08
如何将页面表格导出为Excel，这在日常工作中很常见，下面为大家详细的介绍下使用JavaScript是如何实现的2013-12-12
这篇文章主要介绍了JavaScript中的全局对象介绍,对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用,需要的朋友可以参考下2015-01-01
2008-01-01
这篇文章主要为大家详细介绍了js选项卡的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了JS中art-template模板使用过滤器问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
innerHTML 属性的使用非常流行，因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但很显然，使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。2008-06-06
最新评论