form.submit()不能提交表单的错误原因及解决方法


Posted in Javascript onOctober 13, 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 相关文章推荐
深入分析js中的constructor和prototype
Apr 07 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
AngularJS表单验证功能分析
May 26 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
js的touch事件的实际引用
Oct 13 #Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 #Javascript
5个JavaScript经典面试题
Oct 13 #Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 #Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 #Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 #Javascript
JS 获取鼠标左右键的键值方法
Oct 11 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
毕业自我鉴定书
2014/03/24 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
学校就业推荐信范文
2014/05/19 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
义卖募捐活动总结
2015/05/09 职场文书
检察院起诉书
2015/05/20 职场文书
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记
使用Ajax实现无刷新上传文件
2022/04/12 Javascript