Make fields editable when a button is clicked

Question

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!

Solution 1

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>'));
    });

Here is an example:

<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>" );
}

Result is:

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

Hope, it will help

Solution 2

Give id to button and input fields for email and ph no. On click of button, hide the lebel and show input fields.

<div class="field-group">
    <div class="field field-omschrijving">
        <label class="label">E-mailadres</label>
        <div id="divemail">@client.email</div>
        <div id="divemailinput"><input type="text" id="emailId"/></div>
    </div>

    <div class="field field-omschrijving field-last">
        <label class="label">Telefoonnummer</label>
        <div id="divno">@client.phoneNumber</div>
        <div id="divnoinput"><input type="text" id="emailId"/></div>
    </div>
    <input id="btnchange" type="submit" class="form-submit" value="Change" name="op"/>
</div><!-- /.field-group -->

JS

$("#btnchange").click(function(){
    $("#divemail").hide();
    $("#divemailinput").hide();
    $("#divno").hide();
    $("#divnoinput").hide();
});

Solution 3

For the first you need is put your @client.emailand @client.phoneNumber into inputs and set them inactive. Then, and after clicking change them to active by using javascript.

<input type="text" class="emailand_clas" readonly="readonly" >@client.emailand </input>

and using jquery:

$( ".button_class" ).click(function() {
    $('.emailand_clas').attr('readonly','')
});

Some thing like this

Comments

[Ankit Tyagi]

I think its 'attr' not 'atrr'

[Anna]

Thanks! I updated my question ,could you take a look?

[Anna]

Thanks! But when I click in the button nothing happens :(

[sergio]

Edited. Please, try again. Are you sure you have .class_Of_label_email in the function the same as in your label??

[sergio]

Edited. Hope, it will help

[Anna]

Thanks, finally i did it this way: ns.init = function(){ $("#button-id").click(function() { $('#email').removeAttr("readonly"); }); };

[sergio]

Great!!!) if the the questions is over, close it,please accepted one of the answers