javascript button value by id

Question

Right now I have multiple rows from mysql printing off the following in php:

 while($row=mysql_fetch_array($result)){
echo "<input id='dd".$row["id"]."' onclick='myFunctions()' type='button' value='".$row["id"]."'></form>";}

I am able to retrieve only the most recent value of button dd.

 function myFunctions() {
 var name = document.getElementById("dd").value;

There are multiple rows though, so how can I get the value of the specific one that was clicked?

This is what the html looks like:

 <input id="dd4199" onclick="myFunctions()" value="4199" type="button">
 <input id="dd4198" onclick="myFunctions()" value="4198" type="button">
 <input id="dd4197" onclick="myFunctions()" value="4197" type="button">
 <input id="dd4196" onclick="myFunctions()" value="4196" type="button">

As you can see when it does getElementById it always finds the 4199 because it is the most recent. How can the respective click be found. Thanks!

yeah that's enough, try to pass `this` to your `myFunctionc(this)` and grab it like `this.value` to get value of clicked button. — A l w a y s S u n n y, Mar 11 '18 at 06:31
May I post an answer for your understanding or you can figure it out ? — A l w a y s S u n n y, Mar 11 '18 at 06:33

Jorge Altieri · Answer 1 · 2018-03-11T06:29:48.820

2

You have to create inputs with different ids. It’s not correct to have the same id in 2 different controls.

You can iterate and create ids dd1, dd2, etc.

Check this: Can multiple different HTML elements have the same ID if they're different elements?

edited Mar 11 '18 at 06:29

answered Mar 11 '18 at 06:27

Jorge Altieri

134
1
6

You have to use the length of the result in this case. – Jorge Altieri Mar 11 '18 at 06:31

score 1 · Accepted Answer · answered Mar 11 '18 at 06:34

1

function myFunctions(ele){
var element = ele.value;
alert(element);
}

 <input  onclick="myFunctions(this)" value="4219" type="button">
  <input  onclick="myFunctions(this)" value="5419" type="button">

answered Mar 11 '18 at 06:34

John Willson

444
1
3
13

score 0 · Answer 3 · answered Mar 11 '18 at 06:40

//dont add inine function 

//add a common class
    <input   class="getValue" value="4219" type="button">
    <input  class="getValue" value="5419" type="button">


//add event handler

for (var i = 0; i < getValue.length; i++) {
    getValue[i].addEventListener('click', function(){
alert(this.vaue);
});
}

score 0 · Answer 4 · answered Mar 11 '18 at 06:41

Try

for ($id = 0; $row = mysql_fetch_array($result); $id++) {
    echo "<input id='dd_" . $id . "' onclick='select(" . $id . ")' type='button' value='".$row["id"]."'></form>";
}

Maybe generates:

<input id="dd_0" onclick="select(0)" value="4199" type="button">
<input id="dd_1" onclick="select(1)" value="4198" type="button">
<input id="dd_2" onclick="select(2)" value="4197" type="button">
<input id="dd_3" onclick="select(3)" value="4196" type="button">

Note: the id's are unique, so you can select them individually.

function select(id) {
    var name = document.getElementById("dd_" + id).value;
}

Also, just a tip, your variable names should be more descriptive.
No one knows what dd means.

Good luck!

jasinth premkumar · Answer 5 · 2018-03-11T12:03:18.617

-1

pass this as an argument so when you click button you can get value of clicked button

 function myFunctions(a) {
 var name = a.value;
 console.log(name);
}

 <input  onclick="myFunctions(this)" value="4199" type="button">
 <input  onclick="myFunctions(this)" value="4198" type="button">
 <input  onclick="myFunctions(this)" value="4197" type="button">
 <input  onclick="myFunctions(this)" value="4196" type="button">

edited Mar 11 '18 at 12:03

answered Mar 11 '18 at 06:31

jasinth premkumar

1,430
1
12
22

1

you should not have same id that is not recommendable – John Willson Mar 11 '18 at 06:35
1

we use id for unique element and class for multiple element for the same purpose.If you are using id html takes the one rendered at the last,its not what we want. – John Willson Mar 11 '18 at 06:50
1

sometime it confuse the other developer.Use the specific selector for their defined purpose. – John Willson Mar 11 '18 at 06:51

javascript button value by id

5 Answers5