Back to javascript gurus, problem is check box arrays

[kigoobe]

Hi

I'm having an array dynamically fetched from the database using php, in result, I'm getting a check box, with their corresponding value.

I wanted to make a javascript function so that if I uncheck a checkbox, corresponding value disappears.

Before going to the looping, I was trying to do a simple check - like this -

  function checkOtherValues() {
	  if (document.myform.checkmember[0].checked==false) { 
	     document.myform.checkvalue[0].value="";
	  }
  }

I thought this should work, but I'm getting the following error -

document.myform.checkmember.0 is null or not an object

For the form, it's set in this way -

<input type="checkbox" name="checkmember[]" value="<?=$chmember[$i]?>" onClick="return checkOtherValues()">
<input type="text" name="checkvalue[]" size="5" value="<?=$chvalue[$i]?>" />

Any tips please? Thanks.

[Pepejeria]

I think you need to show more code. Why do you set checkboxs value to an empty string? Not checked checkboxes are not submitted.

[kigoobe]

Thanks. basically I'm having two different arrays ... I'm trying to set the value of the second array to an empty string if I uncheck the corresponding first array.

[Pepejeria]

So, lets recap. You got 2 arrays. And these 2 arrays are somehow connected by having the same data or relative data? The second array is "mapped" to checkboxes?

[kigoobe]

Got the problem. it was like this as I was using [] after the array name in my form. I added an id along with that and then in the javascript function fetched the value using getelementbyid method, and it's fixed now. I need to get the array things working now (since I don't have the number of returned rows)

[kigoobe]

So, lets recap. You got 2 arrays. And these 2 arrays are somehow connected by having the same data or relative data? The second array is "mapped" to checkboxes?

Thanks Pepejeria. Basically the first array is of check boxes, second array is having a text field values.

[Pepejeria]

So problem is solved. Good.

[kigoobe]

yeah i'll have to figure out a way now to get the array working. For the moment, as it is done now, it is only working for the first element of array.

Means, if I uncheck the first checkbox, the corresponding textfield value is going. But this is not the case for other checkboxes.

[kigoobe]

if in the form I call the function like

 onClick="return checkOtherValues(checkmember1, checkvalue1)"

and then call the function like -

  function checkOtherValues(a,b) {
	  if (document.getElementById("a").checked==false) { 
	     document.getElementById("b").value="";
	  }
  }

this should work, right? Or not?

It's giving me an "object required" error ...

[Pepejeria]

Yes, but I dont see why you would like to empty checkbox's b value.

[kigoobe]

no, I'm not emptying the checkbox's value, I'm emptying the corresponding array's value.

[Pepejeria]

You are using getElementById. That will return you a HTML node. I don't see anything in your code showing an Array.

[kigoobe]

Yes, I thought to go this way, since I can name each id of the array seperately, like id1, id2, etc.

[Pepejeria]

Hm, I don't get you. Are you simply referering to checkboxes as an Array? Because, again, I don't see any Arrays in your code.

[kigoobe]

Ok, let me explain, sorry for not being clear earlier. Here is an example code - (example because the real one is getting fetched from the database dynamically using php)

<form action="mypage.php" name="myform" id="myform" method="post">

<input type="checkbox" name="checkmember[]" id="checkmember1" value="1"  onClick="return checkOtherValues(checkmember1, checkvalue1)">
<input type="text" name="checkvalue" id="checkvalue1" size="5" value="value1" />

<input type="checkbox" name="checkmember[]" id="checkmember2" value="2"  onClick="return checkOtherValues(checkmember2, checkvalue2)">
<input type="text" name="checkvalue" id="checkvalue2" size="5" value="value2" />

<input type="checkbox" name="checkmember[]" id="checkmember3" value="3"  onClick="return checkOtherValues(checkmember3, checkvalue3)">
<input type="text" name="checkvalue" id="checkvalue3" size="5" value="value3" />

</form>

Then, I am having a function like -

function checkOtherValues(a,b) {
	  if (document.getElementById("a").checked==false) { 
	     document.getElementById("b").value="";
	  }
  }

And it's giving me an "object required" error ...

[Pepejeria]

It would have helped from the start if you posted the code right away... There are several issues with your code. Let's start with the HTML.

HTML attributes should be in lowercase. Also, why do you use return before the function call? You are not returning anything from the function.

Next thing is that you need to pass the ids as a String. So you need to put them around quotes

<input type="checkbox" name="checkmember[]" id="checkmember1" value="1"  onclick="checkOtherValues('checkmember1', 'checkvalue1');">

Next issue is the function, you pass the id's and name the parameters a and b. But you never used them aftewards. Instead you try to access an element named a and b. What you need to do is to use the parameters passed (strings) and use them in the getElementById method:

function checkOtherValues(a,b) {
	  if (document.getElementById(a).checked == false) { 
	     document.getElementById(b).value = "";
	  }
}

I hope this clear things out

[kigoobe]

Hi

Thanks a lot. It's solved now.

Thanks again.
Best.

[Pepejeria]

If you wanna simplify your code... you can pass a reference of the checkbox itself instead of its name:

<input type="checkbox" name="checkmember[]" id="checkmember1" value="1"  onclick="checkOtherValues(this, 'checkvalue1');">

You will then not need to look for the element, since you passed it:

function checkOtherValues(a,b) {
	  if (a.checked == false) { 
	     document.getElementById(b).value = "";
	  }
}

[kigoobe]

Yeah, this is pretty cool, didn't know this could be done this way as well ... thanks again.