How to retrieve array values from html form to jsp?

Hi! I am developing an dynamic user interface. I hv developed html forms and i wat to convert it into jsp. Means i just want to retrieve values from html form containing array to jsp page and store them in the session variable. So plz any1 can send me sample code for how to retrive array values from html to jsp.

View Answers

February 18, 2013 at 11:49 AM

Hey Thnx alot.It's nw working.

February 14, 2013 at 12:48 PM

hi friend,

I viewed your code and I found the problem into your code that you are adding the elements into body rather inside the form and I also removed "+i" from

txtLabel[i].id   = "txtLabel+i";
txtLabel[i].name = "txtLabel+i";

Here is your modified code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
     <script>
    function add()
    {
    var txtLabel= new Array();
      for(var i=0;i<2;i++)
       {    
         txtLabel[i] = document.createElement('input');
         txtLabel[i].type = 'text';
         txtLabel[i].id   = "txtLabel";
         txtLabel[i].name = "txtLabel";
         alert(txtLabel[i].name);
         document.getElementById("frm").appendChild(txtLabel[i]);
      }
    }
    </script>
    </head>
    <body>
    <h1>hi</h1>
    <form action="result.jsp" method="get" id="frm">
    <input type="button" onClick="add()" value ="add" />
    <input type="submit" value="Preview"/>
    </form>
    </body>
    </html>

Your result.jsp page is same as it was earlier.

February 12, 2013 at 5:29 PM

Hey thnx for reply.But actually my problem is that i am creating dynamic array of component and tring to retrieve it in jsp page.Here i am posting sample code for html page and jsp page.

first.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>
    <h1>hi</h1>
    <form action="result.jsp" method="get">
    <script>

    function add()
    {
    var txtLabel= new Array();
      for(var i=0;i<2;i++)
       {    
         txtLabel[i] = document.createElement('input');
         txtLabel[i].type = 'text';
         txtLabel[i].id   = "txtLabel" + i;
         txtLabel[i].name = "txtLabel" + i;
         document.body.appendChild(txtLabel[i]);
      }
    }
    </script>
    <input type="button" onClick="add()" value ="add" />
    <input type="submit" value="Preview"/>
    </form>
    </body>
    </html>

    result.jsp

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>
    <%
    // Fetch the name values.

        String[] txtLabel = request.getParameterValues("txtLabel");

        for (int i=0; i < 2; i++)
        {
            out.println(txtLabel[i]);
        }


    %>
    </body>
    </html>

I am doing this but it's nt wrking...so help asap.

February 12, 2013 at 10:52 AM

hi friend,

To get an array values from the html form you can use the getParameterValues() method of ServletRequest interface i.e request.getParameterValues()

For detail tutorial please go through the link

http://www.roseindia.net/jsp/GetParameterValuesMethod.shtml

may this will be helpful for you.

February 20, 2013 at 12:43 PM

hey i hv done changes accordingly in my actual code but still it's nt working. i am posting here my actual coding of 1 html page,it's javascript file and i hv to retrive values array values from that html page to jsp page.here is my code-

config.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Add Components | DUCT - Dynamic UI Creator Tool</title>

<script src="NewFile.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="css/tdCSS.css" /> -->

</head>

<body bgcolor="#E6E6FA">
<form id="frmTable" action="NewFile.jsp" method="get">

<br /><br />

<div id="divLogo" name="divLogo" title="Company Logo" style="color: #FF33CC; width:100px; height:116px; float:left; overflow:auto; margin-bottom:0;"><img src="tcs_logo.gif" /></div>

<div id="divHeader" name="divHeader" style="height:116px; width:1100px; float:left; overflow:auto; background-color:#CC9999; border:1px solid red; font-family: Helvetica; font-size: 12pt;">

    <table id="tblHeader" align="center" cellpadding="10" cellspacing="3" border="1" style="position:absolute;">
    <caption><b>Table of Dyanamic UI Creator Tools</b></caption>

        <tr style="border:1px;">
        <th width="10" ><input type="checkbox" id="chkAll" name="chkAll" onClick="checkAll('chkAll', 'tblTable')" /></th>
        <th width="150">Label    </th>
        <th width="130">Component</th>
        <th width="100">Component Position</th>
        <th width="150">Data Type</th>
        <th width="65" >Region </th>
        <th width="20" >Row </th>
        <th width="250">Data</th>
    </tr>

    </table>

</div>

<div id="divNavigation" name="divNavigation" title="Navigation Menu" style="color: #CC33CC; clear:left; width:100px; height:340px; float:left; overflow:auto; margin-bottom:0;"></div>

<div id="divTable" name="divTable" title="Table of Components" style="border:1px solid red; font-family: Helvetica; font-size: 12pt; color: #FF0066; width:1100px; height:340px; overflow:auto; float:left;">

    <table id="tblTable" align="center" cellpadding="10" cellspacing="3" border="1" style="position:absolute;"></table>

</div>

<div id="divExtra" name="divExtra" title="Blank" style="color: #FF33CC; width:100px; float:left; clear:left; overflow:auto; margin-bottom:0;"></div>

<div id="divButtons" align="center" name="divButtons" style="width:1100px; float:left; overflow:auto; background-color:#CC9999; border:1px solid red; font-family: Helvetica; font-size: 12pt;">

    <input type="button" value="Add Row" onClick="addRow('frmTable','divTable')" />
    <input type="button" value="Delete Row" onClick="delRow('tblTable')" />
    <input type="button" value="Reload" onclick="reloadPage()" />

    <input type="button" onclick="validateRow('divTable')" value="Preview"/>

</div>
 </form>
</body>

</html>

NewFile.js

/***************************************************** Function to Add Rows ********************************************************/

intRows = 0;            // Global variable to keep count of no. of rows in the table
intCols = 8;    
indexNo=0;      // Global variable to keep count of no. of columns in the table
var cell = new Array();
var chkRow = new Array();
var txtLabel= new Array();
var selComp=new Array();
var selPos = new Array();
var selDT=new Array();
var selRgn=new Array();
var txtRowNo=new Array();
var txtData=new Array();
var rowElmt=new Array();
function addRow(frm,elmtId)
{

    var a=frm;
    var b=elmtId;

    var frmElmt = document.getElementById(a);       // Finds 'frm' Area where the table is to be added
    if (frmElmt == null) alert("<frm> Element not found!");

    var divElmt = document.getElementById(b);       // Finds 'div' Area where the table is to be added
    if (divElmt == null) alert("<div> Element not found!");

    var tblElmt = document.getElementById("tblTable");      // Finds 'table' where the table body is to be added
    if (tblElmt == null) alert("<table> Element not found!");

    var tbdElmt = document.createElement("tbody");      // Creates 'table body' to be added to table
    if (tbdElmt == null) alert("Failed to create <tbody> Element!");

     rowElmt[intRows] = document.createElement("tr");           // Creates 'row' to be added to table
     if (rowElmt[intRows] == null) alert("Failed to create <tr> Element!");



    var intRowCount, intColCount;

    intRowCount = tblElmt.rows.length;  // Counts total no. of rows in table so far
    intRows = intRowCount;      // Assigns total no. of rows to Global Variable 'intRows'


     var i;             // Counter Variable - as usual

    /***************************************************** Create Objects *********************************************************/

     chkRow[intRows]   = document.createElement('input');   //------|
     txtLabel[intRows] = document.createElement('input');   //  |
     selComp[intRows]  = document.createElement('select');  //  |
     selPos[intRows]   = document.createElement('select');  //  |------> Creates objects for each element type
     selDT[intRows]    = document.createElement('select');  //  |
     selRgn[intRows]   = document.createElement('select');  //  |
     txtRowNo[intRows] = document.createElement('input');   //  |
     txtData[intRows]  = document.createElement('input');   //------|

    var optComp, optPos, optDT, optRgn;         // Objects to hold 'options' for each 'select' element


    /***************************************************** Set Objects' Attributes *********************************************************/

    chkRow[intRows].type = 'checkbox';      //------|
    chkRow[intRows].id   = "chkRow" + intRows;  //  |-----> sets attributes of checkbox of a row
    chkRow[intRows].name = "chkRow" + intRows;  //------|
    chkRow[intRows].title="Cheched Row Which You Want To Display On Preview Page";

    txtLabel[intRows].type = 'text';
    txtLabel[intRows].id   = "txtLabel" + intRows;
    txtLabel[intRows].name = "txtLabel" + intRows;
    txtLabel[intRows].title="Enter A Question? Ex:What Is Your Name?";


    selComp[intRows].id   = "selComp" + intRows;
    selComp[intRows].name = "selComp" + intRows;
    selComp[intRows].title="Select The Component";
    selComp[intRows].onclick=function(){getIndex(this.id);};
    selComp[intRows].onchange=function(){compChange(this);};

    selPos[intRows].id   = "selPos" + intRows;
    selPos[intRows].name = "selPos" + intRows;
    selPos[intRows].title="Select Component Position";

    selDT[intRows].id   = "selDT" + intRows;
    selDT[intRows].name = "selDT" + intRows;
    selDT[intRows].title="Select Data Type Which Enter In Component";

    selRgn[intRows].id   = "selRgn" + intRows;
    selRgn[intRows].name = "selRgn" + intRows;
    selRgn[intRows].title="Select Region Where To Display Component";

    txtRowNo[intRows].type = 'text';
    txtRowNo[intRows].id   = "txtRowNo" + intRows;
    txtRowNo[intRows].name = "txtRowNo" + intRows;
    txtRowNo[intRows].maxLength="2";
    txtRowNo[intRows].size="1";
    txtRowNo[intRows].title="Enter Row Number Where To Place Row";


    txtData[intRows].type = 'text';
    txtData[intRows].id   = "txtData" + intRows;
    txtData[intRows].name = "txtData" + intRows;


    /***************************************************** Create Options for each 'select' element *********************************************************/


     fnCallComp('Select');
     fnCallComp('Label');
     fnCallComp('Textbox');
     fnCallComp('TextArea');
     fnCallComp('Password');
     fnCallComp('Checkbox');
     fnCallComp('Radio');
     fnCallComp('Image');
     fnCallComp('Listbox');
     fnCallComp('Dropdown');
     fnCallComp('Date/Time');
     fnCallComp('Table');
     fnCallComp('Button');
     fnCallComp('File');
     fnCallComp('Link');     

      function fnCallComp(strTextNode)
     {
       optComp = document.createElement('option');
       optComp.value = ""+strTextNode;
       optComp.appendChild(document.createTextNode(strTextNode));
       selComp[intRows].appendChild(optComp);
     }


     fnCallPos('Select');
     fnCallPos('Left');
     fnCallPos('Right');
     fnCallPos('Top');
     fnCallPos('Bottom');
     fnCallPos('Helptext');

     function fnCallPos(strTextNode)
     {
      optPos = document.createElement('option');
      optPos.value = ""+strTextNode;
      optPos.appendChild(document.createTextNode(strTextNode));
      selPos[intRows].appendChild(optPos);
     }

     fnCallDT('Select');
     fnCallDT('Alphabetic');
     fnCallDT('Numeric');
     fnCallDT('AlphaNumeric');
     fnCallDT('Boolean');
     fnCallDT('Time');
     fnCallDT('Date');
     fnCallDT('DateTime');

     function fnCallDT(strTextNode)
     {
        optDT = document.createElement('option');
        optDT.value = ""+strTextNode;
        optDT.appendChild(document.createTextNode(strTextNode));
        selDT[intRows].appendChild(optDT);
     } 

     fnCallRgn('Select');
     fnCallRgn('Left');
     fnCallRgn('Center');
     fnCallRgn('Right');

     function fnCallRgn(strTextNode)
     {
        optRgn = document.createElement('option');
        optRgn.value = ""+strTextNode;
        optRgn.appendChild(document.createTextNode(strTextNode));
        selRgn[intRows].appendChild(optRgn);
     }







    /***************************************************** Create Cells & add Cell Contents *********************************************************/

    for (i=0; i<intCols; i++)
    {
    cell[i] = document.createElement("td");      
    cell[i].id = "td" + intRowCount + i;

    switch(i)
    {
        case 0: cell[i].appendChild(chkRow[intRows]);
                    rowElmt[intRows].appendChild(cell[i]);         
            cell[i].style.width = "10px";         
            break;

        case 1: cell[i].appendChild(txtLabel[intRows]); 
            rowElmt[intRows].appendChild(cell[i]);        
            cell[i].style.width = '150px';        
            break;

        case 2: cell[i].appendChild(selComp[intRows]);  
            rowElmt[intRows].appendChild(cell[i]);  
            cell[i].style.width = '130px';  
            break;

        case 3: cell[i].appendChild(selPos[intRows]);   
            rowElmt[intRows].appendChild(cell[i]);  
            cell[i].style.width = '100px';  
            break;

        case 4: cell[i].appendChild(selDT[intRows]);        
            rowElmt[intRows].appendChild(cell[i]);  
            cell[i].style.width = '150px';  
            break;

        case 5: cell[i].appendChild(selRgn[intRows]);   
            rowElmt[intRows].appendChild(cell[i]);  
            cell[i].style.width = '65px';   
            break;

        case 6: cell[i].appendChild(txtRowNo[intRows]); 
            rowElmt[intRows].appendChild(cell[i]);  
            cell[i].style.width = '35px';   
            break;

        case 7: cell[i].appendChild(txtData[intRows]);  
            rowElmt[intRows].appendChild(cell[i]);  
            cell[i].style.width = '250px';  
            break;
    }

    }


    tbdElmt.appendChild(rowElmt[intRows]);  // Adds row to table body
    tblElmt.appendChild(tbdElmt);   // Adds table body to table
    divElmt.appendChild(tblElmt);   // Adds table to div element of document
    frmElmt.appendChild(divElmt);   // Adds table to div element of document



}



/***************************************************** Function to Delete Rows ************************************************************/

function delRow(elmtID)
{
    try
    {
    var tblElmt = document.getElementById(elmtID);
    var row, chk, chkElmt, flgChk;

    chkElmt = document.getElementById('chkAll');
    intRows = tblElmt.rows.length;
    flgChk  = false;

    for (var i=0; i<intRows; i++) 
    {
        row = tblElmt.rows[i];
        chk = row.cells[0].childNodes[0];

        if (chk != null && chk.checked)
        { 
        tblElmt.deleteRow(i);
        intRows--;
        i--;
        flgChk = true;
        }
    }

    if (!flgChk) alert ("No row selected! Cannot delete row\(s\)!");
    else
    {
        updateIds (tblElmt);

        intRows = tblElmt.rows.length;


        for (i=0; i<intRows; i++)
        {
        row = tblElmt.rows[i];


        }
    }

    if (chkElmt.checked = true) chkElmt.checked = false;
    }

    catch (e)  { alert(e);  }
}


/***************************************************** Function to Update Id's ************************************************************/


function updateIds (tblElmt)
{
    var row;

    intRows = tblElmt.rows.length;

    for (var i=0; i<intRows; i++)
    {
    row = tblElmt.rows[i];

    for (var j=0; j<intCols; j++)
    {
        row.cells[j].id = "td" + i + j;

        switch(j)
        {
        case 0: row.cells[j].childNodes(0).id = "chkRow"   + i + j; //------|
        break;

        case 1: row.cells[j].childNodes(0).id = "txtLabel" + i + j; //  |
        break;

        case 2: row.cells[j].childNodes(0).id = "selComp"  + i + j; //  |
        break;

        case 3: row.cells[j].childNodes(0).id = "selPos"   + i + j; //  |------> Updating Ids of each cell & Cell Contents
        break;

        case 4: row.cells[j].childNodes(0).id = "selDT"    + i + j; //  |
        break;

        case 5: row.cells[j].childNodes(0).id = "selRgn"   + i + j; //  |
        break;

        case 6: row.cells[j].childNodes(0).id = "txtRowNo" + i + j; //  |
        break;

        case 7: row.cells[j].childNodes(0).id = "txtData"  + i + j; //------|
        break;
        }
    }
    }
}

/***************************************************** Function to Get Index ************************************************************/


function getIndex(indexVal) 
{  

   indexNo=parseInt(indexVal.slice(7)); 

}
/***************************************************** Function to Change Componant ******************************************************/

function compChange(compVal)
{
    var value = compVal.options[compVal.selectedIndex].value;
    alert(value);

    if(value=="TextArea" || value=="Password" || value=="Image" || value=="File")
    {
       cell[7].removeChild(txtData[indexNo]);   
       rowElmt[indexNo].removeChild(cell[7]);

       txtData[indexNo]  = document.createElement('input'); 
       txtData[indexNo].type = "hidden";
       txtData[indexNo].id   = "txtData" + indexNo;
       txtData[indexNo].name = "txtData" + indexNo;
       cell[7].appendChild(txtData[indexNo]);     
       rowElmt[indexNo].appendChild(cell[7]);  

    }
  /*if(value=="Textbox" || value=="Checkbox" || value=="Radio"|| value=="Listbox" || value=="Dropdown" || value=="Data/Time" || value=="Table" || value=="Color" || value=="Range" || value=="Link")
    {
       cell[7].removeChild(txtData[indexNo]);   
       txtData[indexNo]  = document.createElement('input'); 
       txtData[indexNo].type = "text";
       txtData[indexNo].id   = "txtData" + indexNo;
       txtData[indexNo].name = "txtData" + indexNo;

       cell[7].appendChild(txtData[indexNo]);       
       cell[7].style.width = '250px';


    }*/

}
/***************************************************** Function to Reload Page ************************************************************/

function reloadPage() 
{                         
  location.reload();
}

/***************************************************** Function to Check All Rows ************************************************************/

function checkAll(chkId, tblId)
{
    var chkElmt = document.getElementById(chkId);
    var tblElmt = document.getElementById(tblId);

    intRows = tblElmt.rows.length;

    if (chkElmt.checked == true)
    {
    for (var i=0; i<intRows; i++)
    {
        row = tblElmt.rows[i];
        row.cells[0].childNodes[0].checked = true;
    }

    }

    else
    {
    for (var i=0; i<intRows; i++)
    {
        row = tblElmt.rows[i];
        row.cells[0].childNodes[0].checked = false;
    }
    }
}


/*************************************************Function for Validate Rows *************************************************/
function validateRow(elmtID)
{
   var divElmt = document.getElementById(elmtID);
   var tblElmt = document.getElementById("tblTable");
   var hide=document.createElement('input');
   hide.type='hidden';
   hide.id="hide"+1;
   hide.name="hide"+1;
   hide.value=""+intRows;
   tblElmt.appendChild(hide);   // Adds table body to table
   divElmt.appendChild(tblElmt);    // Adds table to div element of document
   var val=true;
   var chkDupRow = new Array();
   var chkDupRgn = new Array();
   for(var cntRow=0;cntRow<intRows;cntRow++)
   {


     if(chkRow[cntRow].checked)
     {

        if(txtLabel[cntRow].value=="")
        { 
             val=false;
             alert("Enter value of"+" "+(cntRow+1)+" "+"Label"); 
             break;    
        }
        if(selComp[cntRow].value=="Select")
        { 
            val=false;
             alert("Set value of"+" "+(cntRow+1)+" "+"Component");
              break; 
        }
        if(selPos[cntRow].value=="Select")
        {
            val=false; 
             alert("Set value of"+" "+(cntRow+1)+" "+"Position");
               break; 
        }
        if(selDT[cntRow].value=="Select")
        {
             val=false;
             alert("Set value of"+" "+(cntRow+1)+" "+"DataType");
              break; 
        }
        if(selRgn[cntRow].value=="Select")
        {
             val=false;
             alert("Set value of"+" "+(cntRow+1)+" "+"Region");
              break; 
        }
        if(txtRowNo[cntRow].value=="")
        {
              val=false;
              alert("Enter value of"+" "+(cntRow+1)+" "+"Row");
                break; 
        }
        if(isNaN(txtRowNo[cntRow].value))
        {
            val=false;
            alert("Enter only numeric value"+" "+(cntRow+1)+" "+"Row");
              break; 
        }
        chkDupRow[cntRow]=txtRowNo[cntRow].value;
        chkDupRgn[cntRow]=selRgn[cntRow].value;
        for(var chkdup=0;chkdup<cntRow;chkdup++)
        {
            if(chkDupRow[chkdup]==txtRowNo[cntRow].value)
            {
              if(chkDupRgn[chkdup]==selRgn[cntRow].value)
              {
                  val=false;
                  alert("Duplicate value not allowed"+" "+(chkdup+1)+"&"+" "+(cntRow+1)+" "+"Row");
              }
            }
        } 
     }

   }  

   if(val)
   {
        frmTable.submit();
   }

}

these r html n js file. nw i am tring to retrive the arrays into jsp. so i hv tried for 1 single element in jsp but it's nt working here is the code for jsp.

NewFile.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>   
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
   <html>   
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
     <title>Insert title here</title>   
      </head>   
       <body> 

       <%    // Fetch the name values.  
       String[] txtLabel = request.getParameterValues("txtLabel");    
        for (int i=0; i < 2; i++)        
        {            
            out.println(txtLabel[i]);       
        }   
        %>   
     </body>   
      </html>

Please help me out.

How to retrieve array values from html form to jsp?

***config.html***

NewFile.js

NewFile.jsp

config.html