按钮单击时将标签转换为输入字段的问题 [英] Issues with converting label to input field on button click

问题描述

我在这里。
在我的应用程序中，我有两个按钮 - edit 和 save 。点击编辑时，标签会转换为输入字段，用户可以在其中编辑内容并保存。

一切正常，但问题在于，当用户点击两次编辑按钮时， input 字段变为空白，即< input> 值变为空白。这个。

 < div id =companyName> 
< label class =text-cname>< b> @ Html.DisplayFor（m => m.Company）< / b>< / label> 
< / div> 
 
< div class =row center-block> 
< input type =submitclass =btn btn-successvalue =Saveid =btnSave/> 
< input type =buttonid =editclass =btn btn-primaryvalue =Edit/> 
< / div> 
 
< script> 
 $（document）.ready（function（）{
 $（'＃edit'）。click（function（）{
 // for company name 
 var companyName = $ （'.text-cname'）。text（）; 
 var lblCName = $（'< input id =attrCNametype =textvalue ='+ companyName +'/>'） 
 $（'。text-cname'）。text（''）。append（lblCName）; 
 lblCName.select（）; 
 
}）; 
 
 $（'＃btnSave'）。click（function（）{
 var text = $（'＃attrCName'）。val（）; 
 $（'＃attrCName'）。parent （）.text（text）; 
 $（'＃attrCName'）。remove（）; 
}）; 
 
}）; 
< / script> 
  

解决方案

当您第二次单击companyName的值时为空，这就是< input> 值为空的原因。这是一个非常简单的解决方案，但是您将焦点放在了易于修复的编辑框中。

$ b

$（'＃edit'）。click（function（）{

  / *公司名称* / 
 var companyName = $（'。text-cname'）。text ）; 
 var lblCName = $（'< input id =attrCNametype =textvalue ='+ companyName +'/>'）; 
 if（companyName！= ）
 $（'。text-cname'）。text（''）。append（lblCName）; 
 lblCName.select（）; 
 
}）; 
  

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>

解决方案

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();

    });

这篇关于按钮单击时将标签转换为输入字段的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！