Issues with converting label to input field on button click

Question

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>

Mohammad · Answer 1 · 2016-05-27T12:30:46.193

3

You can use replaceWith() method to convert label to textarea.

$("#edit").click(function(){
    var text = $("label").text();
    $("label").replaceWith("<input value='"+text+"' />");
});

$("#save").click(function(){
    var text = $("input ").val();
    $("input ").replaceWith("<label>"+text+"</label>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="edit">Edit</button>
<button id="save">Save</button>
<br/><br/>
<label>Text</label>

edited May 27 '16 at 12:30

answered May 27 '16 at 12:12

Mohammad

21,175
15
55
84

when I edit the content and click on save the value is getting saved as "20". Its weird. I have used the exact same code as yours. I am using jquery 2.2.2 – Sumedha Vangury May 27 '16 at 13:02
@sumedha Test your code in jsfiddle and check result. – Mohammad May 27 '16 at 13:09
can't I rename "label" as "lblCompany" and then call it using `Text` ? when I do this in js fiddle, it does not work. Also, what if I have more than one labels that need to be changed into textboxes, how will I use this code then? – Sumedha Vangury May 27 '16 at 13:18
@sumedha You can use `id` or `class` instead of `lable` in selection. See https://jsfiddle.net/y7kmtd81/ – Mohammad May 27 '16 at 13:23
@sumedha Does this discussion finished? – Mohammad May 27 '16 at 14:57
your code works, but I found Faroq's code the best fix – Sumedha Vangury May 30 '16 at 06:15
@sumedha What you found in @FaroqTavakoli answer that you marked it as best answer? Her code isn't complete. You can't convert `input` to `label` using her code (code in one way). It hasn't any demo to seeing result. Even he doesn't write code highlight in correct type(part of code dosn't posited in highlight). Her answer is the worst answer in this post.You work isn't right to marking her answer as best.You could marked answer of @StephanMuller or @DineshJ or me. – Mohammad May 30 '16 at 06:42

score 1 · Answer 2 · answered May 27 '16 at 12:07

1

The most simple fix would be to disable the edit button once you've clicked it, and enable it again after saving:

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

        $(this).prop('disabled', true);

        /*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 () {
        $('#edit').prop('disabled', false);

        var text = $('#attrCName').val();
        $('#attrCName').parent().text(text);
        $('#attrCName').remove();
    });
});

answered May 27 '16 at 12:07

Stephan Muller

27,018
16
85
126

If I disable the edit button, if the user wants to edit the content again, he will have to click on some other link and come to this page or he will have to refresh the page every time. Sorry but this is not right, it means more work from the client's end – Sumedha Vangury May 27 '16 at 13:12
That's why it's enabled again when you save the edit. But I can understand if another solution is required, this just seemed a simple fix to me. – Stephan Muller May 27 '16 at 13:20

score 0 · Accepted Answer · edited May 30 '16 at 06:29

When you click the second time the value of companyName is empty, that's why the <input> 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();

    });

Dinesh J · Answer 4 · 2016-05-30T06:23:57.823

Try This one

function EditContent(){
  var companyName = $('.text-cname').text();
  var lblCName = $('<input id="attrCName" type="text" value="' + companyName + '" />');
  if (companyName != "") {
    $('.text-cname').text('').append(lblCName);
  }
  lblCName.select();
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="companyName">
    <label class="text-cname"><b>Company</b></label>
</div>

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

Issues with converting label to input field on button click

4 Answers4

Linked