Hi,
Some times we came around a tricky situation where we have to use multiple html input elements with same name in our pages and need to tackle them with JavaScript (in client side) or ASP and PHP (server side).
Suppose we have multiple text area elements in a HTML page. The name of these text areas are “txtArea”. And the problem is we need to validate the text lengths in these text boxes as we donot wish the user to enter more than 250 characters.
File: MultipleTextArea.html
<html>
<head>
<title>Multiple Text area Validation</title>
</head>
<body>
<form name=”form1″ method=”post”>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<input type=”submit” name=”Submit” value=”Submit Form”/>
</form>
</body>
</html>
Now here we can see that we have 7 Text Area elements with the same name as “txtArea”. And we want to validate these text areas so that users can not insert more than 255 charaters.
Now to validate this with JavaScript we have to made small changes in the code to add a Validation function and call it on the “onsubmit” method of the Form.
File: MultipleTextArea.html
<html>
<head>
<title>Multiple Text area Validation</title>
<script type=”text/javascript”>
function check(){
var form = document.forms[0];
var txtS = form[“txtArea”];
var len = txtS.length;
for(i=0;i<len;i++)
{
if(txtS[i].value.length > 255)
{
alert(“Please insert less than 255 charecters”);
txtS[i].focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name=”form1″ method=”post” onsubmit=”return check()”>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<input type=”submit” name=”Submit” value=”Submit Form”/>
</form>
</body>
</html>
Now if the Javascript function “check()” we point the text area lot with form[“txtArea”] and form is the only form in this html. We can point to the form as document.forms[0] or document.form .
So now we have all the text areas in the array form[“txtArea”] . We can view the length of the Text Area array as form[“txtArea”].length
To get the text areas one by one we can use a for loop and use txtS[i].value to get the value of the i th text area and txtS[i].value.length to get the length of the value of the i th Text Area.
We can validate the value by using a simple if – else statement.
The Error which might come in this situation : If we wish to populate the text areas programmatically then we may not now how many text areas are in the form. There might a single text area.
If the form contains a single text area then our validation javascript function will not work as needed. As it will generate a Javascript error in this line : var len = txtS.length
As this form holds a single text area the len will be null or we can say undefined.
So if the len is null we can say there is only one text area present, and we can access its value by form[“txtArea”].value and length by form[“txtArea”].value.length
So we have to modify the javascript function as
function check(){
var form = document.forms[0];
var txtS = form[“txtArea”];
var len = txtS.length;
if(null == len){
if(form[“txtArea”].value.length > 255)
{
alert(“Please insert less than 255 charecters”);
form[“txtArea”].focus();
return false;
}
}else{
for(i=0;i<len;i++)
{
if(txtS[i].value.length > 255)
{
alert(“Please insert less than 255 charecters”);
txtS[i].focus();
return false;
}
}
}
return true;
}
Now our Javascript is finalized for our need. Now we just need to get the values properly in our scripting language like ASP and PHP.
ASP Interpretaion of Multiple Input elements with Same Name:
In ASP we have to write a simple code to accomodate our need.
First let us change the file to a ASP file. So the file name will be like MultipleTextArea.asp
The file:
<html>
<head>
<title>Multiple Text area Validation</title>
<script type=”text/javascript”>
function check(){
var form = document.forms[0];
var txtS = form[“txtArea”];
var len = txtS.length;
if(null == len){
if(form[“txtArea”].value.length > 255)
{
alert(“Please insert less than 255 charecters”);
form[“txtArea”].focus();
return false;
}
}else{
for(i=0;i<len;i++)
{
if(txtS[i].value.length > 255)
{
alert(“Please insert less than 255 charecters”);
txtS[i].focus();
return false;
}
}
}
return true;
}
</script>
</head>
<body>
<form name=”form1″ method=”post” onsubmit=”return check()”>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<input type=”submit” name=”Submit” value=”Submit Form”/>
</form>
</body>
</html>
Now after the user has validated all the aext areas and submits the form it will post back to itself.
So at the top of this ASP file we have to write our ASP code to get this form data.
All the text areas will come together delimiting with a comma. So all the values for the input element txtArea will be combined into one single string delimitted by commas (,).
So we can split the value with comma ane iterate through all the values one by one.
The ASP will be like:
<%
myTXT = Request.Form(“txt”) & “,”
‘ADD a comma at the end to split perfectly and get the last value easily
allTXT = split(myTXT,”,”)
‘Now split the values with comma
For i = 0 to ubound(allTXT)-1
‘Set the loop exit criteria to 1 less than the length of the string, as we have added a extra comma
Response.Write(“[” & i & “] = ” & allTXT(i))
‘Print the values one by one
‘Here you canactually do your coding
Next
‘Loop in the for loop
%>
So finally your ASP file will look like:
<%
myTXT = Request.Form(“txt”) & “,”
‘ADD a comma at the end to split perfectly and get the last value easily
allTXT = split(myTXT,”,”)
‘Now split the values with comma
For i = 0 to ubound(allTXT)-1
‘Set the loop exit criteria to 1 less than the length of the string, as we have added a extra comma
Response.Write(“[” & i & “] = ” & allTXT(i))
‘Print the values one by one
‘Here you canactually do your coding
Next
‘Loop in the for loop
%>
<html>
<head>
<title>Multiple Text area Validation</title>
<script type=”text/javascript”>
function check(){
var form = document.forms[0];
var txtS = form[“txtArea”];
var len = txtS.length;
if(null == len){
if(form[“txtArea”].value.length > 255)
{
alert(“Please insert less than 255 charecters”);
form[“txtArea”].focus();
return false;
}
}else{
for(i=0;i<len;i++)
{
if(txtS[i].value.length > 255)
{
alert(“Please insert less than 255 charecters”);
txtS[i].focus();
return false;
}
}
}
return true;
}
</script>
</head>
<body>
<form name=”form1″ method=”post” onsubmit=”return check()”>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<textarea name=”txtArea”></textarea>
<input type=”submit” name=”Submit” value=”Submit Form”/>
</form>
</body>
</html>
Thats all in ASP. I think it will help some body in this big universe 😉
Now We will look at PHP interpretation in the next part.
Useful scripts | Basic and Advanced Day to day used scripts 
hi , thanks for your code, but one piece of advice, please use tag for showing code in wordpress, then it will look better.
Thanks for the advice. I’ll try to follow it 🙂