[解決済み] JavaScriptでテキスト入力フィールドの値を取得するにはどうすればよいですか？

質問

JavaScriptを使った検索をやっています。フォームを使いたいのですが、私のページの他の部分を台無しにしてしまいます。私はこの入力テキストフィールドを持っています。

<input name="searchTxt" type="text" maxlength="512" id="searchTxt" class="searchField"/>

そして、これが私のJavaScriptのコードです。

<script type="text/javascript">
  function searchURL(){
    window.location = "http://www.myurl.com/search/" + (input text value);
  }
</script>

テキストフィールドの値をJavaScriptに取り込むには？

どのように解決するのですか？

入力されたテキストボックスの値を直接（form要素の中にinput要素を包み込まずに）取得する方法はいろいろあります。

方法1:

document.getElementById('textbox_id').value の値を取得します。 希望するボックス

例えば document.getElementById("searchTxt").value;

注 方法2,3,4,6は要素の集まりを返すので、目的の出現を得るために[whole_number]を使用します。最初の要素には、[0]を使用します。 2つ目には 1 といった具合に。

方法2:

使用方法 document.getElementsByClassName('class_name')[whole_number].value これは、Live HTMLCollection を返します。

例えば document.getElementsByClassName("searchField")[0].value; これがページ内の最初のテキストボックスである場合。

方法3:

使用方法 document.getElementsByTagName('tag_name')[whole_number].value これもまた、ライブの HTMLCollection を返します。

例えば document.getElementsByTagName("input")[0].value; このテキストボックスがページ内の最初のテキストボックスである場合。

方法4:

document.getElementsByName('name')[whole_number].value これもまた、生きているNodeListを返します。

例えば document.getElementsByName("searchTxt")[0].value; これが、あなたのページで 'searchtext' という名前の最初のテキストボックスである場合。

方法5:

強力な document.querySelector('selector').value これは、CSS セレクタを使用して要素を選択するものです。

例えば document.querySelector('#searchTxt').value; idで選択
document.querySelector('.searchField').value; クラスで選択
document.querySelector('input').value; タグ名で選択
document.querySelector('[name="searchTxt"]').value; 名前で選択

方法6:

document.querySelectorAll('selector')[whole_number].value も CSS セレクタを使用して要素を選択しますが、そのセレクタを持つすべての要素を静的な Nodelist として返します。

例えば document.querySelectorAll('#searchTxt')[0].value; idで選択
document.querySelectorAll('.searchField')[0].value; クラスで選択
document.querySelectorAll('input')[0].value; タグ名で選択
document.querySelectorAll('[name="searchTxt"]')[0].value; 名前で選択

サポート

Browser          Method1   Method2  Method3  Method4    Method5/6
IE6              Y(Buggy)   N        Y        Y(Buggy)   N
IE7              Y(Buggy)   N        Y        Y(Buggy)   N
IE8              Y          N        Y        Y(Buggy)   Y
IE9              Y          Y        Y        Y(Buggy)   Y
IE10             Y          Y        Y        Y          Y
FF3.0            Y          Y        Y        Y          N    IE=Internet Explorer
FF3.5/FF3.6      Y          Y        Y        Y          Y    FF=Mozilla Firefox
FF4b1            Y          Y        Y        Y          Y    GC=Google Chrome
GC4/GC5          Y          Y        Y        Y          Y    Y=YES,N=NO
Safari4/Safari5  Y          Y        Y        Y          Y
Opera10.10/
Opera10.53/      Y          Y        Y        Y(Buggy)   Y
Opera10.60
Opera 12         Y          Y        Y        Y          Y

お役立ちリンク集

1. これらのメソッドのサポートとバグや詳細については、こちらをご覧ください。
2. 静的コレクションとライブコレクションの違い Click Here
3. NodeListとHTMLCollectionの違い click here