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 相关文章推荐
文本加密解密
Jun 23 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
JS字符串截取函数实例
Dec 27 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
微信JS接口大全
Aug 25 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
js中的面向对象入门
Mar 06 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 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读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
PDO::setAttribute讲解
2019/01/29 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
js实现拖拽效果
2015/02/12 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
python映射列表实例分析
2015/01/26 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
使用python3实现操作串口详解
2019/01/01 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
Python双链表原理与实现方法详解
2020/02/22 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
关于Python使用turtle库画任意图的问题
2022/04/01 Python