Best way to target user’s post?

[elitis]

I need to target specify id's which could range from any number. All posts are retrieved from a database and accompanying the post nested in an <article> tag is the id of the post (i.e <article id= ($databaseId) class=posts>). Whenever a user clicks on the "comment" button placed within each article, I need to target the id of the post within the article tag and using the InnerHTML (+=) property create a form for a user to reply.

I just can't wrap my head around how to do this. I was thinking about using a for loop but then every element with that id would be targeted. But then again it would only be 1 element with a number id...

[felgall]

Originally Posted by elitis

I just can't wrap my head around how to do this. I was thinking about using a for loop but then every element with that id would be targeted. But then again it would only be 1 element with a number id...

If you know the id then use document.getElementById to get the tag that has the id directly (ids MUST be unique within a page). From there you can apply whatever navigation you need to get to where you want.

[rnd me]

you might want to unit test and form code that is injected via innerHTML; i know IE before version 9 had a lot of trouble on some form attribs, name most notably.
since you will only have one form per page, you can use IDs on the form instead of name.

[elitis]

Originally Posted by felgall

If you know the id then use document.getElementById to get the tag that has the id directly (ids MUST be unique within a page). From there you can apply whatever navigation you need to get to where you want.

I know this, I was saying that using a for loop for this would get every element on the page with that id. But, as you said, since id's must be unique on the page, the for loop would only get the one element. Which I guess could be the solution to this.

My problem is each <article> has an id (<article id='.$noid['id'].' class="post">). Not the same id, but each has a corresponding id with the post id retrieved from the database. Within each <article> is also a set of links, at this point the only relevant one is the comment link (<a id="coment" href="#" class="postnav">Comment</a>). I need to get the article's id when the comment link is clicked in order to accomplish the rest.

The id could range from 1-infinity. So how could I get the corresponding article's id from the comment link nested within that <article>?

[Old Pedant]

Again, you are misusing HTML.

This would be *ILLEGAL* HTML:

Within each <article> is ...the comment link <a id="coment" href="#" class="postnav">Comment</a>

Once again: IDS MUST BE UNIQUE ON A PAGE. So using id="coment" (I assume that should really be "comment"?) is illegal.

EASY ANSWER:

<a id="comment<?php echo $noid['id']; ?> href="#" class="postnav">

Then, in your JS code that process a click on such a link, simply pick up the ID of the <a> tag, strip off the first 6 characters, and there is your ID!

I don't know how you are attaching the onclick events to those <a> tags, but I would assume something along these lines:

<script type="text/javascript">
(
  function( )
  {
      var postlinks = document.getElementsByClassName("postnav");
      for ( var p = 0; p < postlinks.length; ++p ) 
      {
          postlinks[p].onclick = fillinCommentForm;
      }
      
      function createCommentForm( )
      {
          var form = document.getElementById("commentForm");
          form.articleid.value = this.id.substring(6);
          ... whatever else is needed ...

          // see below
          var div = document.getElementById("hideForm");
          div.style.left = ...;
          div.style.top = ...; // possibly position it above the comment??
          div.style.display = "block";
      }
  }
)();
</script>

And I *certainly* would NOT create the form or its contents using innerHTML. There is no reason for that.

If you don't want the form to show up until the user clicks on a comment link, then just hide it until then. Perhaps something like this:

<div id="hideForm" style="display: none; position: absolute; ...">
    <form id="commentForm" ...>
        <input type="hidden" name="articleid" />
        ...
    </form>
</div>