Home/ Questions/Q 1004203
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T08:05:54+00:00

I have 2 divs, the first one has the label with the content to

  • 0

I have 2 divs, the first one has the label with the content to show, but when you click the “edit” button, it should show you the div=”edit” and the content of the 1st label inside of the input that is linked to it (same id).

By the other way, I saw sites that when you type something inside that input, the original label of the “preview” div is getting updated in realtime.

Could someone help me with the script? Thank you!

<html>
        <body>
                <div id="preview">
                        <label id="companyName" class="workExperience">
                                This is my company
                        </label>
                        <label id="companyCountry" class="workExperience">
                                This is my company Country
                        </label>
                        <input type="button" value="edit"/>
                </div>
                <div id="edit">
                        <label>Company Name: </label>
                        <input type="text" id="companyName" />
                        <label>Company Country: </label>
                        <input type="text" id="companyCountry" />
                </div>
        </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use something like below. Notice though that I changed the id of the fields to be different. It is not a good practice to give multiple controls on the same page the same id. Some browsers do not work with this and it really doesn’t make sense anyways.

    $(document).ready(
    function()
    {
       $("#companyNameText").keypress(
           function()
           {
               $("#companyNameLabel").html(this.value);
           });

       $("#companyCountryText").keypress(
           function()
           {
               $("#companyCountryLabel").html(this.value);
           });
    });
    • 0