harunB10 harunB10 - 4 years ago 83
HTML Question

jQuery - Get user id and article id for each article

I am trying to save specified article as favorite. So I have a button which should get id of that article, and the id of the user (I will store them into db).
I'm trying to do something like this:
This is a blade...

@foreach ( $results['matches'] as $doc => $docinfo )
.
.
.
<button class="bookmark"><img id="favorite" align="right" src="{{ asset('/img/icon_add_fav.png')}}"></button>
<input type="hidden" id="{{Auth::user()->id}}" value="{{Auth::user()->id}}">
<input type="hidden" id="{{$docinfo['attrs']['sid']}}" value="{{$docinfo['attrs']['sid']}}">
.
.
.
@endforeach


And I've tried so far to output the values in console:

<script type="text/javascript">
$('#favorite').click(function(){
addFavorite();
});

function addFavorite(){
var idUser = document.getElementById({{Auth::user()->id}}).value;
var idArticle= document.getElementById({{$docinfo['attrs']['sid']}}).value;
console.log(idUser + '#' + idArticle);
}
</script>


It only prints to console if the button of the first article is clicked. However, it prints the id of the last article...

For example...

<button class="bookmark">
<img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
</button>
<input type="hidden" id="15" value="15">
<input type="hidden" id="1" value="1">

<button class="bookmark">
<img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
</button>
<input type="hidden" id="15" value="15">
<input type="hidden" id="2" value="2">

<button class="bookmark">
<img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
</button>
<input type="hidden" id="15" value="15">
<input type="hidden" id="3" value="3">


Here I have three buttons. When I press the second and third one, nothing happens. When I press the first one, it doesn't print
15#1
like it should, but it prints
15#3
.

I want to print the id and the article id when I click the button of the related article...

Answer Source

do something like this bind click on button's class bookmark

$(".bookmark").on("click",function(){
var idUser = $(this).next().val();
var idArticle = $(this).next().next().val();
console.log(idUser + "#" + idArticle);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="1" value="1">

<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="2" value="2">

<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="3" value="3">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download