Forms

**Liam** · 08-14-2009, 07:51 AM

Hello every one.

Im a bit stuck with some code. The code below lets the user click on a radio button if they click on No then another radio button appears. I want to know if there is a way of adding extra code so if you click on the radio button that appears when you click no more radio buttons appear.

I have tried a number of things but nothing is working the way I want it.

Any help would be great.

Thanks

HTML Code:

<html>
<head>
<title>Hide/Show textarea</title>
<script language="JavaScript">
function showhide(radval,divid)
{
if(radval=="no")
{document.getElementById(divid).style.visibility="visible"}
if(radval=="yes")
{
document.getElementById(divid).style.visibility="hidden"
document.myform.txta.value="Enter your reason here"
}
}
</script>
</head>
<body>
<form name="myform">
<input type="radio" name="rad" value="yes" onclick="showhide(this.value,'divtxta')">Yes<br>
<input type="radio" name="rad" value="no" onclick="showhide(this.value,'divtxta')">No
<div id="divtxta" style="visibility:hidden;">

  <label>
  <input type="radio" name="radio" id="txta" value="txta">
  </label>
</div>
</form>
</body>
</html>

**forum_amnesiac** · 08-14-2009, 11:16 AM

I'm not sure I understand what you're trying to do.

I have tried your code in IE7 and it works as expected, select No and another button appears.

I have clicked on the new button and I don't get any other buttons appearing.

You do have a problem with the new button.

You set its value differently in HTML to the javascript.

**Liam** · 08-15-2009, 07:09 AM

You do have a problem with the new button.

You set its value differently in HTML to the javascript.

what is the problem with the new button?

secondly what i want is when the new button appears when you click on that another hidden button appears. Hope that makes sense

**forum_amnesiac** · 08-15-2009, 08:18 AM

This lets you have another hidden button after the first one, is that what you wanted.

HTML Code:

<html>
<head>
<title>Hide/Show textarea</title>
<script language="JavaScript">
function showhide(radval,divid)
{
if(radval=="yes")
{
document.getElementById(divid).style.visibility="hidden"
} else {
document.getElementById(divid).style.visibility="visible"
}
}
</script>
</head>
<body>
<form name="myform">
<input type="radio" name="rad" value="yes" onclick="showhide(this.value,'divtxta')">Yes<br>
<input type="radio" name="rad" value="no" onclick="showhide(this.value,'divtxta')">No
<div id="divtxta" style="visibility:hidden;">

  <label>
  <input type="radio" name="radio" id="txta" value="txta" onclick="showhide(this.value,'divtxtb')">
  </label>
</div>
<div id="divtxtb" style="visibility:hidden;">

  <label>
  <input type="radio" name="radio" id="txtb" value="txtb">
  </label>
</div>
</form>
</body>
</html>

As to the problem with setting the value of the first hidden button this is what I mean. in your code you have these 2 lines.

HTML Code:

document.myform.txta.value="Enter your reason here"

- in the function

HTML Code:

<input type="radio" name="radio" id="txta" value="txta" onclick="showhide(this.value,'divtxtb')">

- in the body

In the function you are setting a value and you are setting a different value in the HTML

**Liam** · 08-16-2009, 12:05 PM

Thanks. That worked and is just what i needed.

Many thanks

Thread: Forms

Thread Tools

Search Thread

Forms

The Following User Says Thank You to forum_amnesiac For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions