Menu
How to access an HTML textbox by a javascript function?
788
To enter the text into a textbox using javascript, we have two ways: FindElement(Javascript) + EnterText (Javascript) FindElement(WebDriver) + EnterText (Javascript)
Which is the line that helps to retrieve a textbox value in a Javascript function? The line document. getElementById(“firstname”). value accesses the text box with an id of firstname and retrieves the value which the user has entered into this text box.
In JavaScript, text is displayed in elements. This tutorial focuses on the use of the paragraph or '<p>' element. There are multiple ways to display text on a web page in JavaScript, the easiest is: document.
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>
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
24
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!
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
