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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
js中数组的常用方法小结
Dec 30 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
最简单的PHP程序--记数器
2006/10/09 PHP
php HandlerSocket的使用
2011/05/02 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
python 简易计算器程序,代码就几行
2009/08/29 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
python识别验证码图片实例详解
2020/02/17 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
Intersport西班牙:在线体育商店
2019/11/06 全球购物
军校大学生个人的自我评价
2014/02/17 职场文书
婚前财产公证书
2014/04/10 职场文书
银行求职自荐信
2014/06/30 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
监守自盗观后感
2015/06/10 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android