ArcherWong博客
首页
博客
form表单提交和重置小结
作者:ArcherWong
分类:javascript
时间:2019-01-03 21:35:07
阅读:342
# 1. input标签 - 1.1>input[type=submit] ``` <form name=”form” method=”post” action=”#"> <input type=”submit” name=”btn” value=”提交"> </form> ``` input的type属性是submit,**会引发表单提交**。 作为按钮的input控件同时被当做一个表单输入提交给了服务器。键值对是 btn=>'提交'; - 1.2>input[type=button] input的type属性还可以是button,这时它只是一个按钮,**不会引发表单提交**。 ``` <form name=”form” method=”post” action=”#"> <input type=”button” name=”btn” value=”提交"> </form> ``` # 2. button[type=submit] type的默认值是submit,所以点击一个button,**会引起表单提交** **注意**:button[type]在IE中的默认值是button,这意味着它只是一个按钮而不会引发表单提交, 请注意设置type=submit来兼容IE。 button可以设置name和value,提交表单时,value会被作为表单数据提交给服务器, ``` <form> <input type="text" name='name'> <button>提交</button> </form> ``` # 3. 用法举例 ``` <form id="myform" name="myform" method="post action="/form-submit"> <input type="submit" value="Submit普通提交"> <input type="button" id="ajaxBtn" value="AJAX提交" /> <input type="button" id="jqueryBtn" value="jQuery提交" /> <input type="button" id="jsBtn" value="JS提交" /> </form> ``` ``` <script type="text/javascript"> //ajax提交 $("#ajaxBtn").click(function() { //可以获取表单的所有提交信息 var params = $("#myform").serialize(); $.ajax( { type : "POST", url : "/form-submit", data : params, success : function(msg) { alert("success: " + msg); } }); }) //jQuery提交 $("#jqueryBtn").click(function(){ //可以修改表单属性,比如action,这样可以使用一个表单,提交到不同处理器 //$('#myform').attr('action','/form-submit'); $("#myform").submit(); }) //js提交 $("#jsBtn").click(function(){ //document.myform.action="/form-submit"; document.myform.submit(); }) </script> ``` # 4. 表单重置 - 1:通过from的id实现 ``` document.getElementById("formId").reset(); ``` 注意,JQuery中没有直接的reset方法,需要像下面这样写 ``` $('#formId')[0].reset(); ``` - 2:通过Name实现 ``` document.formName.reset(); ``` - 3:直接给input传空值 ``` $("input").val(""); $("input[type='text']").val('') $("input[type='checkbox']").removeAttr('checked') ``` # 参考: http://www.tuicool.com/articles/3my6Rf http://blog.csdn.net/itmyhome1990/article/details/41849175?utm_source=tuicool&utm_medium=referral
标签:
上一篇:
ajax使用
下一篇:
批量上传图片(jQuery-File-Upload使用)
文章分类
css
elasticsearch
git
golang
guacamole
javascript
letsencrypt
linux
nginx
other
php
python
vue
web
阅读排行
golang笔记---关联数组(map)
letsencrypt证书-管理工具certbot
centos7.3配置guacamole
golang笔记---template模板语法
nginx笔记-proxy_cache缓存详解
友情链接
node文件
laravel-vue
ArcherWong的博客园