toggle form fields based on value of radio/checkbox

[chronister]

I am trying to understand how to make this code more dynamic so I can write one function and pass in the elements that I want to manipulate. The goal is to have a form where certain fields hide/display based on value of radio or checkbox. I am familiar with php and tried doing the same type of variable passing, but it won't work. I know very little about js and the DOM, but am trying to learn as I go along.

 

How can I take this basic function and make it so I can pass the form name, element to check, value I want to compare against and the name of the div to toggle.

 

the js

<script type="text/javascript" >
function checkValue(obj)
{
var val = 0;

for( i = 0; i < document.theForm.question.length; i++ )
{
	if( document.theForm.question[i].checked == true )
	{
		val = document.theForm.question[i].value;
		if(val == 'yes')
		{
			var theDiv = document.getElementById('xtraInfo');
			theDiv.style.display='';
		}
		else
		{
			document.getElementById('xtraInfo').style.display='none';
		}
	}
}	
}	
</script>

 

the html

<form id="theForm" name="theForm" method="post" action="">
  <p>
    <label>
      <input type="radio" name="question" value="yes" onclick="checkValue(this)" />
      yes</label>
    <br />
    <label>
      <input type="radio" name="question" value="no" onclick="checkValue(this)"/>
      no</label>
    <br />
  </p>
  
  <div id="xtraInfo" style="display:none;">
  Name <input name="name" type="text" id="name"  />

<br /><br />

Address <input name="address" type="text" id="address">
  </div>
</form>

 

I more or less want to call the function like this...

 

onclick="checkValue(this, 'formName', 'valueCompare', 'divToggle')"

 

I tried substituting the js element names with those passed into the function, but came up with a bunch of null objects.

 

Any help is appreciated

 

Nate

 

[Ken2k7]

Read my comments.

 

// what's the point of having a form name?
// If you want this abstract, you shouldn't limit the functiont that way
// obj (this), comparable value, toggle ID
function compareTo (obj, comparable, id) {
var obj_val = obj.value;
if (!obj_val) return false;
var disp = obj_val === comparable? "block" : "none";
return toggleID(id, disp);
}

// toggles an id. No surprise here.
function toggleID (id, disp) {
var obj_id = document.getElementById(id);
if (!obj_id) return false;
obj_id.style.display = disp;
return true;
}

[chronister]

Beautiful.... thank you for your help there.

 

I don't know much about javascript especially the logic and the "proper" way to do things. But I am trying to learn. Thanks for the help here. I will study what exactly is happening here and try to pick up something with it.

 

Nate