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中2个等号与3个等号的区别
Aug 06 Javascript
js中top的作用深入剖析
Mar 04 Javascript
javascript 闭包详解
Feb 15 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
Vue 获取数组键名的方法
Jun 21 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
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
PHP 中执行系统外部命令
2006/10/09 PHP
一个用于网络的工具函数库
2006/10/09 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
js 单引号 传递方法
2009/06/22 Javascript
javascript Object与Function使用
2010/01/11 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python turtle绘画象棋棋盘
2019/08/21 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
Python中常用的os操作汇总
2020/11/05 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
盛大笔试题
2016/11/05 面试题
学期自我鉴定
2013/11/04 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
运动会广播稿400字
2014/01/25 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
义诊活动总结
2015/02/04 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
工厂无线对讲系统解决方案
2022/02/18 无线电