Jquery stars and "If then" button link

Question

My jquery/java skills are non-existant.... I need some quick help:

My boss wants to have a form where customers write a review and stars for discounts then hit submit; if they select more than 3 stars it takes them to a separate page than someone who submitted a review with less stars.

Is it possible to have a j query button that changes the link on the fly depending on stars chosen?

I'm using the j query Star-rating plugin:

    <script type="text/javascript" src="../src/rating.js"></script>
    <link rel="stylesheet" href="../src/rating.css" type="text/css" media="screen" title="Rating CSS">

    <script type="text/javascript">
        $(function(){
            $('.container').rating();
        });


    </script>
</head>

<body>

<h1><a title="Full Documentation" href="http://irfandurmus.com/projects/jquery-star-rating-plugin/">jQuery Star Rating Plugin</a></h1>

    <section class="container">
        <input type="radio" name="example" class="rating" value="1" />
        <input type="radio" name="example" class="rating" value="2" />
        <input type="radio" name="example" class="rating" value="3" />
        <input type="radio" name="example" class="rating" value="4" />
        <input type="radio" name="example" class="rating" value="5" />
    </section>

<script type="text/javascript">
if  $('.container').rating(4,5) {
    echo "<a href="eventual link> Click here to receive your discount code</a>" ;
}
else $('.container').rating(1,2,3) {
    echo "<a href="eventual link>Click here to recieve your discount code</a>";
}
   </script>

You _need_ to learn Javascript. You cannot simply write random code that looks like what you want and expect it to work. — SLaks, Jun 12 '13 at 20:32
there's probably a callback function that fires when the rating is submitted. use that to check the rating and forward with javascript. — Horen, Jun 12 '13 at 20:32
Side note: please tell me you are not using w3school.com to learn how to code. I ask because of the `
` tag. — Dom, Jun 12 '13 at 20:32
After you submit, what happens? Does it AJAX post the form? Is there even a form in question here? Does the form post back to a page? If so, why not have that page redirect to a different discount page? Your question is hard to follow. — Eli Gassert, Jun 12 '13 at 20:39

score 2 · Answer 1 · answered Jun 12 '13 at 20:37

2

$('.container').rating({
     callback: function(value){
          if(value > 3){
               $('.container').after('<a href="eventual link"> Click here to receive your discount code</a>');
          }else{
               $('.container').after('<a href="eventual link"> Click here to receive your discount code</a>');
          }
     }
});

answered Jun 12 '13 at 20:37

Rafael Gadotti Bachovas

413
4
13

On each subsequent rating change, won't this add more and more links? – Eli Gassert Jun 12 '13 at 20:38
Yes, but this is a solution to check, I will not worry about all the details of the program. – Rafael Gadotti Bachovas Jun 12 '13 at 20:40
Makes sense. Fair enough. – Eli Gassert Jun 12 '13 at 20:40

score 1 · Answer 2 · answered Jun 12 '13 at 20:33

You could write a function onClick(), attach it to the submit button (or whatever element you want), and then inside the method say

if (stars >= 3) {
 window.location = 'http://www.mysite.com/goodratingpage'
} else
 window.location = 'http://www.mysite.com/badratingpage'
}

The window.location (as you may have guessed) just redirects the user to another page.

score 1 · Answer 3 · edited May 23 '17 at 12:28

1

Using the answer from this very similar question you can attach a callback to the click event of the star rating.

$('.container').rating({ 
  callback: function(value, link){ 
     if (value > 3)
        window.location.href = "http://example.org";
     else
        window.location.href = "http://stackoverflow.com";
  } 
});

edited May 23 '17 at 12:28

Community

1
1

answered Jun 12 '13 at 20:39

Horen

11,184
11
71
113

Jquery stars and "If then" button link

3 Answers3