Member Avatar for Izzy123

how do we use javascript to only allow selection from the list in question 3 to be made IF the user selected at least 1 check box in question 2?
below is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
       
      <head>
      <title> Example </title>
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      </head>
      <body>
      <form name="Form">
      <h1>Survey </h1>
      <p> Please take a minute to fill in the form below. </p>
      <ol>
      <li> Question 1.
      </li>
      <li> Q2.Which classes have you attended?    
  <br />
      <input type="checkbox" name="attend" id="aerobics" value="aerobics"/>
      <label for="aerobics">Aerobics</label>
      <br />
      <input type="checkbox" name="attend" id="boxing" value="boxing"/>
      <label for="boxing">Boxing</label>
      <br />
      <input type="checkbox" name="attend" id="circuit" value="circuit"/>
      <label for="circuit">Circuit Class</label>
<br />
      <input type="checkbox" name="attend" id="weight" value="weight"/>
      <label for="weight">Weight Training</label>
      </li>
      <li> Q3. Which of the above classes has been beneficial for you?
      (choose one from the list):
      <select class="drop" name="dropdown">
      <option value="aerobics">Aerobics</option>
      <option value="boxing">Boxing</option>
      </select>
      </li>
      </ol>
      </form>
      </body>
       </html>

I really have no idea how to do that. can anyone pls help, thanks.

Edited by Izzy123 because: n/a
  • 2 Contributors
  • 1 Reply
  • 107 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by scrappedcola
Member Avatar for scrappedcola

Group question checkboxes in a <fieldset></fieldset> tag group. Attach an onclick event to the fieldset. Onclick grab the checkboxes in the first question and check to see if one has attribute checked. If not cancel the click event or make certain all input boxes for the question 2 do not have the checked attribute. Alternatively, you could have the click event on each input box in question two that does the same as above but I think a cleaner solution would be to try the click event on the field set. Be certain that your css makes the fieldset border to none so it doesn't show up around your checkboxes.

<fieldset id=question2 onClick="handleQuestionClick(event,this)>
<input type="checkbox" name="attend" id="aerobics" value="aerobics"/>
      <label for="aerobics">Aerobics</label>
      <br />
      <input type="checkbox" name="attend" id="boxing" value="boxing"/>
      <label for="boxing">Boxing</label>
      <br />
      <input type="checkbox" name="attend" id="circuit" value="circuit"/>
      <label for="circuit">Circuit Class</label>
<br />
      <input type="checkbox" name="attend" id="weight" value="weight"/>
      <label for="weight">Weight Training</label>
</fieldset>
<script>
function handleQuestionClick(e, el)
{
    /*
    either grab the fieldset for question1 or have a classname on all checkboxes in question 1 that you can grab and check the "checked" attribute.
*/
  var q1Fieldset = document.getElementById("question1Fieldset");
  var checkEls = q1Fieldset.getElementsByTagname("input");
  var isChecked = false;
  for(var i = 0; i < checkEls.length; i++)
{ 
    var iCheck = checkEls[i];
    if(iCheck.checked)
    {
         isChecked = true;
         break;
     }
 }
  if(!isChecked)
  {
       /*two cases here are required for cross browser support between IE and FF. */
       if(!e) e= window.event;
       if(e.preventDefault) e.preventDefault();
       else e.returnValue = false;
  }
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.