Solved

Making hidden questions in a form compulsary

Posted on 2009-05-19
4
154 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
  • 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 500 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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

759 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now