How to access an HTML textbox from javascript?

javascript html textbox

91,658

Solution 1

Set ID property on text box and use document.getElementById() function... Example below:

<html>
<head>
<script type="text/javascript">

function doSomethingWithTextBox()
{
  var textBox = document.getElementById('TEXTBOX_ID');
  // do something with it ...

}

</script>
</head>

<body>

<input type="text" id="TEXTBOX_ID">

</body>
</html>

Solution 2

First you need to be able to get a DOM(Document Object Model) reference to the textbox:

<input type="text" id="mytextbox" value="Hello World!" />

Notice the id attribute, the textbox now has the id mytextbox.

Next step is to get the reference in JavaScript:

var textbox = document.getElementById('mytextbox'); // assign the DOM element reference to the variable "textbox"

This will retrieve a HTML Element by its id attribute. Note that those id's need to be unique, so you can't have two textboxes with the same id.

Now the final step is to retrieve the value of the textbox:

alert(textbox.value); // alert the contents of the textbox to the user

The value property contains the contents of the textbox, and that's it!

For more reference you might want to check out some stuff over at MDC:
GetElementByID Reference
Input Element Reference
A general overview of the DOM

Solution 3

Very simply, try this:

<!doctype html>
<html>
    <head>
        …
    </head>
<body>
    <form>
        <input id="textbox" type="text" />
    </form>
    <script>
        var textboxValue = document.getElementById("textbox").value;
    </script>
</body>

The variable textboxValue would equal whatever you've typed into the textbox.

Remember you must place your script, if written as simply as this, after the textbox (input field) appears in your HTML, otherwise when the page first loads you'd get an error, because the script is looking for input field that has not yet been created by the browser.

I hope this helps!

Solution 4

Give your textbox an id attribute, and after, fetch it with document.getElementById('<textbox id>').

Solution 5

document.getElementById('textboxid').value or document.formname.textboxname.value

View more solutions

91,658

Author by

Ahmad Farid

Updated on July 17, 2022

Comments

Ahmad Farid almost 2 years

How to access an HTML textbox by a javascript function?
Jonathon Oates over 13 years

For conciseness, this would not actually get the value of the textbox (TEXTBOX_ID) unless you called the function doSomethingWithTextBox(). You would need to call the function doSomethingWithTextBox() after your input tag (TEXTBOX_ID) otherwise doSomethingWithTextBox() would be looking for a textbox that does not yet exist, and you;d get an error.