Question

I have an onclick event called in a PHP foreach loop for several items whose author name I need to click. Only one name was getting generated, so I know that I must have a unique id for each HTML element. I already have a variable $objkey for a counter used in the loop so I appended it to the id.

<?php
//This is the item that appears in the loop. 
//Currently, clicking on each one that is generated only generates the first author name
//The correct author as passed by PHP displays in the loop.
//$closest is the value of the author's name.
echo 'Click name to add <span><button id="closest' . $objkey . '"  onClick="setAuthor()">' . $closest . '</button></span><br />';
?>

I have done a print_r('$objkey); and the appropriate value for the counter is getting passed along.

I want the value of this button element $closest to be passed to an input field. I have appended the variable to both the input’s id and name elements (not sure if that helps) (UPDATE: There is an input field for each of the authors that needs to get the value):

<?php 
echo '<input id="author_name' . $objkey . '"  type="text" name="author_name' . $objkey .  '" value="' . $author . '" />'; 
?>

Where I’m stuck is with my function:

<script type="text/javascript">function setAuthor() {
var author = document.getElementById("closest").innerHTML;
window.alert(author);
document.forms["myform"].elements["author_name"].value = author; }</script>

How do I create a variable in the function for the unique ids so that each looped item generates distinct names?

Answer 1

One way to do it is to pass this to the the setAuthor function:

<?php
//This is the item that appears in the loop. 
//Currently, clicking on each one that is generated only generates the first author name
//The correct author as passed by PHP displays in the loop.
//$closest is the value of the author's name.
echo "Click name to add <button id='closest_{$objkey}' onClick='setAuthor(this)'>{$closest}</button><br/>";
?>

With this approach, you can access the element within setAuthor:

<script type="text/javascript">
function setAuthor(el) {
    var author = el.innerHTML,
        id = el.id.replace(/^closest_/, '');
    if (console) {
        console.log(author);
    }
    document.forms["myform"].elements["author_name_" + id].value = author;
}
</script>

However, you shouldn’t set onclick inline and for each element. You should use an event registration function.