How to replace radio buttons with images
How do I fix this code so that the images show up. They aren't showing up
where the radio buttons used to be. I've tried several different methods
on different occassions and this seems to be the most promising but I just
can't seem to make the images appear where they should. Please don't tell
me how many times this was answered because you don't know how many
attempts I gave MANY of them. I just want help with getting the images in
place of the radio buttons with javascript. Please use jsfiddle for
examples. I may be missing labels but I don't know where to put them.
http://jsfiddle.net/uuyAq/
<!DOCTYPE html>
<html>
<head>
<script>
var images = {
1: 'http://wepriceit.webs.com/ipad-5-image.jpg',
2: 'http://wepriceit.webs.com/ipad-5-image.jpg',
3: 'http://wepriceit.webs.com/ipad-5-image.jpg',
4: 'http://wepriceit.webs.com/ipad-5-image.jpg',
5: 'http://wepriceit.webs.com/ipad-5-image.jpg'
};
$('input[type=radio][name^=question]').each(function() {
var id = this.id;
$(this)
.hide() // hide the radio button
.after('<img src="'+ images[id] +'">'); // insert the image
// after corresponding radio
});
</script>
</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="<input type=button
disabled=disabled value=Next>";
}
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="<input type=button
value=Next
onclick=\"window.location.href='http://google.com/';\">att 8gb
black</input>";
}
else if (q1=="Other" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<input
type=button value=Next
onclick=\"window.location.href='http://yahoo.com/';\">other 8b
white</input>";
}
else if (q1=="AT&T" && q2=="16GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<input
type=button value=Next
onclick=\"window.location.href='http://bing.com/';\">another option</input>";
}
else if (q1=="AT&T" && q2=="16GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<input
type=button value=Next
onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
}
else if (q1=="AT&T" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<input
type=button value=Next
onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
}
else if (q1=="Other" && q2=="8GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<input type=button
value=Next
onclick=\"window.location.href='http://images.google.com/';\">yours</input>";
}
else if (q1=="Other" && q2=="16GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<input
type=button value=Next
onclick=\"window.location.href='http://youtube.com/';\">mines</input>";
}
else if (q1=="Other" && q2=="16GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<input
type=button value=Next
onclick=\"window.location.href='http://docs.google.com/';\">what</input>";
}
else if (q1=="Unlocked" && q2=="8GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<input
type=button value=Next
onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
}
else if (q1=="Unlocked" && q2=="8GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<input
type=button value=Next
onclick=\"window.location.href='http://webs.com/';\">orange</input>";
}
else if (q1=="Unlocked" && q2=="16GB" && q3=="White")
{
document.getElementById("linkDiv").innerHTML="<input
type=button value=Next
onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
}
else if (q1=="Unlocked" && q2=="16GB" && q3=="Black")
{
document.getElementById("linkDiv").innerHTML="<input
type=button value=Next
onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
}
}
}
</script>
<form name="quiz" id='quiz'>
What carrier do you have?
<ul style="margin-top: 1pt" id="navlist">
<li style="list-style: none;"><input type="radio"
onclick=tryToMakeLink();
name="q1" value="AT&T" id="1"/>AT&T</li><label for="1"/>
<li style="list-style: none;"><input type="radio"
onclick=tryToMakeLink();
name="q1" value="Other" id="2"/>Other</li><label for="2"/>
<li style="list-style: none;"><input type="radio"
onclick=tryToMakeLink();
name="q1" value="Unlocked" id="3"/>Unlocked</li><label for="3"/>
</ul>
What is your phones capicity?
<ul style="margin-top: 1pt" id="navlist">
<li style="list-style: none;"><input type="radio"
onclick=tryToMakeLink();
name="q2" value="8GB" id="4"/>8GB</li><label for="4"/>
<li style="list-style: none;"><input type="radio"
onclick=tryToMakeLink();
name="q2" value="16GB" id="5"/>16GB</li><label for="5"/>
</ul>
What color is your phone?
<ul style="margin-top: 1pt" id="navlist">
<li style="list-style: none;"><input type="radio"
onclick=tryToMakeLink();
name="q3" value="Black" id="6"/>Black</li><label for="6"/>
<li style="list-style: none;"><input type="radio"
onclick=tryToMakeLink();
name="q3" value="White" id="7"/>White</li><label for="7"/>
</ul>
<br>
<div id=linkDiv>
<input type=button disabled=disabled value=Next>
</div>
</form>
</body>
</html>
http://jsfiddle.net/uuyAq/
No comments:
Post a Comment