jquery - Change Label to Textbox on edit hyperlink click

Question

I am new to ruby on rails and twitter bootstrap. Accept my apologize if my question sound dumb. I am using twitter bootstrap for my site design. I have been trying to use bootstrap to change my label to textbox using hyperlink button click.

<div class="control-group">
    <label for="name" class="control-label"><p class="text-info">Saghir<i class="icon-star"></i></p></label>
    <div class="controls">
        <a href="#">Edit</a>
    </div>

but I am unable to do so, should I use jquery to do so, or I can use bootstrap for that. Please point me to right direction. Thanks in advance

Edit Code is updated with hyperlink(it could be button too). it is like, when I click on "Edit" hyperlink my label should show content "Saghir" that can be used using placeholder attribute of bootstrap. I can submit form to update values to database.

Answer 1

I think you need jQuery for it. Try this :

$('#edit').click(function() {
 var text = $('.text-info').text();
 var input = $('<input id="attribute" type="text" value="' + text + '" />')
 $('.text-info').text('').append(input);
 input.select();

 input.blur(function() {
   var text = $('#attribute').val();
   $('#attribute').parent().text(text);
   $('#attribute').remove();
 });
});

.control-label .text-info { display:inline-block; }

 
<label for="name" class="control-label"><p class="text-info">Saghir</p><i class="icon-star"></i></label>
<div class="controls">
   <a href="#" id="edit" class="btn">Edit</a>
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>