JQuery操作form表单

使用JQuery前，先引入JQuery库

<script src="js/jquery-3.3.1.min.js"></script>

提交表单

方式一：JQuery事件，submit()方法

form表单，action属性必需，后台控制页面跳转

<form id="form" action="user/login" method="post">
	<input type="text" name="name" placeholder="请输入用户名">
	<input type="password" name="password" placeholder="请输入密码">
	<input type="submit" value="登录">
</form>

submit() 方法

$("#form").submit(function(event) {
	if($('input[type=text]').val() == "") {
		alert("用户名不能为空");
		return false;
	}
	if($('input[type=password]').val() == "") {
		alert("密码不能为空");
		return false;
	}
});

方式二：AJAX

form表单

<form id="form">
	<input type="text" name="name" placeholder="请输入用户名">
	<input type="password" name="password" placeholder="请输入密码">
	<div class="submit">
		<input type="button" value="登录">
	</div>
</form>

AJAX $.post()方法，回调函数控制页面跳转

$('.submit').on('click', function(){
		
	var $name = $('input[type=text]').val();
	var $password = $('input[type=password]').val();
	
	if ($name == ''){
		alert("用户名不能为空");
	} else if ($password == ''){
		alert("密码不能为空");
	} else {
		
		$.post("user/login", 
			{name : $name, password : $password}, 
			// 如果参数过多，可使用以下方法
			// $('#form').serialize(),
			function(data){
				if (data == "OK") {
					window.location.href = "index";
				} else {
					alert(data);
				}
		});
	}
});

回车提交表单

$("body").keydown(function(event) {
	// keyCode=13是回车键
	if (event.keyCode == "13") {
		// 触发 登录按钮被点击的事件
		$(".submit").click();
	}
});

重置表单

方式一：javascript的方式：reset()

document.getElementById("form").reset();

方式二：JQuery [标签/后代] 选择器，批量置空

$("input").val("");

方式三：

写一个隐藏的重置input

<input type="reset" id="form-reset" style="display: none;">

触发点击重置input的事件

$('#form-reset').trigger('click');