asked on
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.
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>
JavaScriptHTMLCSS
Last Comment
jamiepoole
ASKER
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.
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>
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Wonderful thank you for the help
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