As I work on populating a form with data from an sqlite database, I've come across a stumbling block. My code is available for reference on JSFiddle:
https://jsfiddle.net/daikini/e71mvg7n/
One important note: Bootstrap isn't being utilized in this project due to various reasons, so achieving the task without it would be preferred.
While I have successfully established a strong connection with the database and can retrieve and post data using PHP, incorporating it into the form has proven to be quite challenging.
Below is my JavaScript code snippet:
// Grabbing the modal element
var modal = document.getElementById('myModal');
// Accessing the button that triggers the modal
var btn = document.getElementById("myBtn");
// Finding the <span> element responsible for closing the modal
var span = document.getElementsByClassName("close")[0];
// Display modal when button is clicked
btn.onclick = function() {
modal.style.display = "block";
}
// Close modal when <span> (x) is clicked
span.onclick = function() {
modal.style.display = "none";
}
// Closing modal when clicking outside of it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I welcome any advice or suggestions you may have. Thank you!
EDIT:
Thank you once again for your assistance. Despite progress, my attempts to prefill the form within a modal using PHP and JavaScript are encountering issues. Here's the pertinent code:
<?php
foreach($result as $row)
{
echo "<tr>";
echo "<td>" . $row['job_id'] . "</td>";
echo "<td>" . $row['job_title'] . "</td>";
echo "<td>" . $row['date_create'] . "</td>";
echo "<td><a href='#' id='editbtn". $row['job_id']."' class='edit-button' name='edit". $row['job_id']."' data-value='".json_encode($row, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE)."'>EDIT</a></td>";
if ($row['display']) {
echo '<td><form method="post" action="update_jobs.php"><input type="checkbox" name="'. $row['job_id'] . '" value="'. $row['display'] .'" checked />';
} else {
echo '<td><form method="post" action="update_jobs.php"><input type="checkbox" name="'. $row['job_id'] . '" value="'. $row['display'] .'" />';
}
echo '<td class="last"><input type="submit" value="Submit" name="active" data-toggle="modal" data-target="#editModal" ></form></td>';
echo "</tr>";
}
echo "</table>";
echo $row['position_summary'];
?>
And here's the JavaScript counterpart:
<script type="text/javascript">
var editModal = document.getElementById('editModal');
var editbtn = document.getElementById("editbtn" + job_id).value;
jQuery('.edit-button').click(function() {
id = jQuery(this).attr('data-abstract-id');
});
// Locating the <span> element to close the modal
var span = document.getElementsByClassName("close")[0];
// Triggering modal open on button click
editbtn.onclick = function() {
var _data = $(this).data('value');
editModal.style.display = 'block';
... (the code continues)