getElementByID/parameters problem - Javascript / DHTML / Ajax Forum

Hi All,

I have searched the forums to see if I can find an answer to my question but to no avail.

I have a form below with a 3 x 3 cell. Each of these cells change from green to yellow if selected and back to green if unselected. What I would like to do is when I press the continue button the cells I have clicked will have "selected" concatenated onto the ID name so that I can see which cells the user has selected.

I have set up an action class in java to show the parameter names in the tomcat log file "stdout" but it is not passing any parameters.

I realise that the problem is with the javascript and not sure how to dynamically use the elementbyid code so that it applies to any of the cells.

I hope I have made myself clear on the problem and you will be able to help.

Thanks

Anonymousstar

JAVASCRIPT

<script language="javascript">

Code: ( text )

function changeColor(objTD)
{
if(objTD.clicked)
{
objTD.style.backgroundColor = "009933";
objTD.clicked=false;
}
else
{
objTD.style.backgroundColor="FFFF00";
objTD.clicked=true;
}
document.getElementById('td').value += " selected"
}

</script>

HTML

Code: ( text )

<p>
<form name="grid">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" bgcolor="#009933" id="r1c1" onClick="changeColor(this)"><input type="hidden" id="r1c1" name="r1c1" value="1,1"></td>
<td height="20" bgcolor="#009933" id="r1c2" onClick="changeColor(this)"><input type="hidden" id="r1c2" name="r1c2" value="1,2"></td>
<td height="20" bgcolor="#009933" id="r1c3" onClick="changeColor(this)"><input type="hidden" id="r1c3" name="r1c3" value="1,3"></td>
</tr>
<tr>
<td height="20" bgcolor="#009933" id="r2c1" onClick="changeColor(this)"><input type="hidden" id="r2c1" name="r1c1" value="2,1"></td>
<td height="20" bgcolor="#009933" id="r2c2" onClick="changeColor(this)"><input type="hidden" id="r2c2" name="r1c2" value="2,2"></td>
<td height="20" bgcolor="#009933" id="r2c3" onClick="changeColor(this)"><input type="hidden" id="r2c3" name="r1c3" value="2,3"></td>
</tr>
<tr>
<td height="20" bgcolor="#009933" id="r3c1" onClick="changeColor(this)"><input type="hidden" id="r3c1" name="r3c1" value="3,1"></td>
<td height="20" bgcolor="#009933" id="r3c2" onClick="changeColor(this)"><input type="hidden" id="r3c2" name="r3c2" value="3,2"></td>
<td height="20" bgcolor="#009933" id="r3c3" onClick="changeColor(this)"><input type="hidden" id="r3c3" name="r3c3" value="3,3"></td>
</tr>
</table>
<a href="../do/continue2"><img src="../images/continue_button.gif" width="70" height="24" border="0" value="submit"/></a>
</form>
</p>

anonymousstar

Newbie

12 Posts

May 14th, 2008
10:27 AM
#3

Re: getElementByID/parameters problem

Quote:

Originally Posted by hsriat

Code: ( text )

var selected = null;
function changeColor(objTD) {
selected = !selected ? objTD.id : null;
objTD.style.backgroundColor = !!selected ? "#009933" : "#FFFF00";
}

Thanks for that, it changes colour which is great but it still is not passing the values i.e the cells that have been selected. I checked the "stdout" file but nothing. Anything else would be great or if it should work an explanation of the code would be useful as well.

Thanks

anonymousstar

Newbie

12 Posts

May 15th, 2008
10:44 AM
#7

Re: getElementByID/parameters problem

Hi Thanks for your advice and sorry about the code tags. I have done what you have suggested and I am getting all the parameters and their values which is great, but when I click on a single or multiple cells I am unable to identify which ones has been selected. I need to change the value or concatenate "selected" onto the value so I know which one I have clicked. I have tried numerous codes but to no avail.

One code I tried, looped through all the cells and changed the values of each cell starting at 0. I just wanted to change the one cell I had selected. Is there a way to modify the code below to achieve this?

Code: ( text )

function changeVal(){
var cells = document.getElementById('mytab').getElementsByTagN ame('td');
for(var i=0;i<cells.length;i++){
cells[i].getElementsByTagName('input')[0].value=i;
cells[i].onclick=function(){add(this.getElementsByTagName( 'input')[0])}
}
}

The code that I am using at the moment which does not change selected cells is below.

Code: ( text )

<script language="javascript">
var selected = null;
function changeColor(objTD) {
selected = !selected ? objTD.id : null;
objTD.style.backgroundColor = !!selected ? "#009933" : "#FFFF00";
}
</script>
<form action="../do/continue2">
<table width="200" border="0" cellspacing="0" cellpadding="0" id="grid">
<tr>
<td height="20" bgcolor="#009933" id="r1c1" onClick="changeColor(this)"><input type="hidden" id="r1c1b" name="week1" value="row11"></td>
<td height="20" bgcolor="#009933" id="r1c2" onClick="changeColor(this)"><input type="hidden" id="r1c2b" name="week2" value="row12"></td>
<td height="20" bgcolor="#009933" id="r1c3" onClick="changeColor(this)"><input type="hidden" id="r1c3b" name="week3" value="row13"></td>
</tr>
<tr>
<td height="20" bgcolor="#009933" id="r2c1" onClick="changeColor(this)"><input type="hidden" id="r2c1b" name="week4" value="row21"></td>
<td height="20" bgcolor="#009933" id="r2c2" onClick="changeColor(this)"><input type="hidden" id="r2c2b" name="week5" value="row22"></td>
<td height="20" bgcolor="#009933" id="r2c3" onClick="changeColor(this)"><input type="hidden" id="r2c3b" name="week6" value="row23"></td>
</tr>
<tr>
<td height="20" bgcolor="#009933" id="r3c1" onClick="changeColor(this)"><input type="hidden" id="r3c1b" name="week7" value="row31"></td>
<td height="20" bgcolor="#009933" id="r3c2" onClick="changeColor(this)"><input type="hidden" id="r3c2b" name="week8" value="row32"></td>
<td height="20" bgcolor="#009933" id="r3c3" onClick="changeColor(this)"><input type="hidden" id="r3c3b" name="week9" value="row33"></td>
</tr>
</table>
<input type=submit value="Submit">
</form>

I hope I am not annoying anyone and you dont get fed up with me.

Thanks

Last edited by anonymousstar : May 15th, 2008 at 10:44 AM. Reason: spelling

anonymousstar

Newbie

12 Posts

May 15th, 2008
03:11 PM
#9

Re: getElementByID/parameters problem

Quote:

Originally Posted by acoder

Change the value of the hidden field which will be passed to the server-side script in changeColor:

Code: ( text )

function changeColor(objTD) {
selected = !selected ? objTD.id : null;
objTD.style.backgroundColor = !!selected ? "#009933" : "#FFFF00";
var hiddenField = document.getElementById(objTD.id+"b");
hiddenField.value = !selected ? hiddenField.value.replace("selected","") : hiddenField.value += "selected";
}

Thank you, I had to change the variable to 0 and swap the colours around so that every time it showed yellow it would say selected.

Thanks everyone for your help.

Kind Regards

Last edited by anonymousstar : May 15th, 2008 at 03:12 PM. Reason: spelling

anonymousstar

Newbie

12 Posts

May 16th, 2008
02:42 PM
#11

Re: getElementByID/parameters problem

Quote:

Originally Posted by acoder

You're welcome. Glad it's working.

I have one last question... sorry. the code is working fine but it takes a lot of clicks to change the cell from green to yellow and I need it to be one click.

does it have something to do with thes part of the code?

Code: ( text )

!!selected ?

whole line of code:

Code: ( text )

var selected = 0;
objTD.style.backgroundColor = !!selected ? "#FFFF00" : "#009933";

Thanks in advance.

hsriat

Expert

1,447 Posts

May 16th, 2008
02:57 PM
#12

Re: getElementByID/parameters problem

Quote:

Originally Posted by anonymousstar

I have one last question... sorry. the code is working fine but it takes a lot of clicks to change the cell from green to yellow and I need it to be one click

If it takes lots of click, then perhaps there's time to buy a new mouse.
But if takes 2 clicks for the first time, then change !!selected to !selected or change the order of colors like this.

Code: ( text )

objTD.style.backgroundColor = !!selected ? "#009933" : "#FFFF00";

acoder

Site Moderator

10,420 Posts

May 16th, 2008
03:16 PM
#13

Re: getElementByID/parameters problem

Quote:

Originally Posted by anonymousstar

I have one last question... sorry. the code is working fine but it takes a lot of clicks to change the cell from green to yellow and I need it to be one click.

Oh, I didn't test the code. I just assumed that it worked.

Use the hiddenField value. If it contains "selected", change the color and vice versa, e.g.

Code: ( text )

objTD.style.backgroundColor = (hiddenField.value.indexOf("selected"))? "#FFFF00" : "#009933";

anonymousstar

Newbie

12 Posts

May 16th, 2008
03:16 PM
#14

Re: getElementByID/parameters problem

Quote:

Originally Posted by hsriat

Code: ( text )

objTD.style.backgroundColor = !!selected ? "#009933" : "#FFFF00";

LOL. I did think it could be my mouse but the first cell changes fine with one click and goes back to green when I click it again. The problem is when I want to click another cell in the same row to yellow as well. I would need to click a maximum of 4 cells left or right at a time.

hsriat

Expert

1,447 Posts

May 16th, 2008
04:02 PM
#15

Re: getElementByID/parameters problem

There were few bugs in your code. Try this out...

Code: ( text )

<script type="text/javascript">
function changeColor(objTD) {
var hiddenField = objTD.firstChild;
var selected = !hiddenField.value.match("selected");
objTD.style.backgroundColor = selected ? "#ffff00" : "#009933";
hiddenField.value = selected ? hiddenField.value + " selected" : hiddenField.value.replace(" selected","");
}
</script>
<style type="text/css">
table tr td {
background-color:#009933;
cursor:pointer;
height:20px;
}
</style>
<form name="grid" action="../do/continue2" method="post">
<table width="200" border="2" cellspacing="2" cellpadding="2">
<tr>
<td onclick="changeColor(this)"><input type="hidden" name="r1c1" value="1,1"></td>
<td onclick="changeColor(this)"><input type="hidden" name="r1c2" value="1,2"></td>
<td onclick="changeColor(this)"><input type="hidden" name="r1c3" value="1,3"></td>
</tr>
<tr>
<td onclick="changeColor(this)"><input type="hidden" name="r2c1" value="2,1"></td>
<td onclick="changeColor(this)"><input type="hidden" name="r2c2" value="2,2"></td>
<td onclick="changeColor(this)"><input type="hidden" name="r2c3" value="2,3"></td>
</tr>
<tr>
<td onclick="changeColor(this)"><input type="hidden" name="r3c1" value="3,1"></td>
<td onclick="changeColor(this)"><input type="hidden" name="r3c2" value="3,2"></td>
<td onclick="changeColor(this)"><input type="hidden" name="r3c3" value="3,3"></td>
</tr>
</table>
<input type="submit" value="Submit" name="Submit"/>
</form>

anonymousstar

Newbie

12 Posts

May 19th, 2008
07:51 AM
#16

Re: getElementByID/parameters problem

Quote:

Originally Posted by hsriat

There were few bugs in your code. Try this out...

Code: ( text )

<script type="text/javascript">
function changeColor(objTD) {
var hiddenField = objTD.firstChild;
var selected = !hiddenField.value.match("selected");
objTD.style.backgroundColor = selected ? "#ffff00" : "#009933";
hiddenField.value = selected ? hiddenField.value + " selected" : hiddenField.value.replace(" selected","");
}
</script>
<style type="text/css">
table tr td {
background-color:#009933;
cursor:pointer;
height:20px;
}
</style>
<form name="grid" action="../do/continue2" method="post">
<table width="200" border="2" cellspacing="2" cellpadding="2">
<tr>
<td onclick="changeColor(this)"><input type="hidden" name="r1c1" value="1,1"></td>
<td onclick="changeColor(this)"><input type="hidden" name="r1c2" value="1,2"></td>
<td onclick="changeColor(this)"><input type="hidden" name="r1c3" value="1,3"></td>
</tr>
<tr>
<td onclick="changeColor(this)"><input type="hidden" name="r2c1" value="2,1"></td>
<td onclick="changeColor(this)"><input type="hidden" name="r2c2" value="2,2"></td>
<td onclick="changeColor(this)"><input type="hidden" name="r2c3" value="2,3"></td>
</tr>
<tr>
<td onclick="changeColor(this)"><input type="hidden" name="r3c1" value="3,1"></td>
<td onclick="changeColor(this)"><input type="hidden" name="r3c2" value="3,2"></td>
<td onclick="changeColor(this)"><input type="hidden" name="r3c3" value="3,3"></td>
</tr>
</table>
<input type="submit" value="Submit" name="Submit"/>
</form>

Fantastic works a treat. Thank you both for your help and time it is much appreciated.