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触发器详解
Mar 10 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
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过滤危险html代码
2008/08/18 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
理解PHP中的stdClass类
2014/04/18 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
python中的多重继承实例讲解
2014/09/28 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Python实现网站表单提交和模板
2019/01/15 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
Python tcp传输代码实例解析
2020/03/18 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
Pandas的数据过滤实现
2021/01/15 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
2015年度女工工作总结
2015/10/22 职场文书
如何利用python创作字符画
2022/06/25 Python