Radiobutton star rating JS
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hey. Easy 10$ for someone who knows a bit of JS and HTML

Radio button rating with "submit rating" button. Redirects to specific page depending on the radio button selected.

Example:

..........

Please rate!

1(o) 2(o) 3(o)

SUBMIT RATING

..............

select a radio button 1, 2 or 3. Then press "Submit" button. And according to your radio selection you will be redirected to either /page1.html , /page2.html or /page3.html

Cheers

awarded to minhtc

Crowdsource coding tasks.

3 Solutions


Hello

here is my simple solution that uses javascript and jquery to detect click on submit and make the redirection according to the selected value.
In jsfiddle, the redirection is done in the lower right part of the screen and display an error as the page doesn't exist in jsfiddle. If you put it in a complete HTML code it will work.

Do not hesitate if you have any question.

The full HTML code can be seen and copied directly from here


Check this: http://jsfiddle.net/ununoctio/t483V/12/show, it requires only simple javascript.

Source: http://jsfiddle.net/ununoctio/t483V/12

With this solution you can set set the url with data-url attribute for each radio you need, the solution works as a normal form submit, so you can read the POST values on redirect page.

Thank you for the solution This looks good. Only thing why is there the rating value in the redirected url /page1.html?rating=1 this ?rating=1 part should not be there maybe i should clarify. it only looks like a rating form but it is not. just a radio button url selection
Oliver over 4 years ago
This is because the default method of form is GET, and form passes the selected value to page url. If you don't want that value are passed in url you can use POST method, check this example: http://jsfiddle.net/ununoctio/t483V/13/show/, source: http://jsfiddle.net/ununoctio/t483V/13
Stefano Balzarotti over 4 years ago
Winning solution

Try this:

<script>
function redirectpage() {
    var radios = document.getElementsByName('rating');
    var length = radios.length;
    var selected_value = false;
    for (var i = 0; i < length; ++i) {
        if (radios[i].checked) {
            selected_value = radios[i].value;
            break;
        }
    }

    switch(selected_value) {
        case "1":
            window.location = "page1.html";
            break;
        case "2":
            window.location = "page2.html";
            break;
        case "3":
            window.location = "page3.html";
            break;
        default:
            document.getElementById('notice-message').innerHTML = "Please select one";
            break;
    }

}
</script>
<ul>
    <li><input type="radio" name="rating" value="1" />1 star</li>
    <li><input type="radio" name="rating" value="2" />2 star</li>
    <li><input type="radio" name="rating" value="3" />3 star</li>
</ul>
<div id="notice-message"></div>

<button onclick="redirectpage()">SUBMIT RATING</button>
thanks, this is almost exactly what i'm looking for. Could you please help out and add a message "please select one" when no radios have been selected, but the submit button was pressed. just plain text under the submit button. and it's yours, very likely its still yours if you don't feel like adding it. i'll just wait 24hrs
Oliver over 4 years ago
updated as your requirement.
minhtc over 4 years ago
View Timeline