js实现表单提交submit(),onsubmit
通常表单的提交有两种方式,一是直接通过html的form提交,代码如下:
<form action="" method="" id="forms">
<input type="text" name="username" value="" />
<input type="password" name="pwd" value="" />
<input type="submit" value="提交"/>
</form>
但有时候我们会出于安全角度考虑,给用户输入的密码进行加密,方法一就没办法解决这个问题,这时候我们同常会选择另一种方法,使用javaScript来进行表单提交,代码入下:

<!--HTML-->
<form action="" method="" id="test_form">
<input type="text" name="username" value="" />
<input type="password" name="pwd" value="" />
<button type="button" onclick='doSubmitForm()'>提交<button/>
</form> <script>
var form = document.getElementById('test_form');
//再次修改input内容
form.submit();
</script>

这种方法有个缺点就是,打乱正常的表单提交程序,通常用户输入完成后点击回车键就可以提交,但是这个方法实现不了,所以,使用下面的方法便可以解决这个问题,,通过form自身的onsubmit方法,来触发提交,然后进行input的修改:

<!--HTML-->
<form id='test_form' action='' method='' omsubmit='return checkForm()'>
<input type='text' name='username' value=''/>
<input type='password' name='pwd' value =''/>
<button type='submit'>提交<button/>
<form/> <script>
function checkForm(){
var form = document.getElementById('test_form');
//可在此修改input
//进行下一步
return ture;
}
<script/>

注意,checkForm()方法中,return true时,表单才会正常提交,为false时,浏览器将不会提交,通常是用户的密码输入错误时,终止提交。
之前说过,为安全考虑用户提交时,一般对密码进行加密处理,代码如下:

<!--HTML-->
<form id='test_form' action='' method='' omsubmit='return checkForm()'>
<input type='text' name='username' value=''/>
<input type='password' name='pwd' id='pwd' value =''/>
<button type='submit'>提交<button/>
<form/> <script>
function checkForm(){
var pwd= document.getElementById('pwd');
pwd.value= toMD5(pwd.value);
//进行下一步
return ture;
}
<script/>

这种做法看上去没问题,但是当用户输入完成后,提交会发现密码框的 * 会由几个瞬间变成 32个,这是由于MD5加密造成的(MD5有32个字符);如果想避免出现这种情况,需要充分利用到<input type='hidden'>,代码如下:

<!--HTML-->
<form id='test_form' action='' method='' omsubmit='return checkForm()'>
<input type='text' name='username' value=''/>
<input type='password' id='input_pwd' value =''/>
<input type='hidden' name='pwd' id='md5_pwd' value=''/>
<button type='submit'>提交<button/>
<form/> <script>
function checkForm(){
var input_pwd= document.getElementById('input_pwd');
var md5_pwd= document.getElementById('md5_pwd');
md5_pwd.value= toMD5(input_pwd.value);
//进行下一步
return ture;
}
<script/>

注意,<input type='password'/>是用户输入密码的input框并,没有设置 name 属性,而是给 <input type='hidden' /> 设置了 name='pwd',这样表单提交只会提交带有name属性的输入框,从而解决了上面的那个问题。
js实现表单提交submit(),onsubmit的更多相关文章
- jquery.form.js 让表单提交更优雅
jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...
- Jquery添加元素append及阻止表单提交submit
HTML代码: <td><input name="duration[]" value="" type="text" /&g ...
- 【转载】[JS]让表单提交返回后保持在原来提交的位置上
有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...
- js阻止表单提交
<!DOCTYPE html><html><head> <title>Simple Login Form</title> < ...
- 利用JS 阻止表单提交
情景一:不存在Ajax异步操作 1 使用背景:会议室预定管理系统中,当表单提交的时候需要验证预约的时间是否符合预定规则(不需要通过访问服务器),否则提示错误信息,阻止表单提交. 2 相关技术点: fo ...
- springmvc下js控制表单提交(表单提交前检验,提交后获取json返回值)
这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...
- 转: ASP.NET+ExtJs4.0+表单提交submit,上传图片到服务器
http://blog.csdn.net/lmaohuanl/article/details/6792057 <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- js 在表单提交前进行操作
最近在写页面的时候,需要手动写一些在表单进行提交前的验证操作,正好看到了2种阻止表单提交的方法,可以进行一些逻辑处理 方法一:使用return false 原生js写法: <form id=&q ...
- 使用Jquery.form.js ajax表单提交插件弹出下载提示框
现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...
随机推荐
- CSS快速入门-组合选择器
<div class="gradefather"> hello1 <div class="father">hello2 <p cl ...
- 设计模式 笔记 生成器(建造者)模式 Builder
//---------------------------15/04/08---------------------------- //builder 生成器(建造者)模式---对象创建型模式 /* ...
- Sqlserver_分组
create table orders ( id int, orderName varchar() ) go create table cars ( id ,) , ordersid int, pna ...
- 关于使用AzureCli登陆提示SSLError的错误解决方案
如果使用Powershell的azure cli命令登陆Azure时提示sslerror,大致如下的错误: 这个是由于你的网络前有网关造成的ssl验证没法通过. 解决方案: 在powershell中执 ...
- Keras学习笔记。
1. keras.layers.Dense (Fully Connected Neural NetWork),所实现的运算是output = activation(dot(input, kernel) ...
- sqlserver-表分区
最近对公司数据库性能方面改造.现已初建成效. 公司原先数据库问题颇多,简单列举下: 1.数据表文档缺失. 2.数据库900多张表,接近一半都是备份和一些报表,没有分库处理 3.大数量的表按照年份人工导 ...
- sqlserver批量删除字段 msrepl_tran_version
屁话不多说. 原因: msrepl_tran_version由于有非空约束.所以不能直接删除. --###############################################--1 ...
- redis启动停止+密码认证
redis启动停止命令 ./bin/redis-server redis.conf ./bin/redis-cli -h 127.0.0.1 -p 6379 shutdown flushall ——& ...
- js实现随机的四则运算题目
老师给出的题,写一个小程序,可以生成随机的四则运算题目给给小学生用.以前自己就写了一个四则运算的简单js小程序,是这样的: 事件 + - * / 这是个自己输入的算法,但要求是自动产生随机数.于是我用 ...
- 11.3 Daily Scrum
今天的会议上,我们重新规划了一下每个人的分工.大家的安卓开发环境已经配置完毕,于是我们便正式开始进入代码编写的阶段. 由于修改了一下分工,之前发布的任务作废,以新发布的任务为准. Today’s ...