Jquery submit multiple links

Question

Hello,

I have a page where I am displaying a list of users and next to each user - there is "Add as Friend" link.

Now when a user clicks this "Add as Friend" link - I want to call Jquery and submit that request to the backend PHP.

Typically my experience with Jquery involves having a single form in the page and submitting that form via Jquery - Each form has an ID - Using that ID I call the submit function $("#invite_form").submit(function() - I access the form elements this way var emailval = $("#emails").val();

But now here I dont have a form and this friends list is being generated in a loop. So here are the doubts that I have

1) Do I need to create a unique id in the loop for each a href tag

2) How do I change this $("#invite_form").submit(function() - Will it become ("#ahref1").click(function() where ahref1 is the unique id of the href tag

3) How do I access the friend_id field in Jquery function which is present in the href value something like href="/action?friend_id=32"

Not sure if I'm going on the right track Thanks

Answer 1

You can submit to a back-end script using $.post() or $.get() in jQuery

An example:

$("#ahref1").click(function(){
  var this_friend_id = $(this).prev('input.friend_id').val();
  // Assuming that you store the id in a hidden input field like <input type="hidden" class="friend_id" val="32" /> which is defined just before the a href.
  $.get('/action', {
     friend_id: this_friend_id
    }, function(data){
       // callback after the ajax request
       alert("The response is : "+data);
    });
});

This should solve the problem.

Answer 2

1) No, you don't. You can always create a jquery loop, with .each(), and customize your script like

$(document).ready({
    $('#friend_list a').each(function () {
        // Point to current <a>
        var $this = $(this);
        // ... your code for each a in your list
    });
});

2) You can change the submit function like

$(document).ready({
    $('#friend_list a').each(function () {
        var $this = $(this);
        // Save current href
        var href = $this.attr('href');
        // When user click
        $this.click(function(e) {
            // Doesn't follow the href path
            e.preventDefault();
            // ... your custom operation here
        });
    });
});

3) You can use regex

$(document).ready({
    $('#friend_list a').each(function () {
        var $this = $(this);
        var href = $this.attr('href');
        $this.click(function(e) {
            e.preventDefault();
            // Assuming your link is in form "/action?friend_id=32"
            var re = new RegExp("\d+");
            var id = re.exec(href);
            // I prefer AJAX method, this is just a sample, to complete
            $.post('/action', 
                   { friend_id: id }, 
                   function(data) {
                      // ... result here
                   });
        });
    });
});