?
Solved

Making hidden questions in a form compulsary

Posted on 2009-05-19
4
Medium Priority
?
161 Views
Last Modified: 2012-05-07
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
Comment
Question by:pinsah1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 13

Expert Comment

by:Onthrax
ID: 24423496
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
 
LVL 13

Expert Comment

by:Onthrax
ID: 24423645
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
 

Author Comment

by:pinsah1
ID: 24424589
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
 
LVL 13

Accepted Solution

by:
Onthrax earned 2000 total points
ID: 24428959
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will show, step by step, how to integrate R code into a R Sweave document
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question