form.submit()不能提交表单的错误原因及解决方法


Posted in Javascript onOctober 13, 2014

直接上代码把:

<div id="register">

<h4>会员注册</h4>

<div class="formdiv">

<form method="post" action="register.php?action=register" name="register" id="registerForm">

<dl>

<dt>请认真填写以下内容</dt>

<dd class="hasspan">

用户名:<input type="text" name="username">

</dd>

<dd class="hasspan">

密码:<input type="password" name="pwd">

</dd>

<dd class="hasspan">

确认密码:<input type="password" name="pwdagain">

</dd>

<dd id="tximg">

<img src="img/face/m01.gif" alt="选择头像" id="faceimg">

<input type="hidden" name="touxiang" value="">

<label id="imgsrclabel">m01.gif</label>

</dd>

<dd style="margin-right:120px;">

验证码:<input type="text" name="code">

<span>

<img src="code.php" alt="code" id="code" name="code">

<a href="#code" id="change">换一张</a>

</span>

</dd>

<dd class="btns">

<input type="button" name="submit" id="submit" value="注册">

<input type="button" name="quit" id="quit" value="退出">

</dd>

</dl>

</form>

</div>

</div>

表单数据提交到本页面,下面是js处理

/*注册表单提交*/

function formDeal()

{

var btnSubmit = document.getElementById('submit');

var formId = document.getElementById('registerForm');

btnSubmit.onclick = function()

{

//表单的submit()方法不能提交表单

formId.submit();

}


}

如果表单提交,在本页面有一段提示信息

if(!empty($_GET['action']) && $_GET['action'] == 'register')

{

echo '你提交了数据';

exit();

}

结果是测试了许久都没有看到提示信息,以为是代码错了或者方法写错了,仔细核对,在结果官方文档,确认没有出错。

formId.submit()不能提交,就暂时只好把btnSubmit的type改为submit

this.type="submit"

在网上查了资料,原因归结为两点:

1、表单中不能有name=”submit” 的标签

2、表单中不能缺少《enctype=”multipart/form-data”》

经测试,此两点乃荒谬,并没有解决我的问题(或许是我的问题环境不一样)

后来,以为论坛的坛友建议我把注册按钮的ID改个名字,不用submit。改正之后,表单正常提交,提示信息出现。

最后总结:button的id不要设置为submit,否则可能会引起混淆,导致表单的submit()方法不能提交表单。在命名ID时,名字最好不要和现有的api在名称上重复,避免不必要的烦扰。

Javascript 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
jsPDF导出pdf示例
May 02 Javascript
js时间查询插件使用详解
Apr 07 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
vue如何截取字符串
May 06 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
js的touch事件的实际引用
Oct 13 #Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 #Javascript
5个JavaScript经典面试题
Oct 13 #Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 #Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 #Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 #Javascript
JS 获取鼠标左右键的键值方法
Oct 11 #Javascript
You might like
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
PHP加密解密类实例分析
2015/04/20 PHP
php读取csc文件并输出
2015/05/21 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
Python入门篇之对象类型
2014/10/17 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
Python验证码识别的方法
2015/07/10 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python 列表的清空方式
2020/01/13 Python
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
事业单位绩效考核实施方案
2014/03/27 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
付款证明格式范文
2015/06/19 职场文书
网吧温馨提示
2015/07/17 职场文书
辞职离别感言
2015/08/04 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
js之ajax文件上传
2021/05/13 Javascript
Python中time与datetime模块使用方法详解
2022/03/31 Python
SQL Server删除表中的重复数据
2022/05/25 SQL Server