我正在尝试使用数据库(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>

最佳答案

这取决于您何时要用预定义值填写表单。如果要在页面加载时加载它,只需使用PHP生成HTML,然后将数据打印到所需输入的value =“”标签中即可。

或者,如果您使用Ajax加载数据,则可以使用jQuery来填充elements值。

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


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

编辑:

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

但是我注意到的是,您从.edit-button数据值加载了JSON编码的数据,但希望将其作为对象进行访问。您应该先对其进行解码。

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


尝试详细说明您的问题,它仍然不起作用,您想实现什么目标,然后尝试将可行的示例上载到某个地方。

10-07 16:22
查看更多