JavaScript 的神通廣大相信大家都會認同,本篇從獲取表單數(shù)據(jù)來說起。
我們以前在獲取 Form 表單值得時候都是這樣的:
<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事件是在提交表單時觸發(fā)-->
<!-- return 一個函數(shù):是指當函數(shù)的返回值位false時,表單不提交,為true時提交-->
<form action="" method="post" target="_blank" onsubmit="return mySubmit(this)">
<!--mySumit函數(shù)中的參數(shù)this是指form調用該函數(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>
以上就是小編為您整理的關于 javascript怎么獲取表單 的全部內容。