This week's giveaway is in the Android forum.
We're giving away four copies of Android Security Essentials Live Lessons and have Godfrey Nolan on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes retrieve check box value rendered dynamically by a javascript Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "retrieve check box value rendered dynamically by a javascript" Watch "retrieve check box value rendered dynamically by a javascript" New topic
Author

retrieve check box value rendered dynamically by a javascript

Debasish Chakraborty
Greenhorn

Joined: May 25, 2012
Posts: 1
Hi,
Can anybody please help me what is the suitable solution to identify the clicked check box value from an HTML table which is dynamically generated and how to pass that value to another div content. I am sharing my JSP full code and I will mention which table is generated dynamically.


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
<%@page import="org.w3c.dom.*, javax.xml.parsers.*" %>
<%@ page session="true"%>

<!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>Monitor Tool</title>
<link rel="stylesheet" href="slider.css" type="text/css" />
<style> .tab { color: black; } .tab-selected { color: red; } </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="javascript.js"> </script>
<script type="text/javascript">
var selectedTab = null;
function selectTab(tab)
{
if (selectedTab)
{ selectedTab.className = 'tab'; }
tab.className = 'tab-selected';
selectedTab = tab;

}

function showdata(){
var url = "http://localhost:8080/monitoradmin/user.xml"; // the name of the XML file

//adds the html table in a html tag, with id="ajax_xml"
document.getElementById('contents').innerHTML = htmlTab_xml(url);
}
var url = "http://localhost:8080/monitoradmin/user.xml"; // the name of the XML file
function getXML_file(url) {
// if browser suports XMLHttpRequest
if (window.XMLHttpRequest) {
// Cretes a instantce of XMLHttpRequest object
xhttp = new XMLHttpRequest();
}
else {
// for IE 5/6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// sets and sends the request for calling "xml_file"
xhttp.open("post", url ,false);
xhttp.send(null);

// sets and returns the content as XML DOM
xmlDoc = xhttp.responseXML;
// document.getElementById('contents').innerHTML =xhttp.responseText;

return xmlDoc;
}





function htmlTab_xml(url) {
// this variable stores the code of the html table

var html_tab = '<table id="id_tabel" align="center" width="99%"><td></td><tr><td>  <b>Email</b></td></tr>';

var xml_dom =getXML_file(url) ;
// calls the "getXML_file()" function with the name of the XML file
var arr_sites = xml_dom.getElementsByTagName('entry'); // gets an Array with all "site" tags

// traverses the "arr_sites" array
for(var i=0; i<arr_sites.length; i++) {
var site_cat = arr_sites[i].getAttribute('key'); // gets the value of 'categ' element of current "site" tag
// alert(site_cat);
// gets the value of first child-node of first 'url' element of current "site" tag
var site_url = arr_sites[i].getElementsByTagName('value')[0].childNodes[0].nodeValue;
// alert(site_url);
// gets the value of first child-node of first 'description' element of current "site" tag
// var site_desc = arr_sites[i].getElementsByTagName('description')[0].childNodes[0].nodeValue;

// adds the values in the html table
html_tab += '<tr><td align="left"><input type="checkbox" id="'+site_url+'"/>'+'</td><td>'+site_url+'</td></tr>';
}

html_tab += '</table>'; // close the code for html tabel

return html_tab; // returns the table
}

function showdataforEdit(){
var url = "http://localhost:8080/monitoradmin/user.xml"; // the name of the XML file

//adds the html table in a html tag, with id="ajax_xml"

document.getElementById('edit_contents').innerHTML = htmlTabEdit_xml(url);
document.getElementById('editcontents').style.display="block";
}
function htmlTabEdit_xml(url){
//alert(url);
// var html_tab_edit = '<table id="id_tabel1" align="right" width="99%"><td></td><tr><td>  <b>Email</b></td></tr>';

var xml_dom =getXML_file(url) ;
// alert(url) // calls the "getXML_file()" function with the name of the XML file
var arr_sites = xml_dom.getElementsByTagName('entry'); // gets an Array with all "site" tags

// traverses the "arr_sites" array
for(var i=0; i<arr_sites.length; i++) {
var site_cat = arr_sites[i].getAttribute('key'); // gets the value of 'categ' element of current "site" tag
// alert(site_cat);
// gets the value of first child-node of first 'url' element of current "site" tag
var site_url = arr_sites[i].getElementsByTagName('value')[0].childNodes[0].nodeValue;
// alert(site_url);

// gets the value of first child-node of first 'description' element of current "site" tag
// var site_desc = arr_sites[i].getElementsByTagName('description')[0].childNodes[0].nodeValue;

// adds the values in the html table
html_tab_edit += '<tr><td align="left"><input type="checkbox" id="'+site_url+'"/>'+'</td><td>'+site_url+'</td></tr>'

}

html_tab_edit += '</table>';



for(var i=0; i<arr_sites.length; i++) {
var site_cat = arr_sites[i].getAttribute('key'); // gets the value of 'categ' element of current "site" tag
// alert(site_cat);
// gets the value of first child-node of first 'url' element of current "site" tag
var site_url = arr_sites[i].getElementsByTagName('value')[0].childNodes[0].nodeValue;
// alert(site_url);
document.getElementById('hiddentext').value=site_url;
// gets the value of first child-node of first 'description' element of current "site" tag
// var site_desc = arr_sites[i].getElementsByTagName('description')[0].childNodes[0].nodeValue;

// adds the values in the html table
html_tab_edit += '<tr><td><input type="text" id="'+document.getElementById('hiddentext').value+'"size="60" value="'+document.getElementById('hiddentext').value+'"/>'+'</td></tr>'; // close the code for html tabel


}


return html_tab_edit;

}



function showHide()
{
if(document.getElementById('Checkbox1').checked)
{
document.getElementById('edit_contents').style.visibility = 'visible';
}
else
{
document.getElementById('edit_contents').style.visibility = 'hidden';

}
}



function showButtons(){

document.getElementById("add_button").style.display="block";
document.getElementById("edit_button").style.display="block";
document.getElementById("del_button").style.display="block";
}

function addContact(){

document.getElementById("add_contents").style.display="block";
document.getElementById("edit_contents").style.display="none";

}

function editContact(){

document.getElementById("edit_contents").style.display="block";
document.getElementById("add_contents").style.display="none";
}

function showCustomerforEdit()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("edit_contents").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("post","EditServlet",true);
xmlhttp.send();
document.getElementById("contents").contentEditable = true;
document.getElementById("edit_contents").style.display = "block";
document.getElementById("update").style.display = "block";
document.getElementById("add_button").style.display="none";
document.getElementById("edit_button").style.display="none";


}

function showCustomer(str)
{

var xmlhttp;
if (str=="")
{
document.getElementById("contents").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("contents").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("post","PropertyToJsonConverterServlet?service="+str,true);
xmlhttp.send();
}
function addMailId(form){
var service=document.ajax.service_text.value;
alert(service);
var email=document.ajax.email_text.value;
alert(email);

try { //create a request for netscape, mozilla, opera, etc.
request = new XMLHttpRequest();
}catch (e) {

try { //create a request for internet explorer
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) { //do some error-handling
alert("XMLHttpRequest error: " + e);
}
}

request.open("post", "FileWriterServlet?service="+service+"&email="+email, true); //prepare the request
request.send();
showCustomer(service); //send it
return request;
}

function editMailId(form,id){
// var service=<%=session.getAttribute("service")%>;
alert(service);
var email=document.getElementById("contents").innerHTML;
alert(email);
try { //create a request for netscape, mozilla, opera, etc.
request = new XMLHttpRequest();
}catch (e) {

try { //create a request for internet explorer
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) { //do some error-handling
alert("XMLHttpRequest error: " + e);
}
}
request.open("post", "FileWriterServlet?service="+service+"&email="+email, true); //prepare the request
request.send();
showCustomer(service); //send it
return request;
}
</script>
</head>
<body >
<form name="ajax" action="" method="post">
<div id="header" align="center" style="background-color:#EEEFFF;">
<h1 class="titleheader" >Monitor Toolkit</h1></div>
<div id="wrapper" style="float:left;">
<div class="header" id="one-header" onclick="showdata();selectTab(this);showButtons();">BASE</div>
<div class="content" id="one-content">
<div class="text">

</div>
</div>
<div class="header" id="two-header" onclick="showCustomer('CURVE');selectTab(this);showButtons();">CURVE</div>
<div class="content" id="two-content" >
<div class="text" style="float:left">
CURVE
</div>
</div>
<div class="header" id="three-header" onclick="showdata();selectTab(this);showButtons();">POINT</div>
<div class="content" id="three-content">
<div class="text">
POINT
</div>
</div>
<div class="header" id="four-header" onclick="showCustomer('BCL_METRICS');selectTab(this);showButtons();">BCL METRICS</div>
<div class="content" id="four-content">
<div class="text">
BCL METRICS
</div>
</div>

<div class="header" id="six-header" onclick="showCustomer('DOCVIEW');selectTab(this);showButtons();">DOCVIEW</div>
<div class="content" id="three-content">
<div class="text">
DOCVIEW
</div>
</div>
<div class="header" id="seven-header" onclick="showCustomer('EQUITY_RESEARCH_AUTHORING');selectTab(this);showButtons();">EQUITY RESEARCH AUTHORING</div>
<div class="content" id="three-content">
<div class="text">
EQUITY RESEARCH AUTHORING
</div>
</div>
<div class="header" id="eight-header" onclick="showCustomer('EQUITY_RESEARCH_SUITE');selectTab(this);showButtons();">EQUITY RESEARCH SUITE</div>
<div class="content" id="three-content">
<div class="text">
EQUITY RESEARCH SUITE
</div>
</div>
<div class="header" id="nine-header" onclick="showCustomer('FIA_LEHMANLIVE');selectTab(this);showButtons();">FIA LEHMANLIVE</div>
<div class="content" id="three-content">
<div class="text">
FIA LEHMANLIVE
</div>
</div>
<div class="header" id="ten-header" onclick="showCustomer('FIA_TIME_SERIES_ENGINE');selectTab(this);showButtons();">FIA TIME SERIES ENGINE</div>
<div class="content" id="three-content">
<div class="text">
FIA TIME SERIES ENGINE
</div>
</div>
<div class="header" id="eleven-header"onclick="showCustomer('FIA_TIME_SERIES_PLOTTER');selectTab(this);showButtons();">FIA TIME SERIES PLOTTER</div>
<div class="content" id="three-content">
<div class="text">
FIA TIME SERIES PLOTTER
</div>
</div>

<div class="header" id="twelve-header" onclick="showCustomer('FIXED_INCOME_MARKET_MONITORS_(FMM)');selectTab(this);showButtons();">FIXED INCOME MARKET MONITORS (FMM)</div>
<div class="content" id="three-content">
<div class="text">
FIXED INCOME MARKET MONITORS (FMM)
</div>
</div>
<div class="header" id="thirteen-header" onclick="showCustomer('GLOBAL_EQUITY_RESEARCH');selectTab(this);showButtons();">GLOBAL EQUITY RESEARCH</div>
<div class="content" id="three-content">
<div class="text">
GLOBAL EQUITY RESEARCH
</div>
</div>
<div class="header" id="fourteen-header" onclick="showCustomer('MERCURY_RESEARCH_DISTRIBUTION');selectTab(this);showButtons();">MERCURY RESEARCH DISTRIBUTION</div>
<div class="content" id="three-content">
<div class="text">
MERCURY RESEARCH DISTRIBUTION
</div>
</div>

<div class="header" id="fifteen-header" onclick="showCustomer('QUANTSTR_DAILY');selectTab(this);showButtons();">QUANTSTR DAILY</div>
<div class="content" id="three-content">
<div class="text">
QUANTSTR DAILY
</div>
</div>
<div class="header" id="sixteen-header" onclick="showCustomer('RESEARCH_DISCLOSURES_-COMPASS');selectTab(this);showButtons();">RESEARCH DISCLOSURES -COMPASS</div>
<div class="content" id="three-content">
<div class="text">
RESEARCH DISCLOSURES - COMPASS
</div>
</div>
<div class="header" id="seventeen-header" onclick="showCustomer('RESEARCH_WEB_HOSTING');selectTab(this);showButtons();">RESEARCH WEB HOSTING</div>
<div class="content" id="three-content">
<div class="text">
RESEARCH WEB HOSTING
</div>
</div>
<div class="header" id="eighteen-header" onclick="showCustomer('ASIAN_RESEARCH_REPORTS');selectTab(this);showButtons();">ASIAN RESEARCH REPORTS</div>
<div class="content" id="three-content">
<div class="text">
ASIAN RESEARCH REPORTS
</div>
</div>
<div class="header" id="twenty-header" onclick="showCustomer('EQUITY_DERIVATIVES_RESEARCH');selectTab(this);showButtons();">EQUITY DERIVATIVES RESEARCH</div>
<div class="content" id="three-content">
<div class="text">
EQUITY DERIVATIVES RESEARCH
</div>
</div>
<div class="header" id="twentyone-header" onclick="showCustomer('INDEX');selectTab(this);showButtons();">INDEX</div>
<div class="content" id="three-content">
<div class="text">
INDEX
</div>
</div>
<div class="header" id="twentytwo-header" onclick="showCustomer('INDEX_REPORTER');selectTab(this);showButtons();">INDEX REPORTER</div>
<div class="content" id="three-content">
<div class="text">
INDEX REPORTER
</div>
</div>
<div class="header" id="twentythree-header" onclick="showCustomer('EES');selectTab(this);showButtons();">EES</div>
<div class="content" id="three-content">
<div class="text">
EES
</div>
</div>
<div class="header" id="twentyfour-header" onclick="showCustomer('FIA_PIPE');selectTab(this);showButtons();">FIA PIPE</div>
<div class="content" id="three-content">
<div class="text">
FIA PIPE
</div>
</div>
<div class="header" id="twentyfive-header" onclick="showCustomer('BARCLAYS_CAPITAL_LIVE');selectTab(this);showButtons();">BARCLAYS CAPITAL LIVE</div>
<div class="content" id="three-content">
<div class="text">
BARCLAYS CAPITAL LIVE
</div>
</div>
<div class="header" id="twentysix-header" onclick="showCustomer('GM_EVENTS_DELEGATE_MANAGEMENT');selectTab(this);showButtons();">GM EVENTS DELEGATE MANAGEMENT</div>
<div class="content" id="three-content">
<div class="text">
GM EVENTS DELEGATE MANAGEMENT
</div>
</div>
<div class="header" id="twentyseven-header" onclick="showCustomer('RESEARCH_REPORTS');selectTab(this);showButtons();">RESEARCH REPORTS</div>
<div class="content" id="three-content">
<div class="text">
RESEARCH REPORTS
</div>
</div>
<div class="header" id="twentyeight-header" onclick="showCustomer('RESEARCH_FINANCIAL_METRICS');selectTab(this);showButtons();">RESEARCH FINANCIAL METRICS</div>
<div class="content" id="three-content">
<div class="text">
RESEARCH FINANCIAL METRICS
</div>
</div>
<div class="header" id="twentyeight-header" onclick="showCustomer('EMFX_ANALYTICS');selectTab(this);showButtons();"> EMFX ANALYTICS</div>
<div class="content" id="three-content">
<div class="text">
EMFX ANALYTICS
</div>
</div>

</div>
<div id="contents" style="background-color:#EEEEEE;position: relative; overflow: auto;height:350px;width:800px;float:right;">
Content goes here</div>
<div id="del_button" style="float: right;font-family: Arial, Helvetica, sans-serif;font-size: 12px;height:625px;overflow:auto;display:none">
<input id="del" type="button" style="color:#050; font: bold 84% 'trebuchet ms',helvetica,sans-serif; background-color:#fed; border: 1px solid; border-color: #696 #363 #363 #696;filter:progidXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');"name="hiddenvalue" value="Delete Contact" onclick=""></input></div>  
<div id="edit_button" style="float: right;font-family: Arial, Helvetica, sans-serif;font-size: 12px;height:625px;overflow:auto;display:none">
<input id="edit" type="button" style="color:#050; font: bold 84% 'trebuchet ms',helvetica,sans-serif; background-color:#fed; border: 1px solid; border-color: #696 #363 #363 #696;filter:progidXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');"name="hiddenvalue" value="Edit Contact" onclick="showdataforEdit();"></input></div>  
<div id="add_button" style="float: right;font-family: Arial, Helvetica, sans-serif;font-size: 12px;height:625px;overflow:auto;display:none">
<input id="add" type="button" style="color:#050; font: bold 84% 'trebuchet ms',helvetica,sans-serif; background-color:#fed; border: 1px solid; border-color: #696 #363 #363 #696;filter:progidXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');" value="Add Contact" onclick="addContact();"></input>
</div>

<div id="update_button" style="float: right;font-family: Arial, Helvetica, sans-serif;font-size: 12px;height:625px;overflow:auto;">
<input id="update" type="button" style="color:#050; font: bold 84% 'trebuchet ms',helvetica,sans-serif; background-color:#fed; border: 1px solid; border-color: #696 #363 #363 #696;filter:progidXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');display:none;" value="Update" onclick="editMailId(this.form);"></input>
</div>


<div id="edit_contents" style="background-color:#EEEEEE;position: relative; overflow: auto;height:300px;width:560px;float:right;display:none;">
<table id="id_tabel1" align="right" width="99%"><td></td><tr><td>  <b>Email</b></td></tr>
<tr><td><input type="text" id="hiddentext" size="60" value="hiddentext"/></td></tr></table>
<!--<label>
<span style="color:#050; font: bold 84% 'trebuchet ms',helvetica,sans-serif; background-color:#fed; border: 1px solid; border-color: #696 #363 #363 #696;filter:progidXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');">Email</span>
<textarea style="background-color:#EEEEEE;position: relative; overflow: auto;height:200px;width:600px;float:right;" name="feedback" id="feedback" ></textarea>
</label>
<br/>
<label>
<input type="submit" style="color:#050; font: bold 84% 'trebuchet ms',helvetica,sans-serif; background-color:#fed; border: 1px solid; border-color: #696 #363 #363 #696;filter:progidXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');" value="Save" />
</label>
--></div>

<div id="add_contents" style="background-color:#CCCCCC;position: relative; overflow: auto;height:100px;width:560px;float:right;display:none;">

<label>
<span style="color:#050; width:200px; font: bold 84% 'trebuchet ms',helvetica,sans-serif; background-color:#fed; border: 1px solid; border-color: #696 #363 #363 #696;filter:progidXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');">Service</span>
<input type="text" class="input_text" name="service_text" id="service_text"/>
</label>

<label>
<span style="color:#050; width:200px; font: bold 84% 'trebuchet ms',helvetica,sans-serif; background-color:#fed; border: 1px solid; border-color: #696 #363 #363 #696;filter:progidXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');">Email</span>
<input type="text" class="input_text" name="email_text" id="email_text"/>
</label>
<label>
<input type="submit" style="color:#050; font: bold 84% 'trebuchet ms',helvetica,sans-serif; background-color:#fed; border: 1px solid; border-color: #696 #363 #363 #696;filter:progidXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');" value="Save" onclick="addMailId(this.form);" />
</label>

</div>
<input type="hidden" id="hiddentext" name="hiddentext"/>
</form>
</body>
</html>

in the above code snippet there is a javascript function called "htmlTab_xml(url)" where If You see I am trying dynamically rendering that table to UI. There are check boxes associated with whose id/value whatever i want to retrieve once clicked and use that once for my next manipulation. Can anyone please suggest how through javascript it could be achieved. sharing code or logic are most welcome.I urgently need some handy solution fort his.
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Way too much code to even think about helping you. Make a small test case.

Also why link to jQuery, but not use it?

Eric
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: retrieve check box value rendered dynamically by a javascript
 
Similar Threads
need help in jquery
how to connect to database and display query vqlus using proper java/jsp
How can I have a TAB inside my JSP
Cannot create MENU using Tiles
popup not working fine when i add table in div