JS/Jquery 表单方式提交总结
1. submit提交
(1). submit 按钮式提交
缺点:在提交前不可修改提交的form表单数据
// 1. html
<form method="post" action="/../.." >
<input type="text" name="username" value="" />
<input type="password" name="pwd" value="" />
<input type="submit" value="提交"/>
</form>
(2). onsubmit方式提交
优点:在请求提交操作(action)时,可对提交的数据进行处理
// 1. html
<form id='test_form' action='' method='' onsubmit='return checkForm()'>
<input type='text' name='username' value=''/>
<input type='password' id='input_pwd' value =''/> // 注意此没有name属性,不会提交
<input type='hidden' name='pwd' id='md5_pwd' value=''/> // 此有name属性,会被form表单提交
<button type='submit'>提交<button/>
</form>
// 2.js
function checkForm () { // 点击“提交”按钮,执行的方法
var input_pwd= document.getElementById('input_pwd');
var md5_pwd= document.getElementById('md5_pwd');
md5_pwd.value= toMD5(input_pwd.value);
//进行下一步
return true;
}
2. formData 提交
// 1. html
<form id="photoForm">
<input id="photoInput" type="file" title="图片上传" accept=".jpg,.jpeg,image/jpg,image/jpeg" name="myfiles" multiple="multiple">照片导入
</form>
// 2. js
$('#photoForm input').change(function() {
var photoForm = $('#photoForm')[0],
photoFormData = new FormData(photoForm),
photoFileList = $('#photoInput')[0].files; // 上传的文件列表
$('.loading').show();
$.ajax({
type: 'POST',
url: ZD.url+"/cert/filesUpload",
data: photoFormData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
complete:function(){
$('.loading').hide();
$("#photoForm input").val('');
},
success:function(d){
// 成功。。
}
});
});
3. 动态添加表单提交, js方式提交
1. 动态追加的form表单
var exportForm = $('<form action="'+ajaxUrl+'" method="post">\
<input type="hidden" name="beginDate" value="'+$(".beginDate").val()+'"/>\
</form>');
$(document.body).append(exportForm);
exportForm.submit(); // 表单提交
exportForm.remove();
2. 静态form表单,js方式提交
// 1. html
<form action="'+ajaxUrl+'" method="post">
<input type="hidden" name="beginDate" value="'+$(".beginDate").val()+'"/>
</form>
// 2. js/JQuery
document.getElementById("form").submit(); // js写法
$("#form").submit(); // jquery写法
JS/Jquery 表单方式提交总结的更多相关文章
- JS 更改表单的提交时间和Input file的样式
JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...
- 使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)
方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...
- jquery.form.js+jquery.validation.js实现表单校验和提交
一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...
- 使用JS对form的内容验证失败后阻止提交 &&js校验表单后提交表单的三种方法总结
1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...
- js防止表单重复提交
1.表单 <form id="addForm" onsubmit="getElementById('submitInput').disabled=true;retu ...
- jQuery——表单异步提交
如果不做任何处理,表单提交时会刷新页面,为了改善体验,可以使用jQuery做到异步提交表单:通过$("#form").serialize()将表单元素的数据转化为字符串,然后通过$ ...
- java 模拟表单方式提交上传文件
/** * 模拟form表单的形式 ,上传文件 以输出流的形式把文件写入到url中,然后用输入流来获取url的响应 * * @param url 请求地址 form表单url地址 * @param f ...
- 原生JS写表单验证提交功能
先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...
- js阻止表单默认提交、刷新页面
一.阻止刷新页面 在表单中的提交按钮<button></button>标签改为<input type="button">或者在<butto ...
随机推荐
- 问题.spring源码转换为eclipse遇到的问题
1.下载spring源码 2.下载安装gradle,配置环境变量 3.在spring子项目下执行命令:gradle cleanidea eclipse,会生成对应的.project及.classpat ...
- 华为手机,删除安装包apk
1.下载“文件管理”,完成安装后,打开文件管理. 2.找到安装包,单击. 3.长按想要删除的apk文件,页面上会出现垃圾箱的图标,点击垃圾箱即可完成删除.
- codeforces 816 B. Karen and Coffee(思维)
题目链接:http://codeforces.com/contest/816/problem/B 题意:给出n个范围,q个查询问查询区间出现多少点在给出的n个范围中至少占了k次 题解:很显然的一道题目 ...
- codeforces 761 C. Dasha and Password(多维dp)
题目链接:http://codeforces.com/contest/761/problem/C 题意:给出n行的字符串每一列都从第一个元素开始可以左右移动每一行字符串都是首位相连的. 最后问最少移动 ...
- Spring的事件监听机制
最近公司在重构广告系统,其中核心的打包功能由广告系统调用,即对apk打包的调用和打包完成之后的回调,需要提供相应的接口给广告系统.因此,为了将apk打包的核心流程和对接广告系统的业务解耦,利用了spr ...
- 换个角度使用VUE过滤器
换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...
- Go语言标准库之fmt
fmt标准库是我们在学习Go语言过程中接触最早最频繁的一个了,本文介绍了fmtb包的一些常用函数. fmt fmt包实现了类似C语言printf和scanf的格式化I/O.主要分为向外输出内容和获取输 ...
- 【深入浅出-JVM】(75):class 装载
过程 装载 条件 主动使用 class时 创建一个类的实例 (new .反射.克隆.反序列化) 调用类的静态方法(invokestatic) 使用类或接口的静态字段(getstatic.putstat ...
- Git学习-上传项目到github
现在流行把项目代码上传到git上,今天试了好久,终于成功上传到git了,特做点笔记. 准备工作 在github上注册一个账号,创建一个仓库. 创建好仓库,得到它的地址: 开始上传 一.新建一个文件夹, ...
- Android 网络通信框架Volley(一)
转自:http://blog.csdn.net/t12x3456/article/details/9221611 1. 什么是Volley 在这之前,我们在程序中需要和网络通信的时候,大体使用的东西莫 ...