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 相关文章推荐
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
vue+animation实现翻页动画
Jun 29 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
解析php常用image图像函数集
2013/06/24 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
用Python实现换行符转换的脚本的教程
2015/04/16 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
python爬虫基础知识点整理
2020/06/02 Python
python实现简单的学生管理系统
2021/02/22 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
PHP面试题附答案
2015/11/28 面试题
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
捐书仪式主持词
2015/07/04 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript