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="javas cript">

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="#00993 3" id="r1c1" onClick="change Color(this)"><i nput type="hidden" id="r1c1" name="r1c1" value="1,1"></td>
<td height="20" bgcolor="#00993 3" id="r1c2" onClick="change Color(this)"><i nput type="hidden" id="r1c2" name="r1c2" value="1,2"></td>
<td height="20" bgcolor="#00993 3" id="r1c3" onClick="change Color(this)"><i nput type="hidden" id="r1c3" name="r1c3" value="1,3"></td>
</tr>
<tr>
<td height="20" bgcolor="#00993 3" id="r2c1" onClick="change Color(this)"><i nput type="hidden" id="r2c1" name="r1c1" value="2,1"></td>
<td height="20" bgcolor="#00993 3" id="r2c2" onClick="change Color(this)"><i nput type="hidden" id="r2c2" name="r1c2" value="2,2"></td>
<td height="20" bgcolor="#00993 3" id="r2c3" onClick="change Color(this)"><i nput type="hidden" id="r2c3" name="r1c3" value="2,3"></td>
</tr>
<tr>
<td height="20" bgcolor="#00993 3" id="r3c1" onClick="change Color(this)"><i nput type="hidden" id="r3c1" name="r3c1" value="3,1"></td>
<td height="20" bgcolor="#00993 3" id="r3c2" onClick="change Color(this)"><i nput type="hidden" id="r3c2" name="r3c2" value="3,2"></td>
<td height="20" bgcolor="#00993 3" id="r3c3" onClick="change Color(this)"><i nput 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.