欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

教你JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata)

 更新時(shí)間:2023年05月15日 14:52:25   作者:anansec  
這篇文章主要介紹了JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata),本文給大家分享的js獲取表單數(shù)據(jù)更簡(jiǎn)潔,通過兩種方法結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

在文章正式開始之前呢,先介紹一個(gè)知識(shí)點(diǎn),那就是var和let的區(qū)別,查看了各路大佬的文章,也經(jīng)過各種嘗試,最終得出的結(jié)果是,let聲明的變量只在該變量對(duì)應(yīng)的塊中有效,有點(diǎn)局部變量的意思,而且let相對(duì)來說更加的嚴(yán)格。

正式開始我們的formdata之路,曾經(jīng)稚嫩的我們?cè)谌orm表單的值(value)時(shí),都是這樣的

<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.準(zhǔn)備為其綁定事件
		submit1.onclick = function(){alert(name1)}//為submit綁定點(diǎn)擊事件,將name的值在也頁面彈窗顯示
	</script>

上面這種方法獲取表單的值,不僅麻煩,而且代碼量大,我們一起來看看更快更簡(jiǎn)潔的方法
第一種:獲取普通input中的值

<!--onsubmit事件是在提交表單時(shí)觸發(fā)-->
<!-- return 一個(gè)函數(shù):是指當(dāng)函數(shù)的返回值位false時(shí),表單不提交,為true時(shí)提交-->
<form action="" method="post" target="_blank" onsubmit="return mySubmit(this)">
<!--mySumit函數(shù)中的參數(shù)this是指form調(diào)用該函數(shù)時(shí)會(huì)將form傳入函數(shù)中-->
		<input type="text" name="username" >
		<input type="submit" name="submit" >	
	</form>
	<script>
		function mySubmit(form){
		<!--定義formData對(duì)象-->
			let formData = new FormData(form);
			<!--利用fromData對(duì)象的get方法獲取表單數(shù)據(jù)-->
			let username = formData.get('username');
			<!--進(jìn)行一些判斷或者操作-->
			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對(duì)象
			let formData = new FormData(form);
			//獲取值,因?yàn)間et只能獲取一個(gè)值,而這里是多選框,所以這里使用getAll方法
			let hoppy1 = formData.getAll('hoppy');
			console.log(hoppy1);
			//頁面數(shù)據(jù)不進(jìn)行提交,只是進(jìn)行測(cè)試
			return false;
		}
</script>

到此這篇關(guān)于JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata)的文章就介紹到這了,更多相關(guān)js獲取表單數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論