JavaScript get input text value

Question

I am working on kinda a search with JavaScript, I would use a form but it messes up something else on my page. I have this input text field:

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

and this is my JavaScript:

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

How do I get the value from the text field into JavaScript?

the short answer is inputElement.value. The answers below show different ways to get hold of a reference to a specific inputElement — Jonny Leeds, Feb 6 at 12:57

Ankit · Accepted Answer · 2015-06-12 21:07:07Z

There are various methods to get input textbox value directly (without wrapping the input element inside a form element):

Method 1:

document.getElementById('textbox_id').value to get the value of desired box

Eg. document.getElementById("searchTxt").value;

Note : Method 2,3,4 and 6 returns a collection of elements, so use [whole_number] to get the desired occurrence, for first element use [0] and for second one use 1 and so on...

Method 2:

Use document.getElementsByClassName('class_name')[whole_number].value which returns a Live HTMLCollection

Eg. document.getElementsByClassName("searchField")[0].value;if this is the first textbox in your page.

Method 3:

Use document.getElementsByTagName('tag_name')[whole_number].value which also returns a live HTMLCollection

Eg. document.getElementsByTagName("input")[0].value; ,if this is the first textbox in your page.

Method 4:

document.getElementsByName('name')[whole_number].value which also >returns a live NodeList

Eg. document.getElementsByName("searchTxt")[0].value; if this is the first textbox with name 'searchtext' in your page.

Method 5:

Use powerful document.querySelector('selector').value which uses CSS selector to select element

Eg. document.querySelector('#searchTxt').value; selected by id document.querySelector('.searchField').value; selected by class document.querySelector('input').value; selected by tagname document.querySelector('[name="searchTxt"]').value; selected by name

Method 6:

document.querySelectorAll('selector')[whole_number].value which also uses CSS selector to select elements but it returns all elements with that selector as a static Nodelist.

Eg. document.querySelectorAll('#searchTxt')[0].value; selected by id document.querySelectorAll('.searchField')[0].value; selected by class document.querySelectorAll('input')[0].value; selected by tagname
document.querySelectorAll('[name="searchTxt"]')[0].value; selected by name

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
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

Useful links

IE8 supports QSA as far as I can see, it just doesn't support CSS3 selectors in the selector string. — Fabrício Matté, Jun 22 '13 at 4:02
@FabrícioMatté i just checked here quirksmode.org/dom/tests/basics.html#querySelectorAll and it told me that it doesnot — Ankit, Jun 22 '13 at 4:10
Interesting. Simple test in IE8 for Win7 shows that querySelector is supported jsfiddle.net/syNvz/show and QSA too jsfiddle.net/syNvz/2/show — Fabrício Matté, Jun 22 '13 at 4:13
When i run your fiddle it shows red background,let me check if i am running it on compatibility view — Ankit, Jun 22 '13 at 4:15

maudulus · Answer 2 · 2015-03-04 20:55:09Z

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

See this functioning in codepen.

Fredrik A. · Answer 3 · 2014-06-01 22:25:42Z

You should be able to type:

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

<script>
    var input = document.getElementById("searchTxt");

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

I'm sure there are better ways to do this, but this one seems to work across all browsers, and it requires minimal understanding of JS to make/improve/edit.

Deepend · Answer 4 · 2014-06-23 18:31:38Z

up vote 1 down vote

Also you can, call by tags names, like this: form_name.input_name.value; So you will have the specific value of determined input in a specific form.

edited Jun 23 '14 at 18:31

Deepend
59852351

answered Jun 23 '14 at 18:10

user3768564
164

add a comment |

Hari Das · Answer 5 · 2013-06-11 09:32:41Z

up vote 0 down vote

Try this one

<input type="text" onKeyUP="trackChange(this.value)" id="myInput">
<script>
function trackChange(value)
{

window.open("http://www.google.co.in/search?output=search&q="+value)

}
</script>

answered Jun 11 '13 at 9:32

Hari Das
454715

add a comment |

ankon · Answer 6 · 2015-06-03 15:09:33Z

if you are using jquery then by using plugin formInteract, you just need to do this.

//just keep the html as it is.

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

at bottom of the page just include this plugin file and write this code.

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

or if using parameterized url then use this.

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

here is the link to project https://bitbucket.org/ranjeet1985/forminteract

You can use this plugin for many purposes like getting the value of a form, putting values into a form, validation of forms and many more. You can see some example of code in the index.html file of the project.

Of course i am author of this project and all are welcome to make it better.

You should probably mention that this is your own personal plugin. — Johannes, May 18 at 16:23

Vadim Tatarnikov · Answer 7 · 2015-06-04 07:12:10Z

up vote 0 down vote

I would create a variable to store the input like this:

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

And then I would just use the variable to add the input value to the string.

= "Your string" + input;

answered Jun 4 at 7:12

Vadim Tatarnikov
12

add a comment |

asked	2 years ago
viewed	477404 times
active	20 days ago

current community

your communities

more stack exchange communities

JavaScript get input text value

7 Answers 7

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript dom input or ask your own question.

Linked

Hot Network Questions

current community

your communities

more stack exchange communities

JavaScript get input text value

7 Answers 7

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript dom input or ask your own question.

Linked

Related

Hot Network Questions