JavaScript はテキストボックスの値を取得する
このチュートリアルでは、JavaScript テキストボックスの値を取得するためのテキスト値プロパティと jQuery val()関数について説明します。
text value プロパティは、入力フィールドの value 属性の値を返すか設定するために使用されます。value 属性は、入力テキストボックスの初期値を表示します。ユーザー定義値またはデフォルト値を持つことができます。
jQuery の val() メソッドは、フォーム要素の値を取得するためのものです。ここで、form 要素は、input、textarea、および select 要素を意味します。空のコレクションで呼び出された場合は、undefined を返します。val() 関数は、選択した要素の value 属性の値を設定または返します。
この関数を使用すると、一致したすべての要素に value 属性の値を設定し、最初に一致した要素の value 属性の値を返すことができます。この関数は主に HTML フォーム要素で使用されることを忘れないでください。
HTML コードはすべての例（<form> 要素を使用する例を除く）で同じままですが、JavaScript コードはさまざまな方法を実践するために変更され続けます。
HTML コード：
<!DOCTYPE html>
<html>
<head>
<title> Learning JavaScript Get Textbox Value</title>
</head>
<body>
Full Name: <input type="text" id="fullName" name="fullName" value="Mehvish Ashiq">
<button type="button" onclick="nameFunction()">Submit</button>
<p id="displayName"></p>
</body>
</html>
JavaScript テキストボックスの値を取得するさまざまな方法
JavaScript テキストボックスの値を取得するために、さまざまな JavaScript コードスニペットを以下に示します。
function nameFunction() {
var element = document.getElementById('fullName').value;
document.getElementById('displayName').innerHTML = element;
}
出力：
テキストボックスの値を取得するために学習している最初のメソッドは、document.getElementById() です。特定の値を持つ id 属性を持つ最初の要素（ここでは fullName）を選択し、.value プロパティを使用してその値を取得し、それを element 変数に保存します。document.getElementById() は、id の値 displayName を持つ要素のコンテンツを変更するために再度使用されます。コンテンツを更新するには、.innerHTML プロパティを使用します。
function nameFunction() {
// first element in DOM (index 0) with name="fullName"
var element = document.getElementsByName('fullName')[0].value
document.getElementById('displayName').innerHTML = element;
}
出力：
上記の JavaScript コードは、document.getElementByName を使用して、指定された名前（このインスタンスでは fullName）を持つすべての要素のリストを取得します。インデックス 0 の要素の値は、すべての要素のリストから選択されます。これは、要素に id 属性がない場合にも使用できます。
function nameFunction() {
document.getElementById('displayName').innerHTML =
document.forms[0].elements[0].value;
}
出力：
上記のコードは、id の値が displayName である要素のコンテンツを変更し、インデックス 0 から受け取った値を割り当てます。インデックスごとに値を取得するには、HTML ファイルに <form> 要素が必要です。
function nameFunction() {
document.getElementById('displayName').innerHTML = $('input:text').val();
}
出力：
上記のコードスニペットは、JavaScript テキストボックスの値にアクセスするために使用される jQuery メソッド val() を示しています。このメソッドは、タイプが text である最初の input 要素の値を取得します。<head> タグに jQuery を含めることを忘れないでください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
