How can I get the value of `<a>` tag from blade into `js` file using JQuery?

<div class="p-rating">
<a value ="1" type="button" class="btn RatingAjax1"><i class="fa fa-star-o"></i></a>
<a value="2" type="button" class="btn RatingAjax2"><i class="fa fa-star-o"></i></a>
<a value="3" type="button" class="btn RatingAjax3"><i class="fa fa-star-o"></i></a>
<a value="4" type="button" class="btn RatingAjax4"> <i class="fa fa-star-o"></i></a>
<a value="5" type="button" class="btn RatingAjax5"><i class="fa fa-star-o fa-fade"></i></a></div>

Here is my process i have given different class name for every button. For one start RatingAjax1 upto 5 star

$(document).ready(function() {
    var i;
    for (i = 1; i <= 5; i++) {
        $(".RatingAjax" + i).click(function() {
            alert("clicked");
            alert(i); 
            
        });
    }
});

In this js file I want to get the value of <a> tag depending on click event.

How When I click on first button then it value ofi should be 1. If i clicked on 5th button value of i should be 5.

How to solve this problem?

Sinnbeck

5 years ago

Level 102

What happens when you click currently?

Also make sure you prevent the default action

$(".RatingAjax" + i).click(function(e) {
            e.preventDefault();
            alert("clicked");
            alert(i); 
            
        });

imrulhasan273

5 years ago

Level 1

it get the value of i=6 even i click on first <a> tag. Because after loop complete the value of i get

imrulhasan273

5 years ago

Level 1

Still I get i=6... How can I get the exact value?

MichalOravec

5 years ago

Best Answer

Level 75

In html

<div class="p-rating">
    <a data-value="1" class="btn RatingAjax1">
        <i class="fa fa-star-o"></i>
    </a>
    
    <a data-value="2" class="btn RatingAjax2">
        <i class="fa fa-star-o"></i>
    </a>
    
    <a data-value="3" class="btn RatingAjax3">
        <i class="fa fa-star-o"></i>
    </a>
    
    <a data-value="4" class="btn RatingAjax4">
        <i class="fa fa-star-o"></i>
    </a>
    
    <a data-value="5" class="btn RatingAjax5">
        <i class="fa fa-star-o fa-fade"></i>
    </a>
</div>

In js

$(function() {
    $(document).on('click', '.p-rating a', function(e) {
        e.preventDefault();

        var el = $(this);

        var value = el.data('value');

        alert(value);
    });
});

And then you get exact value.

1 like

imrulhasan273

5 years ago

Level 1

thanks Sister.... <3 <3 it works like a charm...

Please or to participate in this conversation.