• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 222
  • Last Modified:

Make info visible/invisible based on radio button

On a form, how do I make data visible/invisible based on a radio button (ir a check box).  For example, a form that is gathering info for a travel reservation request.  if the user chooses YES for NEED A RENTAL CAR?, they would see info related to car rental choices.  If they then click NO, the info disappears.  All this needsto take place on a single form.
0
birosra
Asked:
birosra
  • 3
  • 2
  • 2
1 Solution
 
aarieCommented:
If you use a checkbox, you could do the following:

-----

<html>
<head>
<script language="javascript">
function RentalInfo()
{
 with(document.forms[0])
   {
    if (rentalcar.checked)
      {
      // Change the value of the textarea.
       rentalcarinfo.value = "Info on rental cars.\nContact us at ... ";
      } // end if
    else
      {
      // Empty the textarea.
        rentalcarinfo.value = "";
      } // end else

    // remove focus from the checkbox
    rentalcar.blur();
   } // end with
} // end RentalInfo
</script>
</head>
<body>
<form>
Check this box for rental car info : <input type="checkbox" name="rentalcar"

onClick="RentalInfo();"><br>
<textarea name="rentalcarinfo" cols="50" rows="5">
</textarea>
</form>
</body>
</html>

------

Off course, this surely isn't the only way to solve your problem, maybe not even the best, but it is a way to solve it. In the RentalInfo function, you can change the text that needs to be shown. The number of characters per line and the number of textlines can be changed to fit your need. Make sure you use escape characters (like \n \t \") for text markup.

Arjan.
0
 
birosraAuthor Commented:
Adjusted points to 160
0
 
dspletsCommented:
The following program works perfect for IE.  In Netscape it's impossible to change content on-the-fly.

<html>

<head>

<title>New Page 1</title>
</head>

<body>

<form method="POST">
   <p><input type="radio" value="V1" name="R1" onclick="More.style.display=''">Yes<br>
  <input type="radio" name="R1" value="V2" onclick="More.style.display='none'">No</p>
  <p>&nbsp;</p>
<!-- This division contains the hidden part of the form that the user sees when they click on More>>. The event handler at the top of this file shows the layer. -->
  <div id="More" style="display:none"><table CELLPADDING="10">
    <tr>
      <td><b>Type the URL of your home page:</b><br>
      <input NAME="FEEDBACK_URL" TYPE="TEXT" SIZE="60"> </td>
      <td><b>Type your phone number:</b><br>
      <input NAME="FEEDBACK_PHONE" TYPE="TEXT" SIZE="32"> </td>
    </tr>
  </table>
  </div>

</form>

</body>

</html>
 
0
Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

 
aarieCommented:
dsplets' proposed answer is another way to solve your problem... I haven't tested my solution with netscape, but I do think it'll work in netscape as well.... I think the layer version is more elegant, as you can make it visible only when the checkbox is checked.... In netscape, instead of the div tag you might better try to use the LAYER tag, and the visibility property instead of display....

By the way, dsplets, by posting your IE only answer, you are discouraging other people to engage in the discussion. They might know of a way which actually is cross browser. But then again, nothing said if IE is the browser which needs to be supported.

Arjan.
0
 
birosraAuthor Commented:
dsplets solution is a good one for IE.
Will it work in Netscape?
Is there a cross browser solution?
Will the <div> tag work in Netscape or is it an IE only solution.
0
 
dspletsCommented:
No, it doesn't work in NS.  I believe there is no cross browser solution. Even with layers you can't achieve the same effect.
The div tag works in NS and in IE but like I said you can't change content on the fly.  The part More.style.display won't work in NS.  

 
0
 
aarieCommented:
birosra, for a netscape version go to developer.netscape.com/docs
there you can find a javascript reference. In it, they describe how to make a layer visible or invisible!

Arjan.
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now