form.submit()不能提交表单的原因分析


Posted in Javascript onOctober 23, 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 相关文章推荐
Javascript面向对象之四 继承
Feb 08 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
AngularJS语法详解
Jan 23 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
Google Maps API地图应用示例分享
Oct 23 #Javascript
深入分析JQuery和JavaScript的异同
Oct 23 #Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 #Javascript
用jquery模仿的a的title属性的例子
Oct 22 #Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 #Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 #Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 #Javascript
You might like
实用函数4
2007/11/08 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
javascript实现字符串反转的方法
2015/02/05 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
浅析PHP与Python进行数据交互
2018/05/15 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
工商管理应届生求职信
2013/10/07 职场文书
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
教师个人师德总结
2015/02/06 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
企业宣传语大全
2015/07/13 职场文书
董事长致辞
2015/07/29 职场文书
反邪教学习心得体会
2016/01/15 职场文书
MySQL去除密码登录告警的方法
2022/04/20 MySQL