教你JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata)
在文章正式開始之前呢,先介紹一個(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)文章
JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能
這篇文章主要介紹了JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能,本文通過實(shí)例代碼給大家分享實(shí)現(xiàn)思路,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12AutoJs4.4.1免費(fèi)版快速接通vscode調(diào)試腳本的操作方法
這篇文章主要介紹了AutoJs4.4.1免費(fèi)版快速接通vscode進(jìn)行調(diào)試腳本,首先下載AutoJs并安裝,下載完成后,將2個(gè)apk文件拷貝到手機(jī)安裝即可,接下來需要安裝插件,本文分步驟給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10JavaScript設(shè)計(jì)模式之抽象工廠模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之抽象工廠模式介紹,抽象工廠模式就是對(duì)功能類單獨(dú)創(chuàng)建工廠類,這樣就不必修改之前的代碼,又?jǐn)U展了功能,需要的朋友可以參考下2014-12-12js實(shí)現(xiàn)網(wǎng)頁定位導(dǎo)航功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁定位導(dǎo)航功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03BootStrap3學(xué)習(xí)筆記(一)之網(wǎng)格系統(tǒng)
本文給大家介紹BootStrap3網(wǎng)格系統(tǒng)的相關(guān)知識(shí),本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05純JavaScript實(shí)現(xiàn)實(shí)時(shí)反饋系統(tǒng)時(shí)間
這篇文章主要介紹了純JavaScript實(shí)現(xiàn)實(shí)時(shí)反饋系統(tǒng)時(shí)間的相關(guān)資料,需要的朋友可以參考下2017-10-10JS中confirm,alert,prompt函數(shù)區(qū)別分析
JS中confirm,alert,prompt函數(shù)使用區(qū)別有哪些呢?2011-01-01