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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
vue之浏览器存储方法封装实例
Mar 15 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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
微信公众平台天气预报功能开发
2014/07/06 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
python实现拼图小游戏
2020/02/22 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
库房管理员岗位职责
2014/03/09 职场文书
大学班级文化建设方案
2014/05/06 职场文书
销售顾问工作计划书
2014/09/15 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
复活读书笔记
2015/06/29 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android