Call data using buttons created from looped array

Question

Hope the tittle fits my question.

I made a loop to display data from table and it is showed as buttons.

<?php
$a=0;
while($row = mysql_fetch_assoc($execute)){
    $ID = $row['id'];
    $name[] = $row['names'];
    echo "<button name=\"btn$ID\" class='btnName' onClick='showForm()'>$name[$a]</button>";
    $a++;
}

<div id="result" style="display: none;">
    //name from clicked buttons should be displayed here
</div>
?>

And here is the function:

<script type="application/javascript">
    function showForm(){
        document.getElementById('result').style.display="block";
    }
</script>

The 'id' field is only an incremented field. If I click the button, I want to display the name I click from one of those buttons in the result div.

How do I call it?

Don't use the deprecated and insecure mysql_*-functions. They have been deprecated since PHP 5.5 (in 2013) and were completely removed in PHP 7 (in 2015). Use MySQLi or PDO instead. — M. Eriksson
– M. Eriksson, Commented Feb 21, 2019 at 12:46
You could pass the name as an argument to the function do do whatever it is you are trying to do with the button name — tshimkus
– tshimkus, Commented Feb 21, 2019 at 12:49
You want to show name attribute or the name that you have fetched from database? — Kamal Paliwal
– Kamal Paliwal, Commented Feb 21, 2019 at 12:49

Thaier Alkhateeb · Accepted Answer · 2019-02-21 13:11:03Z

2

change your function to be like this

 function showForm(elem){
    document.getElementById('result').innerHTML = elem.innerHTML;
    document.getElementById('result').style.display="block";
}

and call it so

onClick='showForm(this)'

answered Feb 21, 2019 at 13:11

Thaier Alkhateeb

5856 gold badges9 silver badges18 bronze badges

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

6 Comments

amuntazar Over a year ago

it works! but if i put some codes like php to the result div, it only shows the name and nothing else. What should i change or add to the function?

Thaier Alkhateeb Over a year ago

What do you want to show exactly ? This function takes every thing in the button and puts it in the result div

amuntazar Over a year ago

sorry for late respond. I made another div inside the result div like. So it's like a modal. The code you provided works great to call the name from database but doesn't show anything else . I wonder why?

amuntazar Over a year ago

Forgive my misunderstanding. It actually works. I only need to change a bit when I put it to my real code. Marked as answer :)

Thaier Alkhateeb Over a year ago

You can put everything you want as Html in one div which has class or id like(<div id="myData"> your data</div>) and you can take this data from this div to another by calling a function like yours to get that innerHtml to another div . I think it would be easier if you used Jquery.

|

Arif · Accepted Answer · 2019-02-21 12:47:06Z

0

Not sure if I understood your problem correctly but if I did, try the function below.

function showForm(ev) {
  // Or if you want to get the text of the button change it to ev.target.innerText
  const name = ev.target.getAttribute("name"); 

  const result = document.getElementById('result');

  result.innerText = name;
  result.style.display = 'block';
}

answered Feb 21, 2019 at 12:47

Arif

1,6419 silver badges18 bronze badges

2 Comments

amuntazar Over a year ago

I'm sorry to confuse you. What I meant was I want to get the name i fetched from my database. For example, If I click button "John", it shows "John" in the result div. But I'll try your function first soon.

amuntazar Over a year ago

It doesn't work for name constrain and result.innerText lines.

Kamal Paliwal · Accepted Answer · 2019-02-21 12:54:54Z

0

Update your code to this:

echo '<button name="btn'.$ID.'" class="btnName" onClick="showForm()" data-name="'.$name[$a].'">'.$name[$a].'</button>';

And change your JS to this:

function showForm(e) {
  var name = e.target.getAttribute("data-name");
  var result = document.getElementById('result');

  result.innerText = name;
  result.style.display = 'block';
}

answered Feb 21, 2019 at 12:54

Kamal Paliwal

1,3018 silver badges16 bronze badges

Comments

Cb Pcbrain · Accepted Answer · 2019-02-21 13:00:56Z

0

clearly your code should be

<?php
 $a=0;
 while($row = mysql_fetch_assoc($execute)){
  $ID = $row['id'];
  $name[] = $row['names'];
  echo "<button name='btn{$ID}' class='btnName' onClick=showForm('{$name[$a]}')>{$name[$a]}.    </button>";
  $a++;
 }
?>

<div id="result" style="display: none;">
</div>


<script type="application/javascript">
 function showForm(value){
    let div = document.getElementById('result');
    div.style.display="block";
    div.innerText = value;
 }
</script>

answered Feb 21, 2019 at 13:00

Cb Pcbrain

167 bronze badges

Comments

Stefan Avramovic · Accepted Answer · 2019-02-21 13:03:43Z

0

The javascript part

function showForm() {    
  var x = document.getElementsByClassName('btnName')
  for(var i = 0; i< x.length; i++){
    x[i].addEventListener("click", function(e){
    result.innerHTML = e.target.getAttribute("name")
    })
  }
}
showForm()

<button name="Button1" class='btnName'>Button1</button>
<button name="Button2" class='btnName'>Button2</button>
<button name="Button3" class='btnName'>Button3</button>
<button name="Button4" class='btnName'>Button4</button>

<div id="result" ></div>

answered Feb 21, 2019 at 13:03

Stefan Avramovic

1,3532 gold badges11 silver badges21 bronze badges

Comments

Antoan Milkov · Accepted Answer · 2019-02-21 14:05:37Z

0

Here is something that you can give it a try and see how this works for you:

<?php
while($row = mysql_fetch_assoc($execute)){
    echo "<button name=\"btn{$row['id']}\" class='btnName' onClick=\"showForm('{$row['name']}')\">{$row['names']}</button>";
}
?>

<div id="result"></div>

<script>
function showForm(name) {
    document.getElementById('result').innerText = name;
}
</script>

edited Feb 21, 2019 at 14:05

answered Feb 21, 2019 at 12:53

Antoan Milkov

2,23821 silver badges31 bronze badges

4 Comments

M. Eriksson Over a year ago

This would hide all the buttons since you're putting them in a div that has display: none;.

Antoan Milkov Over a year ago

@MagnusEriksson You are right. Clicking a hidden button can be problematic and not quite straightforward for the average user. :) Edited the answer

M. Eriksson Over a year ago

:-) However, this doesn't actually answer the OP's question. The OP doesn't want all the buttons in the div. The OP only wants to show the name of the clicked button in that div.

Antoan Milkov Over a year ago

Danke @MagnusEriksson! Let's see if this version is closer to the OP vision.

Collectives™ on Stack Overflow

Call data using buttons created from looped array

6 Answers 6

6 Comments

2 Comments

Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

2 Comments

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related