Unique HTML id's via a PHP loop

First, I'm new to form and looking forward to all your insight.

My issue: I'm building a small site and I've run into a problem generating unique HTML ids. I'm generating the HTML via a loop in PHP, sent to a smarty template. I admit, my JavaScript abilities are not good which is why I can't figure this out… All I want to is to display the comment form under each article when the "add a Comment" link is clicked.

Here is the JavaScript -

<script>
    function show_cform() {
        o = document.getElementById("comment_link");
        if (o) { o.style.display = ""; }
        o = document.getElementById("comment_form");
        if (o) { o.style.display = "none"; }
    }   
</script> 

And the HTML that repeats several times -

<div id="comment_form">
    <!-- Article Content Here -->
    <a href="javascript:show_cform();">Add a Comment</a>
</div>

<div id="comment_link" style="display: none;">
    <form method="post" action="blog_comment.php">
        <input type="hidden" name="ID" value="{$id}">
        Your Name:<br />
        <input name="name" type="text" />
        <br /><br />
        Comment:<br />
        <textarea name="comment" rows="8" cols="40"></textarea>
        <br /><br />
        <input type="submit" value="Post comment"&g开发者_运维知识库t;
    </form>
</div>

Thanks in advance for the help!

---

I would do something like this (CORRECTED):

<script>
  function show_cform(formDiv) {
    // We pass the container into the function, so we can work out the rest
    var parts, idNum;
    // Get the number from the id
    parts = formDiv.id.split('_');
    idNum = parts[parts.length -1];
    // Change the display of the elements
    formDiv.style.display = "none";
    document.getElementById("comment_link_"+idNum).style.display = "block";
  }   
</script>

...and...

<?php

  // Presumably you are generating this in a loop. I don't know how
  // your loop currently works, but you just need an incrementing
  // id that is unique to each iteration, and put it onto the end
  // of the id's of the elements

  // For example
  for ($i = 0; ($someCondition); $i++) {

?>

<div id="comment_form_<?php echo $i; ?>">

    <!-- Article Content Here -->

        <a href="javascript:show_cform(this.parentNode);">Add a Comment</a>
        </div>
        <div id="comment_link_<?php echo $i; ?>" style="display: none;">

                <!-- etc etc -->

  <?php } ?>

Actually, that's nothing like what I'd do - but working with what you have that is what I'd do. I don't have the time to explain exactly how I'd handle it at the moment, but I may edit this answer when I don't have a crying baby to deal with...

---

First off, I highly recommend using jQuery or some sort of javascript abstraction library. It will make your life a lot easier. I'm assuming you're using some sort of loop to pump out all those comment forms. I would suggest using some sort of prefix or suffix for your id and set that in the div id and in the href you have above. In this case I'm just using the prefix comment_link and the suffix is an integer that is incremented every time in the loop:

<a href="javascript:show_cform(comment_link1);">Add a Comment</a>
<div id="comment_link1" style="display: none;">

and your function:

function show_cform(theId) { .. }