How do I make links generate in Javascript Form Depending on Answers

Question

1.00/5 (1 vote)

See more:

How do I get this script to generate the links inside of the code depending on what pictures are selected? http://jsfiddle.net/P74tn/1/

<!DOCTYPE html>
<html>
  
  <style>
    .radio div{
    background: url($image) no-repeat #EEE;
    height:50px;
    width: 50px;
    border: 2px solid #DDD;
    padding: 5px;
    float: left;
    margin-right: 10px;
    cursor: pointer;
    &.active{
        box-shadow: 0px 0px 2px 1px blue inset;
    }
}
  </style>

<body>

<script>
$('.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);
}); 
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>";
            }
        }
    }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'>
  
  
  <h4>What carrier do you have?</h4>
    <div class="radio" id="form">
      <div style="list-style: none;"  önclick=tryToMakeLink(); name="q1" value="AT&T"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /></div>
        <div style="list-style: none;"  önclick=tryToMakeLink(); name="q1" value="Other"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /></div>
        <div style="list-style: none;"  önclick=tryToMakeLink(); name="q1" value="Unlocked"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /></div>
    </div>
      
  <br /><br /><br />
      
  <h4>What is your phones capicity?</h4>
    <div class="radio" id="form">
        <div style="list-style: none;" type="radio"  önclick=tryToMakeLink(); name="q2" value="8GB"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /></div>
        <div style="list-style: none;" type="radio"  önclick=tryToMakeLink(); name="q2" value="16GB"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /></div>
    </div>

  <br /><br /><br />
      
  <h4>What color is your phone?</h4>
    <div class="radio" id="form">
        <div style="list-style: none;" type="radio"  önclick=tryToMakeLink(); name="q3" value="Black"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /></div>
        <div style="list-style: none;" type="radio"  önclick=tryToMakeLink(); name="q3" value="White"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /></div>
    </div>
      
    

    <br>
    <div id=linkDiv>
     <input type=button disabled=disabled value=Next>
    </div>
</form>
</body>
</html>

Posted 25-Aug-13 10:05am

Member 10231203

Add a Solution

Comments

Sergey Alexandrovich Kryukov 25-Aug-13 16:38pm

Not clear. Who told you to use this script? What should it do, exactly?
—SA

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)