How Do I Add A Show/hide To Questionnaire Form
How do I make it so that every question is hidden until the above row image is clicked. I basically want to add a show/hide div to this form. When every question is answered the 'N
Solution 1:
First of all you have a lot of errors in your html. There are unclosed tags, same ids, type attribute on a div, but it should be in an input field. Besides that, my idea is to wrap every question in a div and show/hide it when you need. Here is the code for that:
var questions = $(".question");
var showQuestions = function(index) {
for(var i=0; i<questions.length; i++) {
if(i < index) {
questions.eq(i).css("display", "block");
} else {
questions.eq(i).css("display", "none");
}
}
}
for(var i=0; i<questions.length; i++) {
(function(index) {
questions.eq(index).find("div[type='radio']").on("click", function() {
showQuestions(index+2);
})
})(i);
}
showQuestions(1);
And here is the full code of your page.
<!DOCTYPE html><html><head><styletype='text/css'>.radiodiv[type='radio'] {
background: url($image) no-repeat #eee;
height:55px;
width:60px;
border:1px solid #DDD;
border-radius:10px;
padding:1px;
float:left;
margin-right:10px;
cursor:pointer
}
.radiodiv.active{
box-shadow:002px1px#00f inset;
}
img {
width: 60px;
height: 55px;
border: 0px solid #666;
background: #fff;
display:block;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.question {
margin: 20px020px0;
display: none;
clear: both;
}
#linkDiv {
margin: 0;
}
.clear {
clear: both;
}
</style><scripttype="text/javascript"src="jquery-1.10.2.min.js"></script><scripttype="text/javascript">
$(window).load(function(){
$('.radio div').on('click', function() {
var $this = $(this),
$parent = $this.parent(),
value = $this.attr('value');
$parent.children().removeClass('active');
$this.addClass('active');
$parent.attr('value', value);
//get all selected radiosvar q1=$('div[name="q1"].active');
var q2=$('div[name="q2"].active');
var q3=$('div[name="q3"].active');
var q4=$('div[name="q4"].active');
//make sure the user has selected all 3if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length !== 0)
{
//now we know we have 3 radios, so get their values
q1=q1.attr('value');
q2=q2.attr('value');
q3=q3.attr('value');
q4=q4.attr('value');
// activate button
$('#next_button').removeAttr('disabled');
//now check the values to display a different link for the desired configurationif (q1=="AT&T" && q2=="8GB" && q3=="Black" && q4=="Black")
{
$('#next_button').val('att 8gb black').click(function() {
window.location.href='http://google.com/' } );
}
elseif (q1=="AT&T" && q2=="16GB" && q3=="White" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://bing.com/';\">another option</input>";
}
elseif (q1=="AT&T" && q2=="16GB" && q3=="Black" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
}
elseif (q1=="AT&T" && q2=="8GB" && q3=="White" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
}
elseif (q1=="Unlocked" && q2=="8GB" && q3=="White" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
}
elseif (q1=="Unlocked" && q2=="8GB" && q3=="Black" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://webs.com/';\">orange</input>";
}
elseif (q1=="Unlocked" && q2=="16GB" && q3=="White" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
}
elseif (q1=="Unlocked" && q2=="16GB" && q3=="Black" && q4=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button value=Next onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
}
}
});
var questions = $(".question");
var showQuestions = function(index) {
for(var i=0; i<questions.length; i++) {
if(i < index) {
questions.eq(i).css("display", "block");
} else {
questions.eq(i).css("display", "none");
}
}
}
for(var i=0; i<questions.length; i++) {
(function(index) {
questions.eq(index).find("div[type='radio']").on("click", function() {
showQuestions(index+2);
})
})(i);
}
showQuestions(1);
});//]]> </script></head><bodyclass="questionnaire"><formname="quiz"id='quiz'><divclass="question"><h4>Choose your series.</h4><divclass="radio"id="form"><divtype="radio"name="q4"value="iPhone-3GS"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/iPhone-3GS.png" /></div><divtype="radio"name="q4"value="iPhone-4"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/iPhone-4.png" /></div><divtype="radio"name="q4"value="iPhone-4S"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/iPhone-4S.png" /></div><divtype="radio"name="q4"value="iPhone-5"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/iPhone-5.png" /></div><divtype="radio"name="q4"value="iPhone-5"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/iPhone-5.png" /></div><divtype="radio"name="q4"value="iPhone-5"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/iPhone-5.png" /></div></div></div><brclass="clear" /><divclass="question"><h4>What carrier do you have?</h4><divclass="radio"id="form"><divtype="radio"name="q1"value="AT&T"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/ATT-logo.png" /></div><divtype="radio"name="q1"value="Unlocked"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/Factory-Unlocked.png" /></div></div></div><brclass="clear" /><divclass="question"><h4>What is your phones capicity?</h4><divclass="radio"id="form"><divtype="radio"name="q2"value="8GB"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/8GB.png" /></div><divtype="radio"name="q2"value="16GB"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/16GB.png" /></div></div></div><brclass="clear" /><divclass="question"><h4>What color is your phone?</h4><divclass="radio"id="form"><divtype="radio"name="q3"value="iPhone-3GS"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/iPhone-3GS.png" /></div><divtype="radio"name="q3"value="iPhone-4"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/iPhone-4.png" /></div><divtype="radio"name="q3"value="iPhone-4S"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/iPhone-4S.png" /></div><divtype="radio"name="q3"value="iPhone-5"><imgwidth="50px"height="50px"src="http://wepriceit.webs.com/Images/iPhone-5.png" /></div></div></div><brclass="clear" /><divid="linkDiv"><inputid="next_button"type="button"disabled="disabled"value="Next" /></div></form></body></html>
Post a Comment for "How Do I Add A Show/hide To Questionnaire Form"