Question

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

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

这里也有一个问题......由于种种原因，我没有使用引导程序。所以，如果没有它就能完成，那就是偏好。

我有一个很好的数据库连接，我可以拉和发布（使用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'));

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

从db（非引导程序）预填充模态

1 个答案: