Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Making hidden questions in a form compulsary

Posted on 2009-05-19
4
Medium Priority
?
166 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Suggested Courses

636 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