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 相关文章推荐
JQuery select控件的相关操作实现代码
Sep 14 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
js图片预加载示例
Apr 30 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
js 实现碰撞检测的示例
Oct 28 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 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
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
小谈angular ng deploy的实现
2020/04/07 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
python海龟绘图实例教程
2014/07/24 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
python生成并处理uuid的实现方式
2020/03/03 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
python实现批量转换图片为黑白
2020/06/16 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
通过实例解析python and和or使用方法
2020/11/14 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
七年级英语教学反思
2014/01/15 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
电子商务实训报告总结
2014/11/05 职场文书
消夏晚会主持词
2015/06/30 职场文书