Variable for unique ids in JavaScript function

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?

You'd be generating closest1, closest2, etc..., but looking for closest — Marc B
– Marc B, Commented Mar 28, 2012 at 18:37
Right, I don't know how to write looking for "closest1, closest2" into the function — mattrweaver
– mattrweaver, Commented Mar 28, 2012 at 18:42
Just do onClick="setAuthor(this)" and change the signature of the function to function setAuthor(element) {, then do var author = element.innerHTML — david
– david, Commented Mar 28, 2012 at 18:47
Yep, that works. But it enters each name into the same input element. I have edited the original post to show that each author has an input field associated with it. Would I add a counter in the function to assign the function? — mattrweaver
– mattrweaver, Commented Mar 28, 2012 at 19:26

mattrweaver · Accepted Answer · 2012-03-29 21:00:59Z

2

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.

edited Mar 29, 2012 at 21:00

mattrweaver

173 bronze badges

answered Mar 28, 2012 at 19:28

mowwwalker

17.5k30 gold badges109 silver badges166 bronze badges

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

3 Comments

mattrweaver Over a year ago

I missed those edits @outis, thanks. I see that the ID is getting passed, but the author value is not finding its way to the input fields. Do I need to change the id for the input field? Like to: <input class="authors" id="author_name_{$objkey}" type="text" name="author_name" value="' . $author . '" />';

mattrweaver Over a year ago

I removed the curly braces around $objkey and replaced it as follows: id="author_name_' . $objkey . '" type="text" name="author_name" value="' . $author . '" />'; This enables the first name to be saved to the associated input field, but none of the other names, when clicked, populate any inputs. Getting closer.

mattrweaver Over a year ago

Eureka! the form element needed to be unique, too. I did the same approach as for the input element for the form id: echo '<form id="myform_' . $objkey . '">'; The id is generated in the above code. document.forms["myform_"+id].elements["auth_"+id].value = author; Thanks for all of the help

Collectives™ on Stack Overflow

Variable for unique ids in JavaScript function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related