温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JS获取表单中数据formdata的方法

发布时间:2023-06-03 11:44:48 来源:亿速云 阅读:242 作者:栢白 栏目:开发技术

这篇文章主要介绍了JS获取表单中数据formdata的方法,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。

在文章正式开始之前呢,先介绍一个知识点,那就是var和let的区别,查看了各路大佬的文章,也经过各种尝试,最终得出的结果是,let声明的变量只在该变量对应的块中有效,有点局部变量的意思,而且let相对来说更加的严格。

正式开始我们的formdata之路,曾经稚嫩的我们在取form表单的值(value)时,都是这样的

<form action="" method="post">
		<input type="text" name="name" id="name" value="aaa">
		<input type="password" name="password" id="password">
		<input type="submit" name="submit" value="提交" id="submit">
	</form>
	<script>
		var name1 = document.getElementById('name').value; //获取id为name的值
		var submit1 = document.getElementById('submit');//获取submit.准备为其绑定事件
		submit1.onclick = function(){alert(name1)}//为submit绑定点击事件,将name的值在也页面弹窗显示
	</script>

上面这种方法获取表单的值,不仅麻烦,而且代码量大,我们一起来看看更快更简洁的方法
第一种:获取普通input中的值

<!--onsubmit事件是在提交表单时触发-->
<!-- return 一个函数:是指当函数的返回值位false时,表单不提交,为true时提交-->
<form action="" method="post" target="_blank" onsubmit="return mySubmit(this)">
<!--mySumit函数中的参数this是指form调用该函数时会将form传入函数中-->
		<input type="text" name="username" >
		<input type="submit" name="submit" >	
	</form>
	<script>
		function mySubmit(form){
		<!--定义formData对象-->
			let formData = new FormData(form);
			<!--利用fromData对象的get方法获取表单数据-->
			let username = formData.get('username');
			<!--进行一些判断或者操作-->
			if(username.length < 5){
				alert('用户名不得小于5位');
				return false;
			}else{
				return true;
			}
			return false;
		}
	</script>

第二种:获取type为checkbox类型的input的值

<form action="" method="post" onsubmit="return mySubmit(this)">
		<input type="checkbox" name="hoppy" value="music">音乐
		<input type="checkbox" name="hoppy" value="game">游戏
		<input type="checkbox" name="hoppy" value="movie">电影
		<input type="submit" name="" value="提交">
</form>
<script>
		function mySubmit(form){
			//定义formData对象
			let formData = new FormData(form);
			//获取值,因为get只能获取一个值,而这里是多选框,所以这里使用getAll方法
			let hoppy1 = formData.getAll('hoppy');
			console.log(hoppy1);
			//页面数据不进行提交,只是进行测试
			return false;
		}
</script>

以上就是JS获取表单中数据formdata的方法的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来亿速云行业资讯!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js
AI