0

So, I load the data from the database. Then when I click the data, I want the value of the textbox automatically changed into what I clicked. But it seems like it only applies to the first data,and when I click the 2nd or 3rd data, the textbox still show the first data

//the data that covered by <a> as clickable
<?php foreach ($getData as $key): ?>
<tr>
    <td>
        <a href="#!" onclick="myFunction()"><p id="getid"><?php echo $key->id; ?></p></a>
    </td>
    <td><?php echo $key->name; ?></td>
    <td><?php echo $key->job; ?></td>
</tr>
<?php endforeach ?>

//the textbox
<input id="code" type="text" name="id" required>

<script type="text/javascript">
function myFunction() {
  document.getElementById("code").value = document.getElementById("getid").innerHTML;
}
</script>
Ulysse BN
  • 10,116
  • 7
  • 54
  • 82
Kuroi23
  • 3
  • 5

2 Answers2

0

The issue is that you use the same id getid everytime, hence your function cannot know which element you are talking about (in fact a valid html document SHOULD contain each id only once). There a lot of great solutions to this problem. Here is an approach I like:

function myFunction(el) {
  document.getElementById("result").innerText = el.innerText
}
<p id="result"></p>
<table id="table">
<tr><td><a href="#" onclick="myFunction(this)"><p>1</p></a></td></tr>
<tr><td><a href="#" onclick="myFunction(this)"><p>2</p></a></td></tr>
<tr><td><a href="#" onclick="myFunction(this)"><p>3</p></a></td></tr>
<tr><td><a href="#" onclick="myFunction(this)"><p>4</p></a></td></tr>
<tr><td><a href="#" onclick="myFunction(this)"><p>5</p></a></td></tr>
</table>

Referencing current element in the function allows me to get proper element's text.

Not that I prefered innerText over innerHTML because the latter doesn't seem necessary, and the former is safer, preventing sql injection attacks.

Ulysse BN
  • 10,116
  • 7
  • 54
  • 82
  • If it was useful to you, you can upvote, or even [accept the answer](https://meta.stackexchange.com/a/5235/366929) if it is the one you ended up using. – Ulysse BN Sep 23 '19 at 12:30
  • so that's how i close the case? I'm new here so i don't know that, thank's again :) – Kuroi23 Sep 24 '19 at 01:57
  • Exactly! You can read the link I shared in my previous comment as well, it is a thorough answer about how to handle answers – Ulysse BN Sep 24 '19 at 07:34
0

First of all, you are using id in an inappropriate way - there should be only one unique id on page. Since you are printing <p id="getid"><?php echo $key->id; ?></p> in a loop it will render element with id getid multiple times.

In the script you are using getElementById("getid") and it will take the first instance of an element with id getid hence you are always getting content of the first element.

The most appropriate way yould be to pass element to the function and get the content in there, like:

...
<a href="#!" onclick="myFunction(this)"><p><?php echo $key->id; ?></p></a>
...
function myFunction(el) {
  document.getElementById("code").value = el.innerText;
}
Mateusz Staniuk
  • 189
  • 5