Unique HTML id's via a PHP loop

Question

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">
    </form>
</div>

Thanks in advance for the help!

DaveRandom · Accepted Answer · 2011-10-15 22:07:06Z

1

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...

edited Oct 15, 2011 at 22:07

answered Oct 15, 2011 at 22:02

DaveRandom

88.8k11 gold badges159 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user997282 Over a year ago

Thanks Dave. I'm going to play around with your recommendation. I'll post my results. Hope the baby gives you a break!

user997282 Over a year ago

could you show me the solution you would use if you have the time? I still can't get this to work. Thanks.

spaceagestereo · Accepted Answer · 2011-10-15 22:05:58Z

0

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) { .. }

answered Oct 15, 2011 at 22:05

spaceagestereo

5541 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Unique HTML id's via a PHP loop

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related