getElementByID/parameters problem

[anonymousstar]

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">

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

[HTML]<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>[/HTML]

[hsriat]

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

[anonymousstar]

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

[hsriat]

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

use the value saved in the variable selected

[anonymousstar]

use the value saved in the variable selected

Do you mean

var selected = #FFFF00;

[acoder]

Firstly, you're using a link, not a submit button. Change the Continue link into a submit button.

Secondly, the ID is useful on the client side, but when submitting a form, you need the name, so change the name or even the value.

Finally, please use [code] tags when posting code. Thanks!

[anonymousstar]

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?

function changeVal(){
var cells = document.getElementById('mytab').getElementsByTagName('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.

<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

[acoder]

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

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";
}

[anonymousstar]

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

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

[acoder]

You're welcome. Glad it's working.

[anonymousstar]

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?

!!selected ? 

whole line of code:

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

Thanks in advance.

[hsriat]

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.

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

[acoder]

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.

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

[anonymousstar]

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.

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]

There were few bugs in your code. Try this out...[html]<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>[/html]

[anonymousstar]

There were few bugs in your code. Try this out...[html]<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>[/html]

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