Modal is not working for series of button

Question

I have created series of button in table field. Now, since the id for all the button is same I want the modal is work for all the button but it is working only for the first button.

<script>
var modal = document.getElementById("myModal");

var btn = document.getElementById("mbutton");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

      while ($row = $result->fetch_assoc()) {
        $sl++;
       echo "<tr><td>". $sl. "</td><td>". $row['name']. "</td><td>". $row['Total_Trip']."</td><td>".$row['Total_Amount']."</td><td>".$row['Total_Pay']."</td><td>".$row['Total_Due']."</td><td>"."<button id='mbutton'>Pay</button><button id='mbutton'>Report</button>"."</td></tr>";
      }

 <div id="myModal" class="modal">

  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Pay to</h2>
    </div>
    <div class="modal-body">
     <form>
      <label>Payment Amount</label><br>
      <input type="text" name="paymodal" placeholder="Amount"><br>
      <input type="submit" name="smitModal">
     </form>
    </div>
  </div>

@vicnoob,Table is creating through the loop of PHP code. I've copied the code from IDE and it's working on my system except the problem I've mention in question. — Rakibul Islam, Oct 28 '20 at 03:19

Duke · Answer 1 · 2020-10-28T03:03:43.150

2

id is unique attribute value for each element so that the document will only get the first element with corresponding id. You can use class instead.

var btn = document.getElementsByClassName("mbutton");

edited Oct 28 '20 at 03:03

answered Oct 28 '20 at 02:48

Duke

253
1
13

Have you changed ` – Duke Oct 28 '20 at 03:00
yes, I've change it and check it with keep it or remove id. Results are same none working. – Rakibul Islam Oct 28 '20 at 03:04
I have updated the syntax for `getElementsByClassName`. Please try again – Duke Oct 28 '20 at 03:04
I've change the syntax as you have written but it's not working. – Rakibul Islam Oct 28 '20 at 03:10
Since your `btn` now is an array of document object, you cannot use `btn.onclick`. If you use JQuery try `$(".btn")` or else please take a look to this https://stackoverflow.com/questions/22053859/event-for-multiple-elements-with-the-same-class-name – Duke Oct 28 '20 at 03:15

score 2 · Answer 2 · answered Oct 28 '20 at 03:29

First of all, The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). So should never put same ID for every button.

If you use Jquery, you can try the answer above by Minh Duc, if not, please try to bind onclick to every button, or to the column contain it (because JS event is bubbling). You can try like this with your PHP code:

      while ($row = $result->fetch_assoc()) {
        $sl++;
       echo "<tr><td>". $sl. "</td><td>". $row['name']. "</td><td>". $row['Total_Trip']."</td><td>".$row['Total_Amount']."</td><td>".$row['Total_Pay']."</td><td>".$row['Total_Due']."</td>
       <td onclick="onclickHandler()">"."<button onclick="onclickHandler()" id='mbutton'>Pay</button><button onclick="onclickHandler()" id='mbutton'>Report</button>"."</td></tr>";
      }

And at your script file, add:

function onclickHandler () {
    modal.style.display = "block";
}

By this way the modal will display whenever you click any button in your table

score 0 · Answer 3 · answered Oct 28 '20 at 03:34

In javascript portion of my code i'm first using id.Than when @Minh suggest to use class, i have use it and it's become an array which need to be indexing.

Instead all of these i'm just calling the function from button all the time(Which i don't think before asking the question)

<button id='mbutton' onclick=btn()>Pay</button>

and

 function btn() {
  modal.style.display = "block";
}

Modal is not working for series of button

3 Answers3