How can I use JavaScript to get the value of a text input field?

Problem

I’m working on a JavaScript search. I’d use a form, but that might break something else on my page. I have this input text field:

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

My JavaScript code is as follows:

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

How can I obtain the text field’s value into JavaScript?

Asked by user979331

Solution #1

There are several ways to access the value of an input textbox without having to enclose the input element in a form element:

Method 1:

Method 2:

Method 3:

Method 4:

Method 5:

Method 6:

Support

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

Useful links

Answered by bugwheels94

Solution #2

//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;
  }
}

In codepen, you can see how this works.

Answered by maudulus

Solution #3

I’d make a variable to hold the data like this:

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

Then I’d simply add the input value to the string using the variable.

= input + “your string”;

Answered by Vadim Tatarnikov

Solution #4

You should be able to type the following:

There are probably better ways to accomplish this, but this one appears to work in all browsers and requires only a basic understanding of JavaScript to create, modify, and edit.

Answered by Fredrik A.

Solution #5

You can also call by tag names, such as form name.input name.value, to get the specific value of a determined input in a particular form.

Answered by user3768564

Post is based on https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript