How to access an HTML textbox by a javascript function?
-
Do you mean, to get the value of the text box?Jonathon Oates– Jonathon Oates2010-11-18 10:00:37 +00:00Commented Nov 18, 2010 at 10:00
-
yes exactly. without going back to the server thoughAhmad Farid– Ahmad Farid2010-11-18 10:04:39 +00:00Commented Nov 18, 2010 at 10:04
-
More ways in earlier threadTobias– Tobias2010-11-18 10:07:02 +00:00Commented Nov 18, 2010 at 10:07
Add a comment
|
5 Answers
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>
1 Comment
Jonathon Oates
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.
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
Comments
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!
Comments
Give your textbox an id attribute, and after, fetch it with document.getElementById('<textbox id>').
Comments
document.getElementById('textboxid').value or document.formname.textboxname.value
