教你JS更簡單的獲取表單中數(shù)據(jù)(formdata)
在文章正式開始之前呢,先介紹一個知識點,那就是var和let的區(qū)別,查看了各路大佬的文章,也經(jīng)過各種嘗試,最終得出的結(jié)果是,let聲明的變量只在該變量對應(yīng)的塊中有效,有點局部變量的意思,而且let相對來說更加的嚴(yán)格。
正式開始我們的formdata之路,曾經(jīng)稚嫩的我們在取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.準(zhǔn)備為其綁定事件 submit1.onclick = function(){alert(name1)}//為submit綁定點擊事件,將name的值在也頁面彈窗顯示 </script>
上面這種方法獲取表單的值,不僅麻煩,而且代碼量大,我們一起來看看更快更簡潔的方法
第一種:獲取普通input中的值
<!--onsubmit事件是在提交表單時觸發(fā)--> <!-- return 一個函數(shù):是指當(dāng)函數(shù)的返回值位false時,表單不提交,為true時提交--> <form action="" method="post" target="_blank" onsubmit="return mySubmit(this)"> <!--mySumit函數(shù)中的參數(shù)this是指form調(diào)用該函數(shù)時會將form傳入函數(shù)中--> <input type="text" name="username" > <input type="submit" name="submit" > </form> <script> function mySubmit(form){ <!--定義formData對象--> let formData = new FormData(form); <!--利用fromData對象的get方法獲取表單數(shù)據(jù)--> 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); //頁面數(shù)據(jù)不進行提交,只是進行測試 return false; } </script>
到此這篇關(guān)于JS更簡單的獲取表單中數(shù)據(jù)(formdata)的文章就介紹到這了,更多相關(guān)js獲取表單數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能
這篇文章主要介紹了JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能,本文通過實例代碼給大家分享實現(xiàn)思路,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12AutoJs4.4.1免費版快速接通vscode調(diào)試腳本的操作方法
這篇文章主要介紹了AutoJs4.4.1免費版快速接通vscode進行調(diào)試腳本,首先下載AutoJs并安裝,下載完成后,將2個apk文件拷貝到手機安裝即可,接下來需要安裝插件,本文分步驟給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10BootStrap3學(xué)習(xí)筆記(一)之網(wǎng)格系統(tǒng)
本文給大家介紹BootStrap3網(wǎng)格系統(tǒng)的相關(guān)知識,本文介紹的非常詳細(xì),具有參考借鑒價值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05純JavaScript實現(xiàn)實時反饋系統(tǒng)時間
這篇文章主要介紹了純JavaScript實現(xiàn)實時反饋系統(tǒng)時間的相關(guān)資料,需要的朋友可以參考下2017-10-10JS中confirm,alert,prompt函數(shù)區(qū)別分析
JS中confirm,alert,prompt函數(shù)使用區(qū)別有哪些呢?2011-01-01