Question

I’m using twitter bootstrap.

I want to create a profile page with an edit button on the top left.

When a user clicks on this button,

all the profile fields become editable

(I think input elements)

Any idea how to implement it most easily?

Answer 1

If you can’t count on everyone using HTML5, you could do it the hard way where you start with all fields either disabled or read only and then at the press of a button, you change the attribute. Using the same function, you could then show or enable the ‘Save’ button. Something like…

// Lock or Unlock Controls ////////////////////////////////////////////////////////////////////////////
function lockControls(setLock) {
   var bOk = setLock;
   $("#btnSave").attr('disabled', bOk);
   $("#emailMessage").attr('disabled', bOk);
   $("#emailSubject").attr('disabled', bOk);
   $("#buildingList").attr('disabled', bOk);
}