Adding Radio Button Values

Printable View

November 13th, 2010, 02:13 AM
bazazu

Coding Help needed

HI i have a form with 2 radio buttons Male and Female. And i have multiple DIV.
I need to hide the female div when the male radio button is clicked and hide the female div when the male radio button is clicked. i am unable to do this with multiple div. please help

coding is as follows --->

<html>
<head>
<title>Help me</title>

<style type="text/css">
.hide {display: none}
</style>

<script type="text/javascript">
function hideDiv(){
tag = document.getElementsByTagName("div");
for(x=0;x<tag.length; x++){
if(tag[x].getAttribute('id').indexOf("choose_") != -1){
tag[x].style.display = "none";
}
}
}
function view(id){
ge = document.getElementById('choose_' + id.value);
hideDiv();
ge.style.display = "block";
}
</script>

</head>
<body>
<table>
<form name="form1" id="form1" method="post" action="">
<td>
<tr><input type="radio" name="name1" value="a1" onclick="view(this)">Male </tr>
<tr><input type="radio" name="name1" value="a2" onclick="view(this)">Female </tr>
</td>
<td>
<tr><div class="hide" id="choose_a1">Hides Female Questions and shows Male questions</div></tr>
<tr><div class="hide" id="choose_a1">Hides Female Questions and shows Male questions</div></tr>
<tr><div class="hide" id="choose_a2">Hides Male Questions and shows Female questions</div></tr>
<tr><div class="hide" id="choose_a2">Hides Male Questions and shows Female questions</div></tr>
</td>

</form>
</table>
</body>
</html>
November 13th, 2010, 02:26 AM
bazazu

Adding Radio Button Values

Hi, I have been trying to find a solution or this for ages but have got one nowhere
I want to add the value of the radio buttons for different questions and have it saved in a hidden textbox.
is it possible ??

here is the code

<DIV class="quest" id="sec19">
<TABLE width="20%">

<TR class="question">
<TD>1. Question one
<TD align="right">
<INPUT type="radio" name="Question one" id="sec191" value="0" onclick="add19(this.value)">
<INPUT type="radio" name="Question one" id="sec191" value="2" onclick="add19(this.value)">
<INPUT type="radio" name="Question one" id="sec191" value="5" onclick="add19(this.value)">
<INPUT type="radio" name="Question one" id="sec191" value="10" onclick="add19(this.value)">
<TR class="question">
<TD>2. Question two
<TD align="right">
<B> No </B><INPUT type="radio" name="Question two" id="sec192" value="0" onclick="add19(this.value)">
<B> Yes </B><INPUT type="radio" name="Question two" id="sec192" value="10" onclick="add19(this.value)">

<TD align="right"><INPUT type="hidden" name="sectotal19" id="sectotal19" value="" class="textbox" maxlength="5" size="5">

</TABLE>
</DIV>

<DIV class="quest" id="sec20">
<TABLE width="20%">

<TR class="question">
<TD>1. Question three
<TD align="right">
<INPUT type="radio" name="Question three" id="sec201" value="0" onclick="add20(this.value)">
<INPUT type="radio" name="Question three" id="sec201" value="2" onclick="add20(this.value)">
<INPUT type="radio" name="Question three" id="sec201" value="5" onclick="add20(this.value)">
<INPUT type="radio" name="Question three" id="sec201" value="10" onclick="add20(this.value)">
<TR class="question">
<TD>2. Question Four
<TD align="right">
<B> No </B><INPUT type="radio" name="Question Four" id="sec202" value="0" onclick="add20(this.value)">
<B> Yes </B><INPUT type="radio" name="Question Four" id="sec202" value="10" onclick="add20(this.value)">

<TD align="right"><INPUT type="hidden" name="sectotal20" id="sectotal20" value="" class="textbox" maxlength="5" size="5">

</TABLE>
</DIV>

Re: Coding Help needed

this is a java forum, i dont think they do javascript here, but ithink this is what your looking for.

Code :

<html>
<head>
<title>Help me</title>
 
<style type="text/css">
.hide {display: none}
</style>
 
<script type="text/javascript">
function hideDiv(){
tag = document.getElementsByTagName("div");
for(x=0;x<tag.length; x++){
if(tag[x].getAttribute('id').indexOf("choose_") != -1){
tag[x].style.display = "none";
}
}
}
function view(id){
ge = document.getElementById('choose_' + id.value);
hideDiv();
ge.style.display = "block";
	if(id.value=="a1"){
		f = document.getElementById('F');
		f.style.visibility = 'hidden';
		f.style.color = 'white';
	}
		if(id.value=="a2"){
		f = document.getElementById('M');
		f.style.visibility = 'hidden';
		f.style.color = 'white';
	}
}
</script>
 
</head>
<body>
<table>
<form name="form1" id="form1" method="post" action="">
<td>
<tr><input id = "M" type="radio" name="name1" value="a1" onclick="view(this)">Male </tr>
<tr><input id = "F" type="radio" name="name1" value="a2" onclick="view(this)">Female </tr>
</td>
<td>
<tr><div class="hide" id="choose_a1">Hides Female Questions and shows Male questions</div></tr>
<tr><div class="hide" id="choose_a1">Hides Female Questions and shows Male questions</div></tr>
<tr><div class="hide" id="choose_a2">Hides Male Questions and shows Female questions</div></tr>
<tr><div class="hide" id="choose_a2">Hides Male Questions and shows Female questions</div></tr>
</td>
 
 
</form>
</table>
</body>
</html>

Please use tags next time for code readability.

Also u also have to do add some codes in there to make the labels for radio button disappear to.

November 13th, 2010, 03:40 AM
bazazu

Re: Coding Help needed

Thanks for replying relixus but the code still does not solve the problem.
It hides the other radio button.
whereas we are looking at hiding the 2 female divs and showing the 2 male div on clicking the male radio button and vice versa for female.
November 13th, 2010, 05:05 AM
Darryl.Burke

Re: Adding Radio Button Values

You've already been told on your other thread

Quote:

this is a java forum, i dont think they do javascript here

Now please find a JavaScript forum and stop posting off topic questions here.

db
November 13th, 2010, 06:54 AM
JavaPF

Re: Adding Radio Button Values

Try JavaScript - SitePoint Forums

I'm sure they will be able to help you there.
November 13th, 2010, 09:41 AM
Darryl.Burke

Re: Adding Radio Button Values

There's also a forum link on the oh-so-obvious JavaScript.com (TM) - The Definitive JavaScript Resource: JavaScript Tutorials, Free Java Scripts, Source Code and Other Scripting Resources

db