Question

183

Make fields editable when a button is clicked

rated 0 times [ 186] [ 3] / answers: 1 / hits: 20293 / 11 Years ago, thu, november 14, 2013, 12:00:00

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:! enter
I want it looks like this: Pic.

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jameson

Add To Favorites

Follow

Total Points: 534

Total Questions: 103

Total Answers: 102

Location: Lithuania

Member since Fri, Sep 4, 2020

4 Years ago

jameson questions

1 React native navigation v6 authentication flow

Tue, Jan 4, 22, 00:00, 2 Years ago

1 how to make slide transition smoother and not instant on swiper update - Swiper API

Thu, Oct 21, 21, 00:00, 3 Years ago

1 NextJS calling API in a form submit

Tue, Mar 2, 21, 00:00, 3 Years ago

1 React setState inside componentDidUpdare leads to Maximum update depth exceeded

Thu, Dec 10, 20, 00:00, 4 Years ago

1 How to export all components in index.js?

Sat, Jul 4, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jaden · Accepted Answer

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