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

Making hidden questions in a form compulsary

I need to create a form with a number of questions that have Yes / No Radio buttons as the answer. When someone clicks  the yes radio button I need to show some hidden questions. I need to then make these hidden questions compulsary but only for the users that have clicked yes to the original question. Is this possible?
I will add the javascript I have used to show the hidden qustions and an example of one of the questions. I have also used this in the body tag (testDisp(document.forms[0])) to check the initial state of the radio buttons.

What I really need to know is how to make these questions compulsary if required.
<script type="text/javascript" language="JavaScript">
function showhide(div,on) {
  document.getElementById(div).style.display=(on)?'block':'none';
}
 
function testDisp(theForm) {
  for (var i=0;i<theForm.elements.length;i++) {
    if (theForm.elements[i].type=='radio' && theForm.elements[i].checked) {
      theForm.elements[i].click();
    }
  }
  
}
//--></script>
 
 
<tr> 
                                      <td colspan="2" class="txtform"><br> <strong>Do 
                                        you currently have/have you ever had any 
                                        of the following: </strong><span class="txtform"><strong>
                                        </strong></span><strong> 
							
                                    <input type="radio" name="YesNo2" onClick="showhide('myLayer',1)" >Yes
<input type="radio" name="YesNo2" onClick="showhide('myLayer',0)" checked> No
                                        </strong><br> <br> <ul class="txtform">
                                          <li>Cancer, leukaemia, hodgkin&#8217;s 
                                            disease, lymphoma, brain or spinal 
                                            tumour?</p> 
                                            <td>
                                    </tr> <div id="myLayer" class="hidden" style="width:50%">
									 <P CLASS="BODY"> 
                                          <table width="450" border="0" cellpadding="0" cellspacing="0">
                                            <tr>
                                              <td nowrap>Date of first symptoms</td>
    <td><input name="ever_firstsymptoms" type="text" size="30"></td>
  </tr>
  <tr>
    <td>Date of last symptoms </td>
    <td><input name="ever_lastsymptoms" type="text" size="30"></td>
  </tr>
  </table>
</div>

Open in new window

0
pinsah1
Asked:
pinsah1
  • 3
1 Solution
 
OnthraxCommented:
Sure this is possible..

The logic would be somewhat like this:

Put all form elements on the page (including the hidden questions).
Hide the hidden questions with the style element display.
Show the hidden question when a user clicks a certain condition.
When submitting the form check if a hidden question is visible and if so validate it.
0
 
OnthraxCommented:
small example

your hidden form element
<input name="test" id="HQ" type="text" value="" style="display:none" />

your radiobutton that someone will click to make the hidden question visible:
<input name="Clickme" type="radio" onclick ="ShowQuestion()" value="Clickme" />

The javascript that will show the hidden question:
function ShowQuestion() {
   document.getElementById("HQ").style.display = 'block';
}

After the form submit to validate:
if (document.getElementById("HQ").style.display == "block") {
  //visible so do validation
}

Hope this clears it a bit up.. :)
0
 
pinsah1Author Commented:
Thank you for your suggestions. Being a javascript novice (sorry) I am still a little confused as to how to do exactly want I want.

I have put the code into a test page below which has one compulsary question and two yes/no questions with hidden questions in layers. How would I make the questions in these layers compulsary only if they are shown?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<style>
.hidden { display:none }
.txtnormal {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #083F5E;

}
</style>
<script type="text/javascript" language="JavaScript">
function showhide(div,on) {
  document.getElementById(div).style.display=(on)?'block':'none';
}

function testDisp(theForm) {
  for (var i=0;i<theForm.elements.length;i++) {
    if (theForm.elements[i].type=='radio' && theForm.elements[i].checked) {
      theForm.elements[i].click();
    }
  }
 
}

//--></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function isEmpty(passedVal) {
      if (passedVal == "") {
         return false
       }
return true
}

function validForm(passForm) {
   
                             if (!isEmpty(document.forms[0].weight.value)) {
         alert("Please complete your weight'!");
        document.forms[0].weight.focus();
         return false;
       }
        
}

//-->
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body onLoad="testDisp(document.forms[0])">
<form action="TEST_CONFIRM.HTM" method="post" onSubmit="return validForm(this)" >
                                     
  <table width="470" border="0" cellpadding="0" cellspacing="4">
    <tr>
      <td class="txtform"><br> <span class="txtnormal">What is your Weight</span><br>
      </td>
      <td><input name="weight" type="text" id="weight"></td>
    </tr>
    <tr>
      <td colspan="2" class="txtnormal"><br> <strong>Do you currently have/have
        you ever had any of the following: </strong><span class="txtform"><strong>
        </strong></span><strong>
        <input type="radio" name="YesNo2" onClick="showhide('myLayer',1)" >
        Yes
        <input type="radio" name="YesNo2" onClick="showhide('myLayer',0)" checked>
        No </strong><br> <br> <ul class="txtform">
          <li>Cancer, leukaemia, hodgkin&#8217;s disease, lymphoma, brain or spinal
            tumour?</p>
            <p class="txtform">
          <li>Heart disease or disorder &#8211; including heart attack, angina,
            heart murmur, cardiomyopathy, heart valve defect or heart surgery? </p>
            <p class="txtform">
          <li>Stroke or transient ischaemic attacks (mini-stroke), brain haemorrhage
            or permanent brain injury through accident?</p>
            <p class="txtform"> </ul></td>
    </tr>
    <tr valign="bottom">
      <td colspan="5" class="txtnormal"> <div id="myLayer" class="hidden" style="width:50%">
          <P CLASS="BODY">
          <table width="450" border="0" cellpadding="0" cellspacing="0" class="txtnormal">
            <tr>
              <td nowrap>Date of first symptoms</td>
              <td><input name="ever_firstsymptoms" type="text" size="30"></td>
            </tr>
            <tr>
              <td>Date of last symptoms </td>
              <td><input name="ever_lastsymptoms" type="text" size="30"></td>
            </tr>
            <tr>
              <td>Treatment</td>
              <td><input name="ever_treatment" type="text" size="30"></td>
            </tr>
          </table>
        </div></td>
    </tr>
    <tr>
      <td colspan="2" class="txtnormal"> <span class="txtform"><strong>In the
        last 5 years have you had any of the following:</strong></span> <span class="txtform"><strong>
        </strong></span><strong>
        <input type="radio" name="YesNo1" onClick="showhide('myLayer1',1)" >
        Yes
        <input type="radio" name="YesNo1" onClick="showhide('myLayer1',0)" checked>
        No <br>
        <br>
        </strong> <ul class="txtform">
          <p class="txtform">
          <li>A lump or growth of any kind, or any mole or freckle that has bled,
            become painful, changed colour or increased in size?</p>
            <p class="txtform">
          <li>Chest pain, irregular heart beat, raised blood pressure or raised
            cholesterol?</p>
            <p class="txtform">
          <li>Optic neuritis, numbness, tingling, facial pain, visual disturbance
            including blurred vision or double vision, dizziness, chronic fatigue
            or tiredness?</p>
            <p class="txtform"> </ul></td>
    </tr>
    <tr valign="bottom">
      <td colspan="5" class="txtnormal"> <div id="myLayer1" class="hidden" style="width:50%">
          <P CLASS="BODY">
          <table width="450" border="0" cellpadding="0" cellspacing="0" class="txtnormal">
            <tr>
              <td nowrap>Date of first symptoms</td>
              <td><input name="five_firstsymptoms" type="text" size="30"></td>
            </tr>
            <tr>
              <td nowrap>Date of last symptoms </td>
              <td><input name="five_lastsymptoms" type="text" size="30"></td>
            </tr>
            <tr>
              <td>Treatment</td>
              <td><input name="five_treatment" type="text" size="30"></td>
            </tr>
          </table>
        </div></td>
    </tr>
    <tr valign="bottom">
      <td colspan="5" class="txtnormal"><input type="submit" name="Submit" value="Submit"></td>
    </tr>
  </table>
                    </form>
</body>
</html>


0
 
OnthraxCommented:
You just need to add the validation for the new layer

function validForm(passForm) {
   
                             if (!isEmpty(document.forms[0].weight.value)) {
         alert("Please complete your weight'!");
        document.forms[0].weight.focus();
         return false;
       }

becomes something like

function validForm(passForm) {
   
       if (!isEmpty(document.forms[0].weight.value)) {
         alert("Please complete your weight'!");
        document.forms[0].weight.focus();
         return false;

       if (document.getElementById("myLayer1").style.display == "block")  {
           //do your logic here. e.g.
       }

 }

make sure you add the style inline to your layer as otherwise this might not work with some browsers.. e.g. <div id="myLayer1" class="hidden" style="width:50%">  becomes <div id="myLayer1" class="hidden" style="width:50%; display:none">

If you have any other questions please let me know.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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