Jose Osorio Jose Osorio - 5 months ago 17
jQuery Question

Onclick Anchor not working

I have 5 Rating Stars Radio Buttons, they are working fine, I also have a anchor tag and I need to check if any of the radio buttons has been checked before the redirection.

HTML

<-- index.html -->

<div class="stars-div">
<div class="stars">
<input class="star-input star-5" id="star-5" type="radio" name="star" value="5"/>
<label class="star-icon star-5" for="star-5"></label>
<input class="star-input star-4" id="star-4" type="radio" name="star" value="4"/>
<label class="star-icon star-4" for="star-4"></label>
<input class="star-input star-3" id="star-3" type="radio" name="star" value="3"/>
<label class="star-icon star-3" for="star-3"></label>
<input class="star-input star-2" id="star-2" type="radio" name="star" value="2"/>
<label class="star-icon star-2" for="star-2"></label>
<input class="star-input star-1" id="star-1" type="radio" name="star" value="1"/>
<label class="star-icon star-1" for="star-1"></label>
</div>
</div>

<div class="button-div">
<a href="" class="btn btn-default btn-test" id="okB">
<b>OK</b>
&nbsp;
<span class="glyphicon glyphicon-ok"></span>
</a>
</div>


Now in my main.js

$(document).ready(function() {
var okButton = document.getElementById('okB');
$("#okB").on("click", isRated);
function isRated () {
var value = $("input[name=star]:checked").val();
console.log('hola click')
}
});


Ok, the problem is that every time I click the anchor nothing happen. What can I do to fish this ?

Answer

You should decide to use DOM or jQuery

Here is a link that does not reload the page - the code can be put into the head of the page

$(document).ready(function() {
  $("#okB").on("click", function(e) {
    e.preventDefault(); // do not (re)load the page in the href
    var value = $("input[name=star]:checked").val();
    console.log('hola click',value)
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="btn btn-default btn-test" id="okB">
    <b>OK</b>
    &nbsp;
    <span class="glyphicon glyphicon-ok"></span>
</a>
<div class="stars-div">
    <div class="stars">
        <input class="star-input star-5" id="star-5" type="radio" name="star" value="5"/>
        <label class="star-icon star-5" for="star-5"></label>                                   
                            <input class="star-input star-4" id="star-4" type="radio" name="star" value="4"/>
        <label class="star-icon star-4" for="star-4"></label>
                            <input class="star-input star-3" id="star-3" type="radio" name="star" value="3"/>
        <label class="star-icon star-3" for="star-3"></label>
                            <input class="star-input star-2" id="star-2" type="radio" name="star" value="2"/>
        <label class="star-icon star-2" for="star-2"></label>
                            <input class="star-input star-1" id="star-1" type="radio" name="star" value="1"/>
        <label class="star-icon star-1" for="star-1"></label>
    </div>
</div>

Comments