How to make an editable bootstrap html form

Question

I am making a html form with bootstrap. The form will display some personal user details I store server side. I want a user to be able to view their details and edit them if they wish to.

Here is my basic form. It has two fields, Name and Postcode which are both disabled. It has two buttons, Edit and Save, the Save button is hidden.

<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>

When a user clicks the edit button I want to:

Enable the Name and Postcode fields
Unhide the Save button
Hide the Edit button

What is the best way to achieve this? Is there a javascript library I should use? Or is a bespoke function the way to go?

Also, is this generally the right approach? I was surprised at how few examples I've found of 'editable' html forms (i.e. ones that start as disabled, and become enabled with an edit button). I thought bootstrap might offer something out of the box but couldn't find anything.

Every form is editable. I don't understand what you're trying to accomplish. Enabling, hiding and unhiding controls are standard JS. — , Jan 09 '18 at 21:47
As described, the form should start disabled and become enabled if a user clicks on the edit button. — F_SO_K, Jan 09 '18 at 21:48
Like I said, disabling and enabling controls is done through JS or an HTML attribute. Google "disable form controls html". This has been part of the web for a long, long time. — , Jan 09 '18 at 21:51
In particular, look at the `disable` attribute, and using JS to set or unset that attribute. Same thing for hide, which amounts to just setting its CSS to `{display: none;}`. You *can* use a library, but I strongly encourage you to learn the basics first. — , Jan 09 '18 at 21:53

score 2 · Accepted Answer · answered Jan 09 '18 at 22:00

I've put together a small example at https://codepen.io/anon/pen/vpdQmL

The underlying html/javascript is as follows:

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

score 0 · Answer 2 · answered Jan 09 '18 at 22:02

How to enable and disable text fields is explaied here: How to enable a disabled text field?

To show and hide Buttons I would use display: https://www.w3schools.com/jsref/prop_style_display.asp Like described here: JavaScript style.display="none" or jQuery .hide() is more efficient?

Besides the edit-button needs an onClick="changeForm()"

And you need a Javascript Method changeForm that changes the display-values of the buttons and enables the text fields.

How to make an editable bootstrap html form

2 Answers2