Return to Snippet

Revision: 52654
at October 28, 2011 21:31 by neoline


Updated Code
//HTML:
<form class="rating" method="post">
            <input type="radio" id="star5" name="rating" value="5" onclick="postToController();" /><label for="star5" title="Super !!">5 stars</label>    
            <input type="radio" id="star4" name="rating" value="4" onclick="postToController();" /><label for="star4" title="Geil">4 stars</label>
            <input type="radio" id="star3" name="rating" value="3" onclick="postToController();" /><label for="star3" title="Gut">3 stars</label>
            <input type="radio" id="star2" name="rating" value="2" onclick="postToController();" /><label for="star2" title="So gut wie">2 stars</label>
            <input type="radio" id="star1" name="rating" value="1" onclick="postToController();" /><label for="star1" title="Schlecht">1 star</label>
</form>


//Javascript:
function postToController() {
        for (i = 0; i < document.getElementsByName('rating').length; i++) {
                if(document.getElementsByName('rating')[i].checked == true) {
                    var ratingValue = document.getElementsByName('rating')[i].value;
                    break;
                }
        }
        alert(ratingValue);
}

Revision: 52653
at October 28, 2011 21:30 by neoline


Initial Code
HTML:
<form class="rating" method="post">
            <input type="radio" id="star5" name="rating" value="5" onclick="postToController();" /><label for="star5" title="Super !!">5 stars</label>    
            <input type="radio" id="star4" name="rating" value="4" onclick="postToController();" /><label for="star4" title="Geil">4 stars</label>
            <input type="radio" id="star3" name="rating" value="3" onclick="postToController();" /><label for="star3" title="Gut">3 stars</label>
            <input type="radio" id="star2" name="rating" value="2" onclick="postToController();" /><label for="star2" title="So gut wie">2 stars</label>
            <input type="radio" id="star1" name="rating" value="1" onclick="postToController();" /><label for="star1" title="Schlecht">1 star</label>
</form>


function postToController() {
        for (i = 0; i < document.getElementsByName('rating').length; i++) {
                if(document.getElementsByName('rating')[i].checked == true) {
                    var ratingValue = document.getElementsByName('rating')[i].value;
                    break;
                }
        }
        alert(ratingValue);
}

Initial URL
http://leaverou.me/2011/08/accessible-star-rating-widget-with-pure-css/

Initial Description
Get value from 5 Star Rating

Initial Title
Get value from Radio inputs in JavaScript (5 Star Rating)

Initial Tags
javascript

Initial Language
JavaScript