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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
JS代码实现table数据分页效果
May 26 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
小程序富文本提取图片可放大缩小
May 26 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新手上路(五)
2006/10/09 PHP
如何隐藏你的.php文件
2007/01/04 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
php内嵌函数用法实例
2015/03/20 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
JavaScript 学习技巧
2010/02/17 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
外贸专业求职信
2014/03/09 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
仓库文员岗位职责
2014/04/06 职场文书
环保倡议书50字
2014/05/15 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
党员十八大心得体会
2014/09/12 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
详解nginx进程锁的实现
2021/06/14 Servers
python 管理系统实现mysql交互的示例代码
2021/12/06 Python
Python使用pyecharts控件绘制图表
2022/06/05 Python