javascript - 来自数据库的预填充模式(非 Bootstrap )

Question

我正在尝试使用数据库 (sqlite) 中的值预填充表单。

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

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

这里也有一个问题……出于各种原因，我没有使用 Bootstrap 。所以，如果没有它也能完成，那就是首选。

我有一个良好的数据库连接，我可以拉取和发布(使用 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>

Answer 1

这取决于您何时要用预定义的值填充表单。如果您想在页面加载时加载它，您只需使用 PHP 生成 HTML 并将数据打印到所需输入的 value=""标记中。

或者，如果您使用 ajax 加载数据，则可以使用 jQuery 来填充元素值。

$("form input[name='job_title']").val(value);

如果这不是您想要的，请澄清您的问题。

编辑:

我会保持简短，但仍不能 100% 确定您想要做什么。

但我注意到您从 .edit-button 数据值加载 JSON 编码数据，但想将其作为对象访问。你应该先解码它。

var _data = $.parseJSON($(this).data('value'));

尝试详细说明您的问题，它仍然无法正常工作，您想实现什么，并尝试在某处上传一个工作示例。