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.ajax 用户登录验证代码
Oct 29 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
js实现复制功能(多种方法集合)
Jan 06 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如何透过ODBC来存取数据库
2006/10/09 PHP
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
PHP微商城开源代码实例
2019/03/27 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
js实现拖拽与碰撞检测
2020/09/18 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
python 基于TCP协议的套接字编程详解
2019/06/29 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
九年级历史教学反思
2014/01/27 职场文书
青春演讲稿范文
2014/05/08 职场文书
合作协议书范文
2014/08/20 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
司机岗位职责范本
2015/04/10 职场文书
酒店开业主持词
2015/07/02 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
无线电知识基础入门篇
2022/02/18 无线电