How to add a button to questionnaire
How do I make a button that is light in color and unclickable until a user
answers all 3 questions and when that happens the button lights up and is
clickable. The button generates the links that are already within the code
and it takes them to the desired page.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function tryToMakeLink()
{
//get all selected radios
var q1=document.querySelector('input[name="q1"]:checked');
var q2=document.querySelector('input[name="q2"]:checked');
var q3=document.querySelector('input[name="q3"]:checked');
//make sure the user has selected all 3
if (q1==null || q2==null ||q3==null)
{
document.getElementById("linkDiv").innerHTML="--";
}
else
{
//now we know we have 3 radios, so get their values
q1=q1.value;
q2=q2.value;
q3=q3.value;
//now check the values to display a different link for the desired
configuration
if (q1=="AT&T" && q2=="8GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a href=#>att
8gb black</a>";
}
else if (q1=="Other" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a href=#>other 8b
white</a>";
}
else if (q1=="AT&T" && q2=="16GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a href=#>another
option</a>";
}
else if (q1=="AT&T" && q2=="16GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a
href=#>oops</a>";
}
else if (q1=="AT&T" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a
href=#>can't</a>";
}
else if (q1=="Other" && q2=="8GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a
href=#>yours</a>";
}
else if (q1=="Other" && q2=="16GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a
href=#>mines</a>";
}
else if (q1=="Other" && q2=="16GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a
href=#>what</a>";
}
else if (q1=="Unlocked" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a href=#>red</a>";
}
else if (q1=="Unlocked" && q2=="8GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a
href=#>orange</a>";
}
else if (q1=="Unlocked" && q2=="16GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<a
href=#>green</a>";
}
else if (q1=="Unlocked" && q2=="16GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<a
href=#>blue</a>";
}
}
}
</script>
<form name="quiz" id='quiz'>
What carrier do you have?
<ul style="margin-top: 1pt">
<li><input type="radio" onclick=tryToMakeLink(); name="q1"
value="AT&T"/>AT&T</li>
<li><input type="radio" onclick=tryToMakeLink(); name="q1"
value="Other"/>Other</li>
<li><input type="radio" onclick=tryToMakeLink(); name="q1"
value="Unlocked"/>Unlocked</li>
</ul>
What is your phones capicity?
<ul style="margin-top: 1pt">
<li><input type="radio" onclick=tryToMakeLink(); name="q2"
value="8GB"/>8GB</li>
<li><input type="radio" onclick=tryToMakeLink(); name="q2"
value="16GB"/>16GB</li>
</ul>
What color is your phone?
<ul style="margin-top: 1pt">
<li><input type="radio" onclick=tryToMakeLink(); name="q3"
value="Black"/>Black</li>
<li><input type="radio" onclick=tryToMakeLink(); name="q3"
value="White"/>White</li>
</ul>
<br>
<div id=linkDiv>
---
</div>
</form>
</body>
</html>
http://jsfiddle.net/ekcKW/
No comments:
Post a Comment