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 相关文章推荐
JavaScript 学习笔记(五)
Dec 31 Javascript
Js 随机数产生6位数字
May 13 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 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实现邮件群发的源码
2013/06/18 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
Python连接mysql数据库的正确姿势
2016/02/03 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
python正则-re的用法详解
2019/07/28 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
HR喜欢的自荐信格式
2013/10/08 职场文书
心理学专业毕业生推荐信范文
2013/11/21 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
双创工作实施方案
2014/03/26 职场文书
项目负责人任命书
2014/06/04 职场文书
交通事故协议书范本
2014/11/18 职场文书
债务纠纷起诉书
2015/05/20 职场文书
运动会通讯稿50字
2015/07/20 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python