How to retrieve array values from html form to jsp?

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.









Related Tutorials/Questions & Answers:
How to retrieve array values from html form to jsp?
how to pass form values from javascript of html page to jsp page
Advertisements
how to fetch values from .properties to a html file
how to retrieve data from table with runtime values in sql?
how to load values of html form into an excel table using java servlet?
how to update values of a html form into an excel table using java servlets?
how to get a values from a multipart/form-data - JSP-Servlet
HTML & MYSQL - retrieve record from table
Retrieve values from database using views
retrieve record from table and show it in HTML
Get values from session to array
Get values from session to array
how to retrieve image from mysql database using java and show it in HTML img tag ?
Populate values from html to another html
How to retrieve record from table
JSTL : Submit Form TextField
Pass values from form to form
Retrieve value of radio button from database to form
how to retrieve text and images from mysql database and show on html page using jsp servlet
JSP1
JSP2
How to retrieve image from database
how to retrieve data from database ?????/
how to retrieve data from database ?????/
how to retrieve data from database ?????/
how to retrieve data from database ?????/
Protect JSPs from direct access
how to retrieve data from database
using getText() to retrieve text from an array of text fields with loop.
JSP to add details to a database from a HTML form.
how to retrieve a checkbox value(retrieve from DB)
retrieve multiple columns values from multiple csv files in java
How to Open a File in HTML Form
How to create simple HTML Form?
how to validate all form field values at once.
Uploading file in servlet from a html form
Displaying the values in text fields of a form from a javascript function in jsp
how to use bean to retrieve data from database
retrieve record from table
How to retrieve image from database in Servlet?
How to Retrieve Data from Facebook Using PHP
How to Retrieve Data from Facebook Using PHP
how to insert, retrieve data from,to db(code)....
how to store and retrieve image from database
getting int values from form and insert it in data base in jsp
How to store two integer value in a separate file and retrieve those values
How to retrieve and display image from database in Java?
How to retrieve blob image from database in JSP?
How to store and retrieve image from database in JSP?
How to pass multiple values from a servlet to JSP?

Ads