How do I get the value of text input field using JavaScript?
JavascriptDomHtml InputJavascript Problem Overview
I am working on 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 code:
<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?
Javascript Solutions
Solution 1 - Javascript
There are various methods to get an 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
>
> For example, 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 the first element, use [0], > for the second one use 1, and so on...
Method 2:
> Use
> document.getElementsByClassName('class_name')[whole_number].value which returns a Live HTMLCollection
>
> For example, 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
>
>
>
> For example, 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
>
> For example, document.getElementsByName("searchTxt")[0].value; if this is the first textbox with name 'searchtext' in your page.
Method 5:
> Use the powerful document.querySelector('selector').value which uses a CSS selector to select the element
>
> For example, 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 a CSS selector to select elements, but it returns all elements with that selector as a static Nodelist.
>
> For example, 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
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
Solution 2 - Javascript
//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;
}
}
Solution 3 - Javascript
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;
Solution 4 - Javascript
You should be able to type:
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"/>
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 JavaScript to make, improve, and edit.
Solution 5 - Javascript
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.
Solution 6 - Javascript
<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>
Solution 7 - Javascript
Short
You can read value by 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>
Solution 8 - Javascript
Tested in Chrome and Firefox:
Get value by element id:
<input type="text" maxlength="512" id="searchTxt" class="searchField"/>
<input type="button" value="Get Value" onclick="alert(searchTxt.value)">
Set value in form element:
<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/
Also have a look at a JavaScript calculator implementation: http://www.4stud.info/web-programming/samples/dhtml-calculator.html
UPDATE from @bugwheels94: when using this method be aware of this issue.
Solution 9 - Javascript
You can use onkeyup when you have more input field. Suppose you have four or input.then
document.getElementById('something').value is annoying. we need to write 4 lines to fetch value of input field.
So, you can create a function that store value in object on keyup or keydown event.
Example :
<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>
Solution 10 - Javascript
If your input is in a form and you want to get value after submit you can do like
<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>
Benefit of this way: Example your page have 2 form for input sender and receiver information.
If you don't use form for get value then
- You can set 2 different
id(ortagorname...) for each field likesender-nameandreceiver-name,sender-addressandreceiver-address, ... - If you set same value for 2 input, then after
getElementsByName(orgetElementsByTagName...) you need to remember 0 or 1 issenderorreceiver. Later if you change the order of 2formin html, you need to check this code again
If you use form, then you can use name, address, ...
Solution 11 - Javascript
function handleValueChange() {
var y = document.getElementById('textbox_id').value;
var x = document.getElementById('result');
x.innerHTML = y;
}
function changeTextarea() {
var a = document.getElementById('text-area').value;
var b = document.getElementById('text-area-result');
b.innerHTML = a;
}
input {
padding: 5px;
}
p {
white-space: pre;
}
<input type="text" id="textbox_id" placeholder="Enter string here..." oninput="handleValueChange()">
<p id="result"></p>
<textarea name="" id="text-area" cols="20" rows="5" oninput="changeTextarea()"></textarea>
<p id="text-area-result"></p>
Solution 12 - Javascript
One can use the form.elements to get all elements in a form. If an element has id it can be found with .namedItem("id"). Example:
var myForm = document.getElementById("form1");
var text = myForm.elements.namedItem("searchTxt").value;
var url = "http://www.myurl.com/search/" + text;
Source: [w3schools][1]
[1]: https://www.w3schools.com/jsref/coll_form_elements.asp "w3schools"
Solution 13 - Javascript
<input id="new" >
<button onselect="myFunction()">it</button>
<script>
function myFunction() {
document.getElementById("new").value = "a";
}
</script>
Solution 14 - Javascript
simple js
function copytext(text) {
var textField = document.createElement('textarea');
textField.innerText = text;
document.body.appendChild(textField);
textField.select();
document.execCommand('copy');
textField.remove();
}
Solution 15 - Javascript
function searchURL() {
window.location = 'http://www.myurl.com/search/' + searchTxt.value
}
So basically searchTxt.value will return the value of the input field with id='searchTxt'.