单击按钮时使字段可编辑 [英] Make fields editable when a button is clicked

问题描述

我的应用程序的用户应该能够通过单击更改"按钮来更改电子邮件和电话号码，这是我的代码:

the user of my application should be able to change the email and the phone number by clicking in a button "Change", this is my code:

    <div class="field-group">
     ...............
     ....................
        <div class="field field-omschrijving">
          <label class="label">E-mailadres</label><div>@client.email</div>
         </div>
         <div class="field field-omschrijving field-last">
           <label class="label">Telefoonnummer</label><div>@client.phoneNumber</div>
         </div>
         <input type="submit" class="form-submit" value="Change" name="op">
       </div><!-- /.field-group -->

我一直在寻找解决方案，但没有成功，关于如何做到这一点的任何想法?谢谢！

I've been looking for a solution but no success, any idea about how can I do it? Thanks!

非常感谢您的快速响应！但是..我的错误，我想说的是，字段应该以正常方式"显示，并且当用户单击更改按钮时，应该更改为可编辑的方式"，此时字段电子邮件如下所示: ！ 我希望它看起来像这样:

Thanks so much for the fast response! But.. my mistake, what I wanted to say is that the fields should appear in a "normal way" and when the user clicks the button change it should change to an "editable way", right now the field email looks like this:! I want it looks like this:

在单击更改"按钮后，它必须看起来像第一个图像.再次感谢！

And after clicking in the "Change" button it has to look like the first image. Thanks again!

推荐答案

单击后使用此代码，您可以将标签更改为输入，就像在图片中一样. 希望对您有帮助

Using this code after click you can change your label to input, as in you pictures. It will help you now, hope

 $( ".button_class" ).click(function() {
       $('.class_Of_label_email').replaceWith($('<input>' + $('.class_Of_label_email').innerHTML + '</input>'));
    });

这里是一个例子:

<div class="container">
<div class="first">Hello</div>
<div class="second">And</div>
<div class="third">Goodbye</div>
</div>
 $( ".container" ).click(function() {
$( "div.second" ).replaceWith( "<h2>New heading</h2>" );
}

结果是:

<div class="container">
<div class="inner first">Hello</div>
<h2>New heading</h2>
<div class="inner third">Goodbye</div>
</div>

希望，这会有所帮助

这篇关于单击按钮时使字段可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！