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 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
js图片处理示例代码
May 12 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
js判断节假日实例代码
Dec 27 Javascript
Angular网络请求的封装方法
May 22 Javascript
vue使用一些外部插件及样式的配置代码
Nov 18 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 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浮点数的一个常见问题
2016/03/10 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
javascript 三种编解码方式
2010/02/01 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
后勤副校长自我鉴定
2013/10/13 职场文书