form表单提交和重置小结-javascript-ArcherWong博客

form表单提交和重置小结

作者：ArcherWong
分类：javascript
时间：2019-01-04 10:35:07
阅读：396

# 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使用)

form表单提交和重置小结

文章分类

阅读排行

友情链接