Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

JavaScript Forum


You are currently viewing our JavaScript Forum as a guest. Please register to participate.
Login



Reply
Old 01-02-2008, 08:34 PM onChange with DIVs
Junior Talker

Posts: 2
Name: Chris
Trades: 0
Hello,
I'm creating an HTML form for a client, but I want to use the onChange event, with CSS DIVs, to hide and show different questions. For instance, I would like to use radio buttons for a series of question, the user picks an answer and then, based on that answer, another set of questions appear. Any recommendations on how to do that?
Thanks
djhelix is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 01-02-2008, 09:48 PM Re: onChange with DIVs
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
Chris here's some code from a dummy page I made awhile back. Ignore the code for the rows and table cells. They're not necessary, but it's how I had set up the code I'm grabbing and I'm too lazy now to restyle it here.

Here's the html. Basically I added an onclick event to each of the the radio buttons. All the divs are set to display: none in the stylesheet and the javascript function I call turns them on and off.

When the form is first loaded you see the radio buttons and no other questions associated with each choice. As soon as you select one of the radio options a series of checkboxes gets displayed below the radio buttons. Switching the radio buttons switches the questions displayed.

HTML Code:
<tr>
  <td class="border" colspan="2">Ask your question here</td>
 </tr>
 <tr>
  <td colspan="2">
   <input type="radio" id="option-1" name="questions" onclick="toggleQuestions(event)">radio option 1
   <input type="radio" id="option-2" name="questions" onclick="toggleQuestions(event)">radio option 2
   <input type="radio" id="option-3" name="questions" onclick="toggleQuestions(event)">radio option 3
  </td>
 </tr>
 <tr>
  <td></td>
  <td>
   <div id="questions">Question Set 1</div>
   <div id="group-1">
    <input type="checkbox" name="q1-1">question 1-1<br />
    <input type="checkbox" name="q1-2">question 1-2<br />
    <input type="checkbox" name="q1-3">question 1-3<br />
    <input type="checkbox" name="q1-4">question 1-4<br />
    <input type="checkbox" name="q1-5">question 1-5
   </div>
   <div id="group-2">
    <input type="checkbox" name="q2-1">question 2-1<br />
    <input type="checkbox" name="q2-2">question 2-2<br />
    <input type="checkbox" name="q2-3">question 2-3<br />
    <input type="checkbox" name="q2-4">question 2-4<br />
    <input type="checkbox" name="q2-5">question 2-5
   </div>
   <div id="group-3">
    <input type="checkbox" name="q3-1">question 3-1<br />
    <input type="checkbox" name="q3-2">question 3-2<br />
    <input type="checkbox" name="q3-3">question 3-3<br />
    <input type="checkbox" name="q3-4">question 3-4<br />
    <input type="checkbox" name="q3-5">question 3-5
   </div>
  </td>
 </tr>
and here's the javascript function that gets called

Code:
function toggleQuestions(evt){
   evt = (evt) ? evt : event;
   var target = (evt.target) ? evt.target : evt.srcElement;
   var group1 = document.getElementById("group-1");
   var group2 = document.getElementById("group-2");
   var group3 = document.getElementById("group-3");
   var questions = document.getElementById("questions");
   songs.style.display = "block";

   switch(target.id){
      case "group1":
         group1.style.display = "block";
         group2.style.display = "none";
         group3.style.display = "none";
         break;
      case "group2":
         group1.style.display = "none";
         group2.style.display = "block";
         group3.style.display = "none";
         break;
      case "group3":
         group1.style.display = "none";
         group2.style.display = "none";
         group3.style.display = "block";
         break;
   }
}
The set up may not be exactly what you're looking for, but it should be close enough to get you going. I hope it helps.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE

Last edited by vangogh; 01-02-2008 at 09:49 PM..
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Old 01-03-2008, 04:54 PM Re: onChange with DIVs
Junior Talker

Posts: 2
Name: Chris
Trades: 0
Awesome, thank you so much. I'll give this a whirl right now.
djhelix is offline
Reply With Quote
View Public Profile
 
Old 01-03-2008, 07:11 PM Re: onChange with DIVs
vangogh's Avatar
Post Impressionist

Posts: 10,688
Name: Steven Bradley
Location: Boulder, Colorado
Trades: 0
Glad to help. I hope it works, but if not feel free to come back and ask some questions.
__________________
l Search Engine Friendly Web Design |
Please login or register to view this content. Registration is FREE

l Tips On Marketing, SEO, Design, and Development |
Please login or register to view this content. Registration is FREE

l
Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
vangogh is offline
Reply With Quote
View Public Profile Visit vangogh's homepage!
 
Reply     « Reply to onChange with DIVs
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.13553 seconds with 12 queries