我正在用引导程序制作HTML表单。该表格将显示一些我存储在服务器端的个人用户详细信息。我希望用户能够查看其详细信息并根据需要对其进行编辑。

这是我的基本表格。它有两个字段,名称和邮政编码都被禁用。它有两个按钮,“编辑”和“保存”,“保存”按钮被隐藏。

<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input class="form-control" id="name" disabled>
    </div>
  </div>
  <div class="form-group">
    <label for="postcode" class="col-sm-2 control-label">Postcode</label>
    <div class="col-sm-10">
      <input class="form-control" id="postcode" disabled>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" id="save" hidden>Save</button>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="edit" class="btn btn-default" id="edit">Edit</button>
    </div>
  </div>
</form>


当用户单击编辑按钮时,我要:


启用名称和邮政编码字段
取消隐藏“保存”按钮
隐藏编辑按钮


实现此目标的最佳方法是什么?我应该使用一个JavaScript库吗?还是定制功能要走?

另外,这通常是正确的方法吗?我对能找到“可编辑”的html表单的示例很少感到惊讶(即,这些表单以禁用开始,并通过编辑按钮启用)。我以为引导程序可能会提供一些开箱即用的内容,但却找不到任何东西。

最佳答案

我在https://codepen.io/anon/pen/vpdQmL整理了一个小例子

底层的html / javascript如下:

<button
  type="edit"
  class="btn btn-default"
  id="edit"
  onclick="return handleEdit()">

  Edit
</button>




function handleEdit() {
  document.getElementById('name').disabled = false;
  document.getElementById('postcode').disabled = false;
  document.getElementById('edit').hidden = true;
  document.getElementById('save').hidden = false;

  return false;
}

关于javascript - 如何制作可编辑的Bootstrap HTML表单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48177107/

10-16 21:05