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中的push和join方法使用介绍
Oct 08 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 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 连接mysql连接被重置的解决方法
2011/02/15 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
对于Python的Django框架部署的一些建议
2015/04/09 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
入党积极分子评语
2014/05/04 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
作风整顿剖析材料
2014/09/30 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
高中家长意见怎么写
2015/06/03 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android