Home > Developer > JavaScript
Although <input type= "text"/> and <textarea/> are different elements, they all support the same feature to get the text contained within the text box. Consider the following examples:
<title>retrieying a Textbox Value example</title>
<script type= "Text/javascript" >
function GetValues () {
var Otextbox1=document.getelementbyid ("Txt1");
var Otextbox2=document.getelementbyid ("Txt2");
Alert ("The value of Txt1 is" "+otextbox1.value+" "N" +
"The value of Txt2 is" "+otextbox2.value+" "");
}
</script>
<body>
<input type= "text" size= "a" id= "Txt1"/><br/>
<textarea rows= "5" cols= "a" id= "txt2" ></textarea><br/>
<input type= "button" value= "Get Values" onclick= "getValues ()"/>
</body>
This example shows two text boxes, one for a single line and one for multiple lines, and a button. When you click the button, a warning box appears showing the contents of each text box.
You can also enter some content in two text boxes, and then click the button.
Because the value attribute is a string, you can use the attributes and methods of any string. For example, you can use the length attribute to get the text in a text box:
<title>retrieving a Textbox Length example</title>
<script type= "Text/javascript" >
function Getlengths () {
var Otextbox1=document.getelementbyid ("Txt1");
var Otextbox2=document.getelementbyid ("Txt2");
Alert ("The length of Txt1 is" +otextbox1.value.length+ "n"
+ "The length of Txt2 is" +otextbox2.value.length);
}
</script>
<body>
<input type= "text" size= "" "Id=" Txt1 "/><br/>
<textarea rows= "5" cols= "a" id= "txt2" ></textarea><br/>
<input type= "button" value= "Get Lengths" onclick= "getlengths ()"/>
</body>
In this example, the length attribute of value is used to determine the number of characters in each text box.
This value attribute can also be used to set new content for a text box:
<title>changing a Textbox Value example</title>
<script type= "Text/javascript" >
function Setvalues () {
var Otextbox1=document.getelementbyid ("Txt1");
var Otextbox2=document.getelementbyid ("Txt2");
Otextbox1.value= "Fitst textbox";
Otextbox2.value= "Second TextBox";
}
</script>
<body>
<input type= "text" size= "" "Id=" Txt1 "/><br/>
<textarea rows= "5" cols= "a" id= "txt2" ></textarea><br/>
<input type= "button" value= "Set Values" onclick= "setvalues ()"/>
</body>
In this example, click the button to set the first text box to the "primary TextBox" and the second text box to "second TextBox."
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
