从数据库预填充模式(非引导）

我正在尝试用数据库（sqlite）中的值预填充表单。

我在JSFiddle中模拟了我的代码：

https://jsfiddle.net/daikini/e71mvg7n/

这里还有一个陷阱。。。由于各种原因，我没有使用引导程序。所以，如果没有它也能实现，那就是偏好。

我有一个很好的数据库连接，我可以拉和张贴（使用PHP）。但是，我还没能把它拉进状态。

这是我的JS：

// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> 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 <span> (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";
  }
}

任何建议都会很有帮助。非常感谢。

编辑：

再次感谢您在这方面的帮助。当我尝试使用PHP和Javascript预填充表单（在模态中）时，我仍然会遇到问题。以下是相关代码：

<?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'];
?> 

和JS:

<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');
    });
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
editbtn.onclick = function() {
    var _data = $(this).data('value');
    editModal.style.display = 'block';
    console.log(_data);
    setTimeout(function() {
        $('#job-id').val(_data['job_id']);
        $('#date-created').val(_data['date_create']);
        $('#job_title').val(_data['job_title']);
        $('#position_summary').text(_data['position_summary']);
        $('#duty1').val(_data['duty1']);
        $('#duty2').val(_data['duty2']);
        $('#duty3').val(_data['duty3']);
        $('#duty4').val(_data['duty4']);
        $('#duty5').val(_data['duty5']);
        $('#duty6').val(_data['duty6']);
        $('#duty7').val(_data['duty7']);
        $('#duty8').val(_data['duty1']);
        $('#edu1').val(_data['edu1']);
        $('#edu2').val(_data['edu2']);
        $('#edu3').val(_data['edu3']);
        $('#edu4').val(_data['edu4']);
        $('#edu5').val(_data['edu5']);
        $('#edu6').val(_data['edu6']);
        $('#edu7').val(_data['edu7']);
        $('#edu8').val(_data['edu8']);
    }, 500);

}
// When the user clicks on <span> (x), close the modal
$(document).on('click', '.toggle-close-edit-modal', function () {
editModal.style.display = 'none';
});

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.id == 'editModal') {
    editModal.style.display = 'none';
    }
}
</script>