Opening NonBootstrap modal to Update/Edit a row in Table using PHP and JavaScript

Question

I'm just new to PHP and JavaScript that's why i used the samplecode in w3schools and tried to improve it. And I have this one problem with modals. my modal is not opening when clicked. Only my edit button on my first row is working but the rest is not. here's my code for populating the data from my database:

    <table>
<tbody>
                <?php
                require 'connection.php';
                $query = "SELECT first,middle,last,rfidnum,section FROM `members`";
                $result1 = mysqli_query($con, $query);?>


                    <?php while($row1 = mysqli_fetch_array($result1)):;?>
                <tr class="mems">
                    <td>
                        <?php echo $row1[0]; ?>
                    </td>
                    <td>
                        <?php echo $row1[1]; ?>
                    </td>
                    <td>
                        <?php echo $row1[2]; ?>
                    </td>
                    <td>
                        <?php echo $row1[3]; ?>
                    </td>
                    <td>
                        <?php echo $row1[4]; ?>
                    </td>
                    <td>
                        <button id='edit'>Edit</button>
                    </td>
                </tr>
                        <?php endwhile;?>


            </tbody>
</table>

<!-m2content->
        <div id="myModal2" class="modal2">   
  <div class="modal2-content bounceInDown animated">
    <span class="close2">&times;</span>
    <table>
            <thead><th>Add Member</th></thead>
        <tbody>

            <tr>
                <td></td>
                <td>
            <form method="post">
                <table>
            <tr><td>First Name</td>
            <td><input class="textboxx" type="text" name="first" onkeypress=" return forinput()" ></td></tr>
            <tr><td>Middle Name</td>
            <td><input class="textboxx" type="text" name="middle" onkeypress=" return forinput()" ></td></tr>
            <tr><td>Last Name </td>
            <td><input class="textboxx" type="text" name="last" onkeypress=" return forinput()" ></td></tr>
            <tr><td>ID Number: </td>
            <td><input class="textboxx" type="text" name="idnumber" onkeypress=" return forinput()" ></td></tr>
            <tr><td>Section: <br>
            <td><input class="textboxx" type="text" name="section" onkeypress=" return forinput()"> </td></tr>
            <tr><td><input type="submit"></td></tr>
            </table>
            </form>
                </td>
        </tr>
        </tbody>
        </table>

  </div>

while this is my Java Script:

// Get the modal
var modal2 = document.getElementById('myModal2');

// Get the button that opens the modal
var btn2 = document.getElementById("edit");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];
// When the user clicks the button, open the modal 
btn2.onclick = function() {
    modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
    modal2.style.display = "none";
}



window.onclick = function(event) {

    if (event.target === modal2) {
        modal2.style.display = "none";
    }
}

Thanks for responses. i'm not using Bootstrap because of my professor. they told us not to use predefined codes. that's why until now i'm stucked with this problem.

Hehe, okay. Where is the JavaScript located? (I.E., is the DOM loaded?) You can use F12 on Chrome to check for JS errors in the Console. P.S. You don't need to switch to jQuery. Your JavaScript looks good. — facechomp, Dec 09 '18 at 02:13
there is no errors sir, the js is located on a js file separated fro my php file. — jack, Dec 09 '18 at 02:20

Attila Antal · Accepted Answer · 2018-12-09T02:32:37.237

First things, first, you will need to do something about the IDs of the Edit buttons. HTML cannot contain multiple elements with the same ID. Can a HTML element have multiple unique ID attributes?

Assuming that you have a loop, where the edit button's ID will be automatically generated and kept unique for each row.

<table>
    <tbody>
    <?php
        for ($i = 0; $i < 3; $i++){
            ?>
            <tr class="mems">
                <td>
                    <button id='edit_<?php echo $i; ?>'>Edit</button>
                </td>
            </tr>
            <?php
        }
    ?>
    </tbody>
</table>

Since the buttons will have different IDs, it does not make sense to create an event listener by ID, instead, you can use a class selector or attach the event directly to the button itself.

Example to wire up the onclick event to each button:

<button id='edit_<?php echo $i; ?>' onclick="openModal(event);">Edit</button>

Example using class selector:

<button id='edit_<?php echo $i; ?>' class='editButton'>Edit</button>

Try the following working example:

<table>
    <tbody>
    <?php
        for ($i = 0; $i < 3; $i++){
            ?>
            <tr class="mems">
                <td>
                    <button id='edit_<?php echo $i; ?>' onclick="openModal(event);" class="editButton">Edit</button>
                </td>
            </tr>
            <?php
        }
    ?>
    </tbody>
</table>


<script type="text/javascript">
    for (var i = 0; i < document.getElementsByClassName('editButton').length; i++){
        var editButton = document.getElementsByClassName('editButton')[i];
        editButton.addEventListener("click", onclickByClass);
    }
    function openModal(e){
        // modal2.style.display = "block";
        alert("Click event listener from onclick attribute");
    }

    function onclickByClass(e){
        // modal2.style.display = "block";
        alert("Event listener by Class Name");
    }
</script>

thank you sir! it helps a lot, now i gonna do this to my close buttons thank you sir — jack, Dec 09 '18 at 02:41

Opening NonBootstrap modal to Update/Edit a row in Table using PHP and JavaScript

1 Answers1