form.submit()不能提交表单的原因分析


Posted in Javascript onOctober 23, 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 ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
浅析javascript中的DOM
Mar 01 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
理解jquery事件冒泡
Jan 03 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
Google Maps API地图应用示例分享
Oct 23 #Javascript
深入分析JQuery和JavaScript的异同
Oct 23 #Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 #Javascript
用jquery模仿的a的title属性的例子
Oct 22 #Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 #Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 #Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 #Javascript
You might like
PHP date函数参数详解
2006/11/27 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
python每天定时运行某程序代码
2019/08/16 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
实习生的自我评价
2014/01/08 职场文书
寒假家长评语大全
2014/04/16 职场文书
党员创先争优心得体会
2014/09/11 职场文书
文明班级申报材料
2014/12/24 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle