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に値を取得するにはどうすればよいですか？

（フォーム要素内に入力要素をラップせずに）入力テキストボックスの値を直接取得するには、さまざまな方法があります。

方法1：

document.getElementById('textbox_id').value 目的のボックスの値を取得する

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

注：メソッド2、3、4、6は要素のコレクションを返すため、[whole_number]を使用して目的のオカレンスを取得します。最初の要素のために、使用[0]は、第1の使用のための1、など...

方法2：

document.getElementsByClassName('class_name')[whole_number].valueライブ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 ライブノードリストも返します

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

方法5：

document.querySelector('selector').valueCSSセレクターを使用して要素を選択する強力な機能を使用します

たとえば、 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セレクターを使用しますが、そのセレクターを持つすべての要素を静的ノードリストとして返します。

たとえば、 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. 静的コレクションとライブコレクションの違いはここをクリックしてください
3. NodeListとHTMLCollectionの違いはここをクリック

//creates a listener for when you press a key
window.onkeyup = keyup;

//creates a global Javascript variable
var inputTextValue;

function keyup(e) {
  //setting your input text to the global Javascript Variable for every key press
  inputTextValue = e.target.value;

  //listens for you to press the ENTER key, at which point your web address will change to the one you have input in the search box
  if (e.keyCode == 13) {
    window.location = "http://www.myurl.com/search/" + inputTextValue;
  }
}

codepenでこの機能を確認してください。

次のように入力を格納する変数を作成します。

var input = document.getElementById("input_id").value;

次に、変数を使用して入力値を文字列に追加します。

= "Your string" + input;

次のように入力できるはずです。

var input = document.getElementById("searchTxt");

function searchURL() {
     window.location = "http://www.myurl.com/search/" + input.value;
}

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

これを行うにはもっと良い方法があると確信していますが、これはすべてのブラウザーで機能するようで、JavaScriptの理解、作成、改善、編集には最小限の知識が必要です。

また、次のようにタグ名で呼び出すこともできます。form_name.input_name.value; つまり、特定のフォームで特定の入力の特定の値を取得できます。

これをお試しください

<input type="text" onkeyup="trackChange(this.value)" id="myInput">
<script>
function trackChange(value) {
    window.open("http://www.google.com/search?output=search&q=" + value)
}
</script>

ChromeおよびFirefoxでテスト済み：

要素IDで値を取得します。

<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">

フォーム要素に値を設定します。

<form name="calc" id="calculator">
  <input type="text" name="input">
  <input type="button" value="Set Value" onclick="calc.input.value='Set Value'">
</form>

https://jsfiddle.net/tuq79821/

JavaScript計算機の実装もご覧ください。http：//www.4stud.info/web-programming/samples/dhtml-calculator.html

@ bugwheels94からの更新：この方法を使用する場合は、この問題に注意してください。

入力フィールドが多い場合は、onkeyupを使用できます。あなたが4つまたはinput.thenを持っていると仮定する document.getElementById('something').valueと、迷惑です。入力フィールドの値を取得するには、4行を書き込む必要があります。

したがって、keyupまたはkeydownイベントでオブジェクトに値を格納する関数を作成できます。

例：

<div class="container">
    <div>
        <label for="">Name</label>
        <input type="text" name="fname" id="fname" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Age</label>
        <input type="number" name="age" id="age" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Email</label>
        <input type="text" name="email" id="email" onkeyup=handleInput(this)>
    </div>
    <div>
        <label for="">Mobile</label>
        <input type="number" name="mobile" id="number" onkeyup=handleInput(this)>
    </div>
    <div>
        <button onclick=submitData()>Submit</button>
    </div>
</div>

javascript：

<script>
    const data={ };
    function handleInput(e){
        data[e.name] = e.value;
    }
    function submitData(){
        console.log(data.fname); //get first name from object
        console.log(data); //return object
    }
</script>

form.elementsを使用して、フォーム内のすべての要素を取得できます。要素にIDがある場合、.namedItem（ "id"）で見つけることができます。例：

var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;

ソース：w3schools

あなたinputがにいてform、送信後に価値を得たい場合は、次のようにすることができます

<form onsubmit="submitLoginForm(event)">
    <input type="text" name="name">
    <input type="password" name="password">
    <input type="submit" value="Login">
</form>

<script type="text/javascript">

    function submitLoginForm(event){
        event.preventDefault();

        console.log(event.target['name'].value);
        console.log(event.target['password'].value);
    }
</script>

この方法の利点：ページに入力と情報用の2 がある例。 formsenderreceiver

form値を取得するために使用しない場合 -andのように、各フィールドに
2つの異なるid（またはtagor name...）を 設定できます。そして、...- 2つの入力に同じ値を設定した場合、その後（または.. 。）0または1はまたはであることを覚えておく必要があります。後でhtml の2の順序を変更した場合は、このコードをもう一度確認する必要がありますsender-namereceiver-namesender-addressreceiver-address
getElementsByNamegetElementsByTagNamesenderreceiverform

場合は、あなたが使用しform、その後、あなたが使用することができname、address...

<input id="new" >
    <button  onselect="myFunction()">it</button>    
    <script>
        function myFunction() {
            document.getElementById("new").value = "a";    
        }
    </script>

単純なjs

function copytext(text) {
    var textField = document.createElement('textarea');
    textField.innerText = text;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand('copy');
    textField.remove();
}

あなたは値を読むことができます

searchTxt.value

function searchURL() {
   let txt = searchTxt.value;
   console.log(txt);
   // window.location = "http://www.myurl.com/search/" + txt; ...
}

document.querySelector('.search').addEventListener("click", ()=>searchURL());

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

<button class="search">Search</button>

jQueryを使用している場合は、プラグインformInteractを使用して、次のようにする必要があります。

// Just keep the HTML as it is.

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

ページの下部にこのプラグインファイルを含めて、次のコードを記述します。

// Initialize one time at the bottom of the page.
var search= $("#searchTxt).formInteract();

search.getAjax("http://www.myurl.com/search/", function(rsp){
    // Now do whatever you want to with your response
});

または、パラメータ化されたURLを使用する場合は、次のようにします。

$.get("http://www.myurl.com/search/"+search.get().searchTxt, {}, function(rsp){
    // Now do work with your response;
})

ここにプロジェクトへのリンクがあります https://bitbucket.org/ranjeet1985/forminteract

このプラグインは、フォームの値の取得、フォームへの値の入力、フォームの検証など、さまざまな目的に使用できます。プロジェクトのindex.htmlファイルにコードの例がいくつかあります。

もちろん私はこのプロジェクトの作者であり、誰でもそれをより良くすることを歓迎します。