I am creating a data update form using bootstrap, in which I already have the data and user has option to edit any of the fields and save it. Since I don't want the user to accidentally change the fields, I've put the input fields in disabled state initially, with an edit button associated with each of the text input fields.

Following is the HTML I'm using.

<form role="form">
 <div class="form-group">
  <label for="name">Name</label>
  <div class="input-group">
  <input type="text" class="form-control" id="name" 
     value="Skipper" readonly>
  <div class="input-group-addon">
      <span class="glyphicon glyphicon-pencil" onclick=editName()></span>
  </div>
  </div>   
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
</form>

Now to make the pencil icon for the text field to work I had to write a javascript

function editName() {
    document.getElementById('name').readOnly=false;
};

The problem is I am having at least 15-20 fields in my form and writing a javascript function for each of the fields doesn't look right. Also there are some more features that i am looking to enhance the user experience, like hiding the pencil icon when input field is enabled. Can you guys suggest a default or inbuilt way of handling this kind of forms.

I am creating a data update form using bootstrap, in which I already have the data and user has option to edit any of the fields and save it. Since I don't want the user to accidentally change the fields, I've put the input fields in disabled state initially, with an edit button associated with each of the text input fields.

Following is the HTML I'm using.

<form role="form">
 <div class="form-group">
  <label for="name">Name</label>
  <div class="input-group">
  <input type="text" class="form-control" id="name" 
     value="Skipper" readonly>
  <div class="input-group-addon">
      <span class="glyphicon glyphicon-pencil" onclick=editName()></span>
  </div>
  </div>   
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
</form>

Now to make the pencil icon for the text field to work I had to write a javascript

function editName() {
    document.getElementById('name').readOnly=false;
};

The problem is I am having at least 15-20 fields in my form and writing a javascript function for each of the fields doesn't look right. Also there are some more features that i am looking to enhance the user experience, like hiding the pencil icon when input field is enabled. Can you guys suggest a default or inbuilt way of handling this kind of forms.

• javascript
• forms
• twitter-bootstrap

• Why don't you pass a parameter to your javascript function, to determine in it, which input to enable? Then you would need the function only once. – schlonzo Commented Jul 30, 2014 at 13:09
• Have you considered just adding a button to turn editing on/off for the user? – BuddhistBeast Commented Jul 30, 2014 at 21:43
• Shri, take a look at both answers below and see if either of them answer your question. If one of them does answer your question, then click the check mark to approve it. Let's close out this question if we can. – BuddhistBeast Commented Jul 30, 2014 at 23:44

2 Answers 2

Example 1:

You could also just create an "Edit" button that a use could click in order to make the content editable. Here is the following HTML for this:

HTML

<div class='row text-center'>
    <a class="btn btn-danger editBtn">Edit Off</a>
</div>
<form role="form">
    <div class="form-group">
        <label for="name">Name</label>
        <div class="input-group">
            <input type="text" class="form-control editField" value="Skipper" readonly>
            <input type="text" class="form-control editField" value="McAwesome-Sauce" readonly>
            <input type="text" class="form-control editField" value="Tester" readonly>
        </div>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

jQuery

$(document).ready(function () {
    $('.editBtn').click(function () {
        if ($('.editField').is('[readonly]')) { //checks if it is already on readonly mode
            $('.editField').prop('readonly', false);//turns the readonly off
            $('.editBtn').html('Edit On'); //Changes the text of the button
            $('.editBtn').css("background", "green"); //changes the background of the button
            $('.editBtn').css("border", "green"); //changes the border of the button
        } else { //else we do other things
            $('.editField').prop('readonly', true);
            $('.editBtn').html('Edit Off');
            $('.editBtn').css("background", "red");
        }
    });

});

This will allow you to toggle all fields for edit. It will also give you the ability to still customize the content as much as you would like. Take a look at my fiddle below to learn more.

Demo JSFiddle

Example 2:

This example would include a bit more visual design with it. It has the idea of Example 1 but it also includes changing the glyphicons. Take a look at the following:

jQuery

$(document).ready(function () {
    $('.editBtn').click(function () {
        if ($('.editField').is('[readonly]')) { //checks if it is already on readonly mode
            $('.editField').prop('readonly', false); //turns the readonly off
            $('.editBtn').html('Edit On'); //Changes the text of the button
            $('.editBtn').css("background", "green"); //changes the background of the button
            $('.editBtn').css("border", "green"); //changes the border of the button
            $('.editMode').toggleClass('hide'); //hide one glyphicon
            $('.nonEditMode').addClass('hide'); //show another glyphicon
        } else { //else we do other things
            $('.editField').prop('readonly', true);
            $('.editBtn').html('Edit Off');
            $('.editBtn').css("background", "red");
            $('.editMode').toggleClass('hide');
            $('.nonEditMode').removeClass('hide');
        }
    });

});

HTML - Portion

<label for="name">Name</label>
        <div class="input-group margin-bottom-10">
            <input type="text" class="form-control editField" value="Skipper" readonly />
                <div class="input-group-addon">
                  <span class="glyphicon glyphicon-pencil hide editMode"></span>
                  <span class="glyphicon glyphicon-ok nonEditMode"></span>
                </div>         
        </div>
        <label for="name">Position</label>
        <div class="input-group">
            <input type="text" class="form-control editField" value="Being Awesome" readonly />
                <div class="input-group-addon">
                  <span class="glyphicon glyphicon-pencil hide editMode"></span>
                  <span class="glyphicon glyphicon-ok nonEditMode"></span>
                </div>         
        </div>

Demo JSFiddle

Example 3:

This example will use jQuery to target input of the specific area and toggle the readonly effect. Here is the jQuery to do so:

jQuery

$(document).ready(function () {
    $('span').click( function() {
        if($(this).parents().siblings('input').is('[readonly]')){
           $(this).parents().siblings('input').prop('readonly', false); //turns the readonly off
        }else{
           $(this).parents().siblings('input').prop('readonly', true); //turns the readonly off
        }
    });
});

Demo JSFiddle

Example 4:

This might be more of what you are looking for. I did not alter any of your HTML, I only added the hide class to your span items. You can see it in the example fiddle below. Here is the jQuery that is included in this:

jQuery

$(document).ready(function () {
    $('.glyphicon-ok').toggleClass('hide');
    $('span').click(function () {
        if ($(this).parents().siblings('input').is('[readonly]')) {
            $(this).parents().siblings('input').prop('readonly', false); //turns the readonly off
            $(this).toggleClass('hide'); //hide one glyphicon
            $(this).siblings('.glyphicon-pencil').toggleClass('hide');
        } else {
            $(this).toggleClass('hide'); //hide one glyphicon
            $(this).siblings('.glyphicon-ok').toggleClass('hide');
            $(this).parents().siblings('input').prop('readonly', true); //turns the readonly off
        }
    });

});

It starts off by toggling one of the glyphicons to not be hidden, then for every mouse click on the span, the readonly is taken off.

Demo JSFiddle

Why don't you pass a parameter to your javascript function, to determine in it, which input to enable? Then you would need the function only once. For example a number with enumerates your inputs, and that is at the end of the name of the inputs.

Something like

<input type="text" class="form-control" id="name1" value="Skipper" readonly>
<div class="input-group-addon">
  <span class="glyphicon glyphicon-pencil" onclick=editName('1')></span>
</div>

<input type="text" class="form-control" id="name2" value="Skipper" readonly>
<div class="input-group-addon">
  <span class="glyphicon glyphicon-pencil" onclick=editName('2')></span>
</div>

And then

function editName(number) {
    document.getElementById('name' + number).readOnly=false;
};