While Loop Modal

osmith · February 20, 2020, 7:47pm

I have no experience using bootstrap modals, and i have come to a halt on my work.
I am working on a php web app, where I want the user to be able to edit the year as active and closed .
I am using this modal template: https://www.w3schools.com/howto/howto_css_modals.asp

ex.
year status edit
2019 closed (button that opens modal)
2018 open (button that opens modal)

Here is part of my code:

            <?php

            $sql="SELECT * FROM year";

            $result=mysqli_query($conn,$sql);

            ?>

            </br><table align="center" id="userTable">

                <tr>

                    <th>Year</th>

                    <th>Status</th>

                    <th>Edit</th>

                </tr>

                <tbody id="myTable">

            <?php

                while($rows=mysqli_fetch_assoc($result))

                {

            ?>  

                <tr >

                    <td><?php echo $rows['year']; ?> </td>

                    <td><?php $status=$rows['active']; if ($status == 1){echo "Open";}else echo "Closed"; ?></td>

                    <td> <?php echo "<button href='addyear.php?edit=$rows[year]' id='myBtn'>Edit</button>";?></td>

                </tr>

            <?php

                }

                ?>

More php code:

if(isset($_GET[‘edit’]))

{

 $year= $_GET['edit'];

 $sql="SELECT * FROM year where year='$year' "; 

 $result=mysqli_query($conn,$sql) or die(mysqli_error($conn));

 $rows=mysqli_fetch_array($result);

}

Modal information

<span class="close">&times;</span>

<form action ="addyear.php" method="POST">

<label align="left">Status</label>

<select name="status" id="status-select" class="drpdwn">

    <option value="1"<?php if($rows['active']=='1'){echo  "selected"; }?>>Open</option>

    <option value="0"<?php if($rows['active']=='0'){echo  "selected"; }?>>Closed</option>

</select>

<button input type="submit" name="update-submit">Update Account</button>

</form>

Javascript:
// Get the modal
var modal = document.getElementById(“myModal”);

// Get the button that opens the modal
var btn = document.getElementById(“myBtn”);

// Get the element that closes the modal
var span = document.getElementsByClassName(“close”)[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = “block”;
}

// When the user clicks on (x), close the modal
span.onclick = function() {
modal.style.display = “none”;
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = “none”;
}
}

CSS:
/* The Modal (background) /
.modal {
display: none; / Hidden by default /
position: fixed; / Stay in place /
z-index: 1; / Sit on top /
left: 0;
top: 0;
width: 100%; / Full width /
height: 100%; / Full height /
overflow: auto; / Enable scroll if needed /
background-color: rgb(0,0,0); / Fallback color /
background-color: rgba(0,0,0,0.4); / Black w/ opacity */
}

/* Modal Content/Box /
.modal-content {
background-color: #fefefe;
margin: 15% auto; / 15% from the top and centered /
padding: 20px;
border: 1px solid #888;
width: 80%; / Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}