Multiple HTML Input Elements with same name in JavaScript, ASP and PHP


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.

Advertisements

JavaScript utility popup boxes for better user interaction


JavaScript utility popup boxes for better user interaction:

 

  1. Alert Box – JavaScript pop up to display any information or error messages to the user.As JavaScript is a client side scripting language we can use this alert box to interact with the user.You can raise the alert message through some events or it can be used in debugging purpose.

    It can be used as a great debugging tool in Classic ASP or PHP or in large and complicated JavaScript.

    Image of Javascript Alert Popup box

    Javascript Alert Box

     

<HTML>

<HEAD>

<TITLE> Alert Test </TITLE>

<script type=”text/javascript”>

function showTheAlert(){

        alert(“Hi I have been called for”);

}

 

function showAlertWithMessage(msg){

        alert(“The message is : ” + msg );

}

 

</script>

</HEAD>

 

<BODY>

<h1>Simple Atert test</h1>

<input type=”button” name=”showAlert” onclick=”javascript:showTheAlert()”
value=”Show me the alert” />

 

<br/>

<h1>Custom alert with message</h1>

<input type=”text” name=”msgAlert” id=”msgAlert”/>

<input type=”button” name=”showMsgAlert” onclick=”javascript:showAlertWithMessage(document.getElementById(‘msgAlert’).value)” value=”Show me the alert” />

 

</BODY>

</HTML>

 

  1. Confirm Box: This is a very good JavaScript pop up box which confirms user action.Such as if you want the user to confirm his action like deletion of some important data this pop up box can be used. Image of Javascript confirm message box

    Jacascript Confirm Message box

     

<HTML>

<HEAD>

<TITLE> Confirm Test </TITLE>

<script type=”text/javascript”>

function ConfirmTest(){

        var conf = confirm(“Are you sure want to Perform this action ??”);

 

        if(true == conf){

                alert(“You have pressed the YES button”);

        }else{

                alert(“You have pressed the CANCEL button”);

        }

}

 

</script>

</HEAD>

 

<BODY>

<br/>

<h1>Confirm pop up box test</h1>

<input type=”button” name=”confrmBtn” onclick=”javascript:ConfirmTest()” value=”Show me the alert” />

</BODY>

</HTML>

  

  1. Prompt Box: This box is very useful if you want the user to input some text at the runtime or as a result of some action.Suppose you may want the user to enter his transaction password if he is performing some important action.Then this Prompt popup box may come handy.

    Notation of prompt is:

    prompt(“Your message”, ”default value you want to display”);

    If you want to display some default values you can specify that also by setting the second argument of this popup box.

      

<HTML>

<HEAD>

<TITLE>Prompt for user input Test </TITLE>

<script type=”text/javascript”>

function PromptTest(){

        var age = prompt(“Enter your age”,”99″);

       

        if(null != age && age != “undefined”){  

                alert(“Your age is: ” + age);

    }else{

                alert(“You have pressed the CANCEL button dear”);

    }

}

 

</script>

</HEAD>

 

<BODY>

<br/>

<h1>Prompt pop up box test</h1>

<h3>Click this button to enter your age </h3>

<input type=”button” name=”confrmBtn” onclick=”javascript:PromptTest()” value=”Show me the alert” />

 

</BODY>

</HTML>

 I think this popup boxes and the tutorial can help you to start exploring the technology of the web and JavaScript.

 Happy JavaScripting 🙂