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 相关文章推荐
简介JavaScript中substring()方法的使用
Jun 06 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
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编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python实现数独算法实例
2015/06/09 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
浅析python继承与多重继承
2018/09/13 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
python中强大的format函数实例详解
2018/12/05 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
JBL英国官网:JBL UK
2018/07/04 全球购物
旅游活动总结
2014/08/27 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server