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函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
canvas知识总结
Jan 25 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
javaScript封装的各种写法
Aug 14 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
javascript使用链接跨域下载图片
Nov 01 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分页函数代码(简单实用型)
2010/12/02 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
EJB的角色和三个对象
2015/12/31 面试题
简历中自我评价分享
2013/10/09 职场文书
经理职责范文
2013/11/08 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
高中班主任评语
2014/12/30 职场文书