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 相关文章推荐
一个基于jquery的图片切换效果
Jul 06 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
Vue表单类的父子组件数据传递示例
May 03 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 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
PHP4中实现动态代理
2006/10/09 PHP
php 文件状态缓存带来的问题
2008/12/14 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
Python中的字符串查找操作方法总结
2016/06/27 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
python实现括号匹配的思路详解
2018/08/23 Python
python3.7.0的安装步骤
2018/08/27 Python
Python 做曲线拟合和求积分的方法
2018/12/29 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
客服文员岗位职责
2013/11/29 职场文书
教师远程培训感言
2014/03/06 职场文书
大学生操行评语大全
2014/12/31 职场文书
2016教师国培研修感言
2015/12/08 职场文书
大学军训心得体会800字
2016/01/11 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL