单击编辑链接后,如何显示我的html表单?
锚标记:
<a href="#form?id=<?= $row["id"]; ?>" class="badge badge-success">edit</a>
隐藏的html形式:
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">+ Type Kamar</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post" enctype="multipart/form-data" id="form">
<input type="hidden" name="id" value="<?= $utk["id"]; ?>">
<input type="hidden" name="gambarLamaa" value="<?= $utk["gambarr"]; ?>">
<input type="hidden" name="">
<div class="form-group">
<label for="room">Room</label>
<input type="text" class="form-control" id="room" name="room" value="<?= $utk["room"]; ?>">
</div>
<div class="form-group">
<label for="type">Type</label>
<input type="text" class="form-control" id="type" name="type" value="<?= $utk["type"]; ?>">
</div>
<div class="form-group">
<label for="gambarr">picture</label>
<br>
<img src="../img/<?= $utk['gambarr']; ?>" width="700"> <br>
<input type="file" class="form-control" id="gambarr" name="gambarr">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" name="ubah" class="btn btn-primary">Add</button>
</form>
</div>
</div>
</div>
</div>
我建议不要使用aria-hidden="true"
隐藏您的内容,因为如果您暂时隐藏它,并且当您需要在单击链接后再次取消隐藏(将其值设置为aria-hidden="false"
时),则会在整个屏幕上出现不一致的情况浏览器。(根据MDN WebDocs)
因此,请改用display:none
隐藏您的表单
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display:none">
也为链接设置ID
<a href="#form?id=<?= $row["id"]; ?>" id="link" class="badge badge-success">edit</a>
并且在单击链接时,您将需要JavaScript取消隐藏它。
JS
<script>
document.getElementById('link').onclick = function(){
document.getElementById('from').style.display = "block";
};
</script>
您应该将href标签更改为:
<a href="#form?id=<?= $row["id"]; ?>" class="badge badge-success" onclick="show()">edit</a>
然后在表单周围添加一个div,id =“ show-form”,将div的CSS更改为:
#show-form {
display: none; }
然后添加以下javascript:
<script>function show() {
var x = document.getElementById("show-form");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
} </script>