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

How to show divs based on checkbox selection on submit button click

Experts,
I have 11 check-boxes on the page there are five correct answers and six incorrect answers. What I need to do is when the user clicks the submit button, it will show:
- If the user has selected the correct option
- If the user did not select a correct option
- The explanation as to why for all answers  

I have created different divs for all the options, correct, incorrect and explanation.

I can get all the explanation divs to display, however I can not get the correct/incorrect divs to display.

Any help would be appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<!-- show all on submit -->
<script type="text/javascript"> 

var hidden = false;
function getElementsByClass( searchClass, domNode, tagName) {
  if (domNode == null) domNode = document;
  if (tagName == null) tagName = '*';
  var el = new Array();
  var tags = domNode.getElementsByTagName(tagName);
  var tcl = " "+searchClass+" ";
  for(i=0,j=0; i<tags.length; i++) {
    var test = " " + tags[i].className + " ";
    if (test.indexOf(tcl) != -1)
    el[j++] = tags[i];
  }
  return el;
}

function show_all()
{
  
  var newDisplay;
  if(hidden)
  {
    newDisplay = 'none';
  }
  else
  {
    newDisplay = 'block';
  }
  var hellos = getElementsByClass("explanation", null, "div");
  for(var i = 0; i < hellos.length; i++)
  {
    hellos[i].style.display = newDisplay;
  }
}
</script>
<style type="text/css">
.explanation {
	display: none;
}
.correct {
	display:none;
}
.incorrect {
	display:none;
}
</style>
</head>

<body>
 <form>
  
      <p class="visible-xs">

      </p>
      <h3>Essential Differiental Dx</h3>
      <h4>Choose the possible differential diagnosis from below. There will be more than one.</h4>

			<p>
          <input name="field" type="checkbox" value="correct" /> Acute Bronchitis</p>
          <div class="correct">Correct</div>
          <div class="incorrect">Incorrect</div>
          <div class="explanation">The most common cause of acute cough in a healthy patient</div>
          
          <p>
            <input name="field" type="checkbox" value="correct"  /> ACE-I  induced cough</p>
          <div class="correct">Correct</div>
          <div class="incorrect">Incorrect</div>
          <div class="explanation">Although usually beginning earlier after treatment starts, this phenomenon is common in patients taking these drugs and should be considered</div>
         
          <p>
            <input name="field" type="checkbox" value="correct" /> New-onset  heart failure</p>
          <div class="correct">Correct</div>
          <div class="incorrect">Incorrect</div>
          <div class="explanation">Although less commonly presenting with fever and URI symptoms, it is too serious to fail to consider in a middle-aged patient with several risk factors for cardiac disease</div>
          
          <p>
            <input name="field" type="checkbox" value="correct" /> Pneumonia</p>
          <div class="correct">Correct</div>
          <div class="incorrect">Incorrect</div>
          <div class="explanation">An obvious consideration in acute cough with fever, focal crackles and mild hypoxia)</div>
         
          <p>
            <input name="field" type="checkbox" value="correct"  /> Post-nasal  drip</p>
          <div class="explanation">Acommon cause of acute cough and present in this patient, though it may not explain all his findings</div>
         
          <p>
            <input name="field" type="checkbox" value="correct" /> Pulmonary  embolism</p>
          <div class="correct">Correct</div>
          <div class="incorrect">Incorrect</div>
          <div class="explanation">Although less commonly presenting with cough, fever and URI symptoms, it is too serious to fail to at least consider</div>
 

          <p>
            <input name="field" type="checkbox" value="incorrect" /> Acute  asthma </p>
          <div class="correct">Correct</div>
          <div class="incorrect">Incorrect</div>
          <div class="explanation">Unlikely since patient has no history of this diagnosis and is not wheezing</div>
          
          <p>
            <input name="field" type="checkbox" value="incorrect" /> COPD  exacerbation</p>
          <div class="correct">Correct</div>
          <div class="incorrect">Incorrect</div>
          <div class="explanation">Highly unlikely since patient has no history of this diagnosis or its characteristic manifestations and no physical findings</div>
          
          <p>
          <input name="field" type="checkbox" value="incorrect" /> MERS </p>
          <div class="correct">Correct</div>
          <div class="incorrect">Incorrect</div>
          <div class="explanation">Patient’s travel to Mediterranean area did not involve the highest risk area (Saudi Arabia, Jordan) and at 8 mo before presentation is too remote for a disease with a 5-day incubation period)</div>
          
          <p>
            <input type="checkbox" name="check1" value="incorrect" /> Lung  cancer </p>
          <div class="correct">Correct</div>
          <div class="incorrect">Incorrect</div>
          <div class="explanation">Although an obstructing carcinoma could cause pneumonia, this should not be on the initial differential diagnosis list of a patient with acute upper and lower respiratory symptoms</div>
          
          <p>
            <input name="field" type="checkbox" value="incorrect"  /> TB</p>
          <div class="correct">Correct</div>
          <div class="incorrect">Incorrect</div>
          <div class="explanation">Unlikely in a patient who has been ill only a few days and has no history of exposure or risk factors</div>
          
          <p>
            <input type="button" id="ex3" value="Submit" onclick="show_all();"/>
          </p> 
     
  </form>
</body>
</html>

Open in new window

0
jamiepoole
Asked:
jamiepoole
  • 2
  • 2
1 Solution
 
Duy PhamFreelance IT ConsultantCommented:
1. First you haven't make any change to correct/incorrect divs in your show_all() function. You should do as below:

var 	        hellos = getElementsByClass("explanation", null, "div"),
		checkboxes = document.getElementsByName('field'),
		corrects = getElementsByClass("correct", null, "div"),
		incorrects = getElementsByClass("incorrect", null, "div");
  for(var i = 0; i < hellos.length; i++)
  {
        hellos[i].style.display = newDisplay;
	
	// check the checkbox selection
	if (checkboxes[i].checked) {
		if (checkboxes[i].getAttribute('value') == 'incorrect') {
			incorrects[i].style.display = 'block';
		}
		else {
			corrects[i].style.display = 'block';
		}
	}
	else {
		if (checkboxes[i].getAttribute('value') == 'correct') {
			incorrects[i].style.display = 'block';
		}
		else {
			corrects[i].style.display = 'block';
		}
	}
  }

Open in new window


2. You have several errors in your html
    - "Post-nasal  drip" doesn't have correct and incorrect divs
    - <input> field of "Lung  cancer" should have name attribute = "field" rather than "check1" as in your html
0
 
jamiepooleAuthor Commented:
Good Morning,
Thank you for helping a complete novice at this. I have updated the code as you suggested and it is not working any suggestions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<!-- show all on submit -->
<script type="text/javascript"> 


function show_all()
{
  
  var 	
  hellos = getElementsByClass("explanation", null, "div"),
		checkboxes = document.getElementsByName('field'),
		corrects = getElementsByClass("correct", null, "div"),
		incorrects = getElementsByClass("incorrect", null, "div");
  for(var i = 0; i < hellos.length; i++)
  {
        hellos[i].style.display = newDisplay;
	
	// check the checkbox selection
	if (checkboxes[i].checked) {
		if (checkboxes[i].getAttribute('value') == 'incorrect') {
			incorrects[i].style.display = 'block';
		}
		else {
			corrects[i].style.display = 'block';
		}
	}
	else {
		if (checkboxes[i].getAttribute('value') == 'correct') {
			incorrects[i].style.display = 'block';
		}
		else {
			corrects[i].style.display = 'block';
		}
	}
  }
                                          
}
</script>
<style type="text/css">
.explanation {
	display: none;
}
.correct {
	display:none;
}
.incorrect {
	display:none;
}
</style>
</head>

<body>
<form>
  <p class="visible-xs"> </p>
  <h3>Essential Differiental Dx</h3>
  <p>
    <input name="field" type="checkbox" value="correct" />
    Acute Bronchitis</p>
  <div class="correct">Correct</div>
  <div class="incorrect">Incorrect</div>
  <div class="explanation">The most common cause of acute cough in a healthy patient</div>
  <p>
    <input name="field" type="checkbox" value="correct"  />
    ACE-I  induced cough</p>
  <div class="correct">Correct</div>
  <div class="incorrect">Incorrect</div>
  <div class="explanation">Although usually beginning earlier after treatment starts, this phenomenon is common in patients taking these drugs and should be considered</div>
  <p>
    <input name="field" type="checkbox" value="correct" />
    New-onset  heart failure</p>
  <div class="correct">Correct</div>
  <div class="incorrect">Incorrect</div>
  <div class="explanation">Although less commonly presenting with fever and URI symptoms, it is too serious to fail to consider in a middle-aged patient with several risk factors for cardiac disease</div>
  <p>
    <input name="field" type="checkbox" value="correct" />
    Pneumonia</p>
  <div class="correct">Correct</div>
  <div class="incorrect">Incorrect</div>
  <div class="explanation">An obvious consideration in acute cough with fever, focal crackles and mild hypoxia)</div>
  <p>
    <input name="field" type="checkbox" value="correct"  />
    Post-nasal  drip</p>
  <div class="correct">Correct</div>
  <div class="incorrect">Incorrect</div>
  <div class="explanation">Acommon cause of acute cough and present in this patient, though it may not explain all his findings</div>
  <p>
    <input name="field" type="checkbox" value="correct" />
    Pulmonary  embolism</p>
  <div class="correct">Correct</div>
  <div class="incorrect">Incorrect</div>
  <div class="explanation">Although less commonly presenting with cough, fever and URI symptoms, it is too serious to fail to at least consider</div>
  <p>
    <input name="field" type="checkbox" value="incorrect" />
    Acute  asthma </p>
  <div class="correct">Correct</div>
  <div class="incorrect">Incorrect</div>
  <div class="explanation">Unlikely since patient has no history of this diagnosis and is not wheezing</div>
  <p>
    <input name="field" type="checkbox" value="incorrect" />
    COPD  exacerbation</p>
  <div class="correct">Correct</div>
  <div class="incorrect">Incorrect</div>
  <div class="explanation">Highly unlikely since patient has no history of this diagnosis or its characteristic manifestations and no physical findings</div>
  <p>
    <input name="field" type="checkbox" value="incorrect" />
    MERS </p>
  <div class="correct">Correct</div>
  <div class="incorrect">Incorrect</div>
  <div class="explanation">Patient’s travel to Mediterranean area did not involve the highest risk area (Saudi Arabia, Jordan) and at 8 mo before presentation is too remote for a disease with a 5-day incubation period)</div>
  <p>
    <input type="checkbox" name="field" value="incorrect" />
    Lung  cancer </p>
  <div class="correct">Correct</div>
  <div class="incorrect">Incorrect</div>
  <div class="explanation">Although an obstructing carcinoma could cause pneumonia, this should not be on the initial differential diagnosis list of a patient with acute upper and lower respiratory symptoms</div>
  <p>
    <input type="checkbox" name="field" value="incorrect"  />
    TB</p>
  <div class="correct">Correct</div>
  <div class="incorrect">Incorrect</div>
  <div class="explanation">Unlikely in a patient who has been ill only a few days and has no history of exposure or risk factors</div>
  <p>
    <input type="button" id="ex3" value="Submit" onclick="show_all();"/>
  </p>
</form>
</body>
</html>

Open in new window

0
 
Duy PhamFreelance IT ConsultantCommented:
It couldn't work because you remove your some of the scripts from the original html (missing getElementsByClass() function; missing 'newDisplay' value in line 21 in the last html you posted).

To get it work, simply change following lines in your last html:

...
hellos = document.getElementsByClassName("explanation"),
		checkboxes = document.getElementsByName('field'),
		corrects = document.getElementsByClassName("correct"),
		incorrects = document.getElementsByClassName("incorrect");  // line 15 to 18
...

hellos[i].style.display = 'block';  // line 21

...

Open in new window

0
 
jamiepooleAuthor Commented:
Wonderful thank you for the help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

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