I am working on a form that has 4 chkboxes and selecting one or more chkboxes, I have called one javascript function which displays particular divs on the form. Everything is going perfect but the problem is,there are some entries which are duplicate in some of the divs & selecting those divs which has duplicate entries,it displays duplicate entries two times. And I dont want that. So, on the form duplicate entries should display only once.
Plz help me out. Thanks in advance....
Here is my tried code:
<!DOCTYPE html>
<html>
<head>
<script>
function fnchecked(blnchecked,divid)
{
if(blnchecked)
{
document.getElementById(divid).style.display= "";
}
else
{
document.getElementById(divid).style.display= "none";
}
}
</script>
</head>
<body>
<form name="shohide1" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div>
<label>Technologies: </label></br>
<input type="checkbox" name="technologies1" onClick="fnchecked(this.checked,'questions1');" /> Kingspan Solar</br>
<input type="checkbox" name="technologies2" onClick="fnchecked(this.checked,'questions2');" /> Solar PVT</br>
<input type="checkbox" name="technologies3" onClick="fnchecked(this.checked,'questions3');" /> Insulation</br>
<input type="checkbox" name="technologies4" onClick="fnchecked(this.checked,'questions4');" /> Gas boiler</br>
<div id="questions1" style="display:none;">
<p>
How many people live in the house ?
<select name="people">
<option value="">Click & Choose</option>
<option value="people1">1 to 3 (200 litre system)</option>
<option value="people2">3 to 4 (250 litre system)</option>
<option value="people3">4 to 6 (300 litre system)</option>
<option value="people4">6 to 9 (400 litre system)</option>
</select>
</p>
<p>
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p>
Is your house south facing?
<select name="house_face">
<option value="">Click & Choose</option>
<option value="house_face1">South</option>
<option value="house_face2">South east or South west</option>
<option value="house_face3">East or West</option>
<option value="house_face4">No</option>
</select>
</p>
<p>
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
</div>
<div id="questions2" style="display:none;">
<p>
How many people live at the house ?
<select name="people">
<option value="">Click & Choose</option>
<option value="people1">1-2</option>
<option value="people2">3</option>
<option value="people3">4</option>
<option value="people4">4-6</option>
<option value="people4">6-8</option>
</select>
</p>
<p>
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p>
Is your house south facing?
<select name="house_face">
<option value="">Click & Choose</option>
<option value="house_face1">South</option>
<option value="house_face2">South east or South west</option>
<option value="house_face3">East or West</option>
<option value="house_face4">No</option>
</select>
</p>
<p>
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
</div>
<div id="questions3" style="display:none;">
<p>
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p>
Is your house detached?
<select name="detached">
<option value="">Click & Choose</option>
<option value="detached1">Detached</option>
<option value="detached2">Semi D</option>
<option value="detached3">Mid Terrace</option>
<option value="detached4">Apartment</option>
</select>
</p>
<p>
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
</div>
<div id="questions4" style="display:none;">
<p>
How many bedrooms are in the house?
<select name="bedroom">
<option value="">Click & Choose</option>
<option value="bedroom1">1-2</option>
<option value="bedroom2">2-3</option>
<option value="bedroom3">3-4</option>
<option value="bedroom4">4-5</option>
<option value="bedroom5">5-8</option>
</select>
</p>
<p>
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p>
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
</div>
</div>
</body>
</html>
I think, you need use single div and remove duplicated selection block from code. For showing only selected block - assign classes with questions to P elements and store list of selected classes and show/hide only blocks with selected classes.
Looks like it:
<!DOCTYPE html>
<html>
<head>
<script>
var showClasses = {
};
function fnchecked(blnchecked,className)
{
if(blnchecked)
{
showClasses[className] = true;
}
else
{
showClasses[className] = false;
}
var ps = document.getElementById("div-block").children;
var psNumber = ps.length;
for (var i = 0; i < psNumber; i ++) {
var have = hasClasses(ps[i], showClasses);
if (have) {
ps[i].style.display = "";
} else {
ps[i].style.display = "none";
}
}
}
function hasClasses(element) {
var result = false;
for (var cls in showClasses) {
if (showClasses[cls]) {
if ((' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1) {
result = true;
}
}
}
return result
}
</script>
</head>
<body>
<form name="shohide1" method="POST" action="">
<div>
<label>Technologies: </label></br>
<input type="checkbox" name="technologies1" onchange="fnchecked(this.checked,'question1');" /> Kingspan Solar</br>
<input type="checkbox" name="technologies2" onchange="fnchecked(this.checked,'question2');" /> Solar PVT</br>
<input type="checkbox" name="technologies3" onchange="fnchecked(this.checked,'question3');" /> Insulation</br>
<input type="checkbox" name="technologies4" onchange="fnchecked(this.checked,'question4');" /> Gas boiler</br>
<div id="div-block" >
<p class="question1 question2 " style="display: none">
How many people live in the house ?
<select name="people">
<option value="">Click & Choose</option>
<option value="people1">1 to 3 (200 litre system)</option>
<option value="people2">3 to 4 (250 litre system)</option>
<option value="people3">4 to 6 (300 litre system)</option>
<option value="people4">6 to 9 (400 litre system)</option>
</select>
</p>
<p class="question1 question2 question3 question4 " style="display: none">
What type of house do you live in?
<select name="house_type">
<option value="">Click & Choose</option>
<option value="house_type1">Bungalow</option>
<option value="house_type2">2 story</option>
<option value="house_type3">Dormer</option>
<option value="house_type4">3 or 4 story</option>
<option value="house_type5">Apartment</option>
</select>
</p>
<p class="question1 question2 " style="display: none">
Is your house south facing?
<select name="house_face">
<option value="">Click & Choose</option>
<option value="house_face1">South</option>
<option value="house_face2">South east or South west</option>
<option value="house_face3">East or West</option>
<option value="house_face4">No</option>
</select>
</p>
<p class="question1 question2 question3 question4 " style="display: none">
Was it built before 2006?
<select name="built">
<option value="">Click & Choose</option>
<option value="built1">Yes</option>
<option value="built2">No</option>
</select>
</p>
<p class="question2 question3 " style="display: none">
Is your house detached?
<select name="detached">
<option value="">Click & Choose</option>
<option value="detached1">Detached</option>
<option value="detached2">Semi D</option>
<option value="detached3">Mid Terrace</option>
<option value="detached4">Apartment</option>
</select>
</p>
<p class=" question4 " style="display: none">
How many bedrooms are in the house?
<select name="bedroom">
<option value="">Click & Choose</option>
<option value="bedroom1">1-2</option>
<option value="bedroom2">2-3</option>
<option value="bedroom3">3-4</option>
<option value="bedroom4">4-5</option>
<option value="bedroom5">5-8</option>
</select>
</p>
</div>
</div>
</body>
</html>