JS中的form.submit()不能提交表单的错误原因


Posted in Javascript onOctober 08, 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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
常用的9个JavaScript图表库详解
Dec 19 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 #Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 #Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 #Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 #Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 #Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 #Javascript
javascript学习笔记(四)function函数部分
Sep 30 #Javascript
You might like
PHP中如何调用webservice的实例参考
2013/04/25 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
CentOS安装php v8js教程
2015/02/26 PHP
php读取csc文件并输出
2015/05/21 PHP
PHP自定义错误用法示例
2016/09/28 PHP
用javascript操作xml
2006/11/04 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
python中enumerate函数用法实例分析
2015/05/20 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
如何使用python操作vmware
2019/07/27 Python
如何在python中实现随机选择
2019/11/02 Python
python数据预处理方式 :数据降维
2020/02/24 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
小区门卫岗位职责
2013/12/31 职场文书
学生会竞聘书范文
2014/03/31 职场文书
关于工作经历的证明书
2014/10/11 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
考研英语辞职信
2015/05/13 职场文书
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js
ubuntu下常用apt命令介绍
2022/06/05 Servers