CODEWITHSUNDEEP
javascripthtmltextbox
Ahmad Farid
Ahmad Farid

Reputation: 14774

How to access an HTML textbox from javascript?

How to access an HTML textbox by a javascript function?

Upvotes: 8

Views: 93150

Answers (5)

Jonathon Oates
Jonathon Oates

Reputation: 2952

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!

Upvotes: 6

Ivo Wetzel
Ivo Wetzel

Reputation: 46745

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

Upvotes: 6

Rich
Rich

Reputation: 3821

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>

Upvotes: 11

tomsseisums
tomsseisums

Reputation: 13367

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

Upvotes: 5

Yishai Landau
Yishai Landau

Reputation: 630

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

Upvotes: 4

Related Questions