PHP Native：如何使用href调用同一页面上的表单

Question

href代码

 <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">&times;</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>

================================================ ==========================当我单击href编辑时，如何使html表单显示在同一页面上？

Answer 1

我建议不要使用aria-hidden="true"隐藏您的内容，因为如果您暂时隐藏它，并且当您需要在单击链接后再次取消隐藏（将其值设置为aria-hidden="false"时），则会在整个屏幕上出现不一致的情况浏览器。

因此，请改用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>