JavaScript で HTML フォーム値を取得する
JavaScript では、特定の入力要素の id 属性を使用して値を取得したり、name 属性をトリガーして値にアクセスしたりできます。
どちらの規則も、ユーザーから生データをフェッチするために進みます。技術的には、目標はユーザーからのすべての入力を取得し、プロセスが機能していることを確認することです。
ここでは、HTML DOM、別名 document.forms を使用して、HTML フォームからすべての要素を取得します。HTML 要素と属性を操作するために利用できるメソッドの簡単な紹介はここです。
また、この例では、要素の id をカジュアルな方法で識別して、そこから情報を引き出します。
JavaScript で document.forms を使用して HTML フォーム値を取得する
document.forms メソッドは、name 属性を使用してフォームとその要素を検索します。戦術的には、フォームからのすべての値は、この開始方法を通過します。
select 要素の後に複数の option 要素が続きます。そして、そこから好みを選択し、値を分離します。
後で、document.forms が開始されると、分離された値を取得します。コードブロックをチェックして、適切に視覚化してみましょう。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<form name="form">
<select name="fruit" id="fruits">
<option value="0">Select Fruit</option>
<option value="mango">Mango</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<button type = "submit">Hit</button>
</form>
<p id="print"></p>
</body>
</html>
var form = document.forms['form'];
form.onsubmit = function(e) {
e.preventDefault();
var select = document.form.fruit.value;
console.log(select);
document.getElementById('print').innerHTML = select.toUpperCase();
}
出力：
ご覧のとおり、document.forms メソッドを使用して HTML フォーム値と対話する form オブジェクトは、すべての要素を返します。
onsubmit メソッドは、その選択された値を操作するためのさらなるアクションに使用されます。この場合、select オブジェクトは、form および select 要素の対応する name 属性を持つ目的の値を取ります。
後で、値を大文字でページに出力しました。
id を使用して JavaScript の HTML フォーム値にアクセスする
この例では、documnet.getElementById querySelector を使用してフォーム入力を駆動します。
この形式を使用する機能は一般的であり、document.forms メソッドと同様に機能します。したがって、次のコード行はプレビューを示しています。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<form name="form" id="forms">
Enter name:
<input type="text" id="name">
<input type="button" value=" Click Up">
</form>
<p id="print"></p>
</body>
</html>
var form = document.getElementById('forms');
form.onclick = function(e) {
e.preventDefault();
var name = document.getElementById('name').value;
console.log(name);
document.getElementById('print').innerHTML = name.toUpperCase();
}
出力：
JavaScript のオブジェクト form によってアクセスされるフォーム、および入力の値も .value メソッドから派生しました。
前の例では、button 要素を使用して入力を送信し、ここでは入力タイプボタンを使用して送信を実行しました。
ここでの違いは、onsubmit と onclick だけで、どちらも同じように機能します。
