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 相关文章推荐
javascript 防止刷新,后退,关闭
Aug 07 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
将查询条件的input、select清空
Jan 14 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
微信小程序开发图片拖拽实例详解
May 05 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
javascript中的self和this用法小结
2014/02/08 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
js css自定义分页效果
2017/02/24 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Python进行数据提取的方法总结
2016/08/22 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
浅析matlab中imadjust函数
2020/02/27 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
喝酒检查书范文
2014/02/23 职场文书
淘宝店策划方案
2014/06/07 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
个人年终总结范文
2015/03/09 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server