[jquery] jquery <a> tag click event

I am building a code which displays user information on search. User information, is then displayed in a fieldset, and a image, first name, last name and few profile info. is shown, and in the bottom of the fieldset, there's a add as friend hyperlink:

<a href="#" id="aaf">add as friend</a>

Now I want to use jquery $post() method to interact with another page. I also have a hidden field inside that user fieldset which has the user id value. Now, when i create a click functionality using jquery, i am not able to access the different hidden field values. Now i want to know how to achieve this functionality? For checking if i can get the value of hidden fields inside a set of code, i did this.

$(document).ready(function () {
    $("a#aaf").bind('click', function () {
        alert($("#uid").val());
    });
});

But I'm only getting the value of first fieldset, not others. Kindly guide me in this.

Thanks in advance.

EDIT: How to get it in each tag click event? I'm putting some more code here,

<?php foreach($query->result() as $row){?>
<fieldset>
    <legend>
        <?php echo $row->firstname.' '.$row->lastname;?>
    </legend>
    <img src='<?php echo $row->profile_img_url;?>'/><br>
    <a href="#" id="aaf">add as friend</a>
    <input name="uid" type="hidden" value='<?php echo $row->uid;?>' id="uid">
</fieldset>

This question is related to jquery html ajax post

The answer is


All the hidden fields in your fieldset are using the same id, so jquery is only returning the first one. One way to fix this is to create a counter variable and concatenate it to each hidden field id.


That's because your hidden fields have duplicate IDs, so jQuery only returns the first in the set. Give them classes instead, like .uid and grab them via:

var uids = $(".uid").map(function() {
    return this.value;
}).get();

Demo: http://jsfiddle.net/karim79/FtcnJ/

EDIT: say your output looks like the following (notice, IDs have changed to classes)

<fieldset><legend>John Smith</legend>
<img src='foo.jpg'/><br>
<a href="#" class="aaf">add as friend</a>
<input name="uid" type="hidden" value='<?php echo $row->uid;?>' class="uid">
</fieldset>

You can target the 'uid' relative to the clicked anchor like this:

$("a.aaf").click(function() {
    alert($(this).next('.uid').val());
});

Important: do not have any duplicate IDs. They will cause problems. They are invalid, bad and you should not do it.


Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to ajax

Getting all files in directory with ajax Cross-Origin Read Blocking (CORB) Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource Fetch API request timeout? How do I post form data with fetch api? Ajax LARAVEL 419 POST error Laravel 5.5 ajax call 419 (unknown status) How to allow CORS in react.js? Angular 2: How to access an HTTP response body? How to post a file from a form with Axios

Examples related to post

How to post query parameters with Axios? How can I add raw data body to an axios request? HTTP POST with Json on Body - Flutter/Dart How do I POST XML data to a webservice with Postman? How to set header and options in axios? Redirecting to a page after submitting form in HTML How to post raw body data with curl? How do I make a https post in Node Js without any third party module? How to convert an object to JSON correctly in Angular 2 with TypeScript Postman: How to make multiple requests at the same time