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
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
javascript字符串函数汇总
Dec 06 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
canvas 实现中国象棋
Feb 17 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
vue 实现走马灯效果
Oct 28 Javascript
封装一下vue中的axios示例代码详解
Feb 16 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模拟QQ登录的方法
2015/07/29 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
基于Python的接口测试框架实例
2016/11/04 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
django中的setting最佳配置小结
2017/11/21 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
浅谈django 重载str 方法
2020/05/19 Python
美国健康和保健平台:healtop
2020/07/02 全球购物
银行竞聘演讲稿范文
2014/04/23 职场文书
煤矿安全生产标语
2014/06/06 职场文书
应届大专生求职信
2014/06/26 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
安全生产月宣传标语
2014/10/06 职场文书
六查六看心得体会
2014/10/14 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书