sumedha sumedha - 6 months ago 11
Javascript Question

Issues with converting label to input field on button click

I have modified the answer in the post dicussed here.

In my application I have two buttons - edit and save. When clicked on edit, the

labels
get converted into
input
fields, where the user can edit the content and save.

Everything is working fine, but the problem is that when the user clicks on the edit button twice, the content in the
input
fields becomes blank, i.e. the
<input>
value becomes blank.

Please suggest me a fix for this. Where am I going wrong?

<div id="companyName">
<label class="text-cname"><b>@Html.DisplayFor(m => m.Company)</b></label>
</div>

<div class="row center-block">
<input type="submit" class="btn btn-success" value="Save" id="btnSave" />
<input type="button" id="edit" class="btn btn-primary" value="Edit" />
</div>

<script>
$(document).ready(function () {
$('#edit').click(function () {
// for company name
var companyName = $('.text-cname').text();
var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />')
$('.text-cname').text('').append(lblCName);
lblCName.select();

});

$('#btnSave').click(function () {
var text = $('#attrCName').val();
$('#attrCName').parent().text(text);
$('#attrCName').remove();
});

});
</script>

Answer

When you click the second time the value of companyName is empty, that's why the value becomes blank. This is a very simple solution, but you lose the focus on edit box which is easy to fix.

$('#edit').click(function () {

        /*for company name*/
        var companyName = $('.text-cname').text();
        var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />');
        if(companyName != "")
            $('.text-cname').text('').append(lblCName);
        lblCName.select();

    });
Comments