Getting the POST_ID of the Nearest input Field Using Jquery

Question

I have a code like the following one, and I want to get the unique post_id of the corresponding post when i click on like/comment/star.

I have added a hidden input tag to store the value of the post_id of every post and trying to get the value whenever the like/comment/star is being clicked. But I couldn't get the value.

Is there any other way to achieve this? or can i go with the same logic. I am using ajax to make like/comment/star to work (no refresh). So, how can i get the post_id so that I can use the Ajax code to communicate with server.

$(".like").on("click", function() {
  var val = $(this).closest("div.post").find("input[id='post_id']").val();
  alert(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="post" id="post-1">
  <h1>
    Post Title1
  </h1>
  <input type="hidden" class="post_id" value="post_id-1">
  <img alt="Image-1">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

<div class="post" id="post-2">
  <h1>
    Post Title2
  </h1>
  <input type="hidden" class="post_id" value="post_id-2">
  <img alt="Image-1">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

....

<div class="post" id="post-n">
  <h1>
    Post Titlen
  </h1>
  <input type="hidden" class="post_id" value="post_id-n">
  <img alt="Image-n">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

Answer 1

JS Code should be like:

  var val = $(this).parent(".post").find(".post_id").val();

And make your HTML like:

$(".like").on("click", function() {
  var val = $(this).parent(".post").find(".post_id").val();
  alert(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="post" id="post-1">
  <h1>
    Post Title1
  </h1>
  <input type="hidden" class="post_id" value="post_id-1">
  <img alt="Image-1">
  <img class="like" alt="like">
  <img class="star" alt="star">
  <img class="comment" alt="comment">
</div>

<div class="post" id="post-n">
  <h1>
    Post Titlen
  </h1>
  <input type="hidden" class="post_id" value="post_id-n">
  <img alt="Image-n">
  <img class="like" alt="like">
  <img class="star" alt="star">
  <img class="comment" alt="comment">
</div>

The reason why I have used class="post_id" is that id of a input field or a element cant be duplicated.

For your knowledge I have adding a NOTE below regarding multiple use of similar id for a HTML element.

Can multiple elements have the same ID?

Yes - whether they are the same tag or not, browsers will render the page even if multiple elements have the same ID.

Is it Valid HTML?

No. This is still true as of the HTML 5.1 spec. However, the spec also says getElementById must return the first element with the given ID, making the behavior not undefined in the case of an invalid document.

What are the consequences of this type of invalid HTML?

Most (if not all) browsers have and still do select the first element with a given ID, when calling getElementById. Most libraries that find elements by ID inherit this behavior. Most (if not all) browsers also apply styles assigned by id-selectors (e.g. #myid) to all elements with the specified ID. If this is what you expect and intend, then there are no unintended consequences. If you expect/intend something else (e.g. for all elements with that ID to be returned, or for the style to apply to only one element) then your expectations will not be met and any feature relying on those expectations will fail.

Some javascript libraries do have expectations that are not met when multiple elements have the same ID

Conclusion

If you your code works as expected in your current environments, and these IDs are used in a predictable/maintainable way, then there are only 2 practical reasons to consider NOT TO DO this:

• To avoid the chance that you are wrong, and one of the libraries you use actually does malfunction when multiple elements have the same ID.
• To maintain forward-compatibility of your website/application with libraries or services (or developers!) that malfunction when multiple elements have the same ID, that you may encounter in the future.

Should IDs be unique? YES.

Must IDs be unique? NO, at least IE and FireFox allow multiple elements to have the same ID

Answer 2

You could use the siblings function to get the input value.

e.g.

$(".like,.comment,.star").on("click", function() {
  var val = $(this).siblings("input.post_id").val();
  console.log("%s clicked on post %s.", this.className, val);
});

.like,
.comment,
.star {
  width: 20px;
  height: 20px;
}

.like {
  background: blue;
}

.comment {
  background: orange;
}

.star {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="post" id="post-1">
  <h1>
    Post Title1
  </h1>
  <input type="hidden" class="post_id" value="post_id-1">
  <img alt="Image-1">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

<div class="post" id="post-2">
  <h1>
    Post Title2
  </h1>
  <input type="hidden" class="post_id" value="post_id-2">
  <img alt="Image-1">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

<div class="post" id="post-n">
  <h1>
    Post Titlen
  </h1>
  <input type="hidden" class="post_id" value="post_id-n">
  <img alt="Image-n">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

The solution by Taki would be best though. If you need to get the id on click for all 3 images you could set the data-id to the parent div instead.

e.g.

HTML:

<div class="post" id="post-n" data-id="n">
  <h1>
    Post Titlen
  </h1>
  <img alt="Image-n">
  <img class="like">
  <img class="star">
  <img class="comment">
</div>

JS:

var id = $(this).parent("div").data("id")

Answer 3

you can use the data attribute on the image to avoid hidden inputs and repeating unique ids :

$(".like").on("click", function() {
  var val = $(this).data('id');
  alert(val);
});

.like {
  curosor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post" id="post-1">
  <h1>
    Post Title1
  </h1>
  <img alt="Image-1">
  <img class="like" alt="like" data-id="post_id-1">
  <img class="star">
  <img class="comment">
</div>

<div class="post" id="post-2">
  <h1>
    Post Title2
  </h1>
  <img alt="Image-1">
  <img class="like" alt="like" data-id="post_id-2">
  <img class="star">
  <img class="comment">
</div>

....

<div class="post" id="post-n">
  <h1>
    Post Titlen
  </h1>
  <img alt="Image-n">
  <img class="like" alt="like" data-id="post_id-n">
  <img class="star">
  <img class="comment">
</div>