javascript - 如何制作可编辑的 bootstrap html 表单

Question

我正在使用 bootstrap 制作一个 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 表单的例子很少(即开始时禁用，然后通过编辑按钮启用)。我认为 bootstrap 可能提供开箱即用的东西，但找不到任何东西。

Answer 1

我在 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;
}