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 相关文章推荐
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
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
php IP及IP段进行访问限制的代码
2008/12/17 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
php去除HTML标签实例
2013/11/06 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
Python中is和==的区别详解
2018/11/15 Python
实时获取Python的print输出流方法
2019/01/07 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
python实现处理mysql结果输出方式
2020/04/09 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
放假通知格式
2015/04/14 职场文书
门卫管理制度范本
2015/08/05 职场文书