Set input fields to the current value of label elements

问题

How can I get the current value of the label elements within function showEditionBlock() and set them to the corresponding input fields? The function will show the "edit" div, but the inputs are not getting the original values of the labels.

<html>
<head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

</head>
<script>
$(document).ready(
    function()
        {

           $("#companyNameText").keyup(
           function()
           {
               $("#companyNameLabel").html(this.value);
           });

           $("#companyCountryText").keyup(
           function()
           {
               $("#companyCountryLabel").html(this.value);
           });
    });
function showEditionBlock(){
    //$("div#edit").css('display','block').fadeIn("slow");  
    $("div#edit").fadeIn('slow', function(){ 
            $(this).css('display', 'inline'); 
        }); 
    }

function hideEditionBlock(){
    //$("div#edit").css('display','block').fadeIn("slow");  
    $("div#edit").fadeOut('slow', function(){ 
            $(this).css('display', 'none'); 
        }); 
    }



</script>
        <body>
                <div id="preview">
            <fieldset>
                        <label id="companyNameLabel" class="workExperience">
                                This is my company
                        </label>
                        <label id="companyCountryLabel" class="workExperience">
                                This is my company Country
                        </label>
                        <input type="button" value="edit" onclick="showEditionBlock();"/>
            </fieldset>
                </div>
                <div id="edit" style="display:none;">
            <fieldset>
                        <label>Company Name: </label>
                        <input type="text" id="companyNameText" />
                        <label>Company Country: </label>
                        <input type="text" id="companyCountryText" />
                        <input type="button" value="Ok" onclick="hideEditionBlock();"/>
            </fieldset>
                </div>
        </body>
</html>

回答1:

You should assign the innerHTML of the labels to the values of the inputs. In plain ol' Javascript you can do something like:

document.getElementById("companyNameText").value =
    document.getElementById("companyNameLabel").innerHTML;
document.getElementById("companyCountryText").value =
    document.getElementById("companyCountryLabel").innerHTML;

Using jQuery, this is the same:

$("#companyNameText").val($("#companyNameLabel").html());
$("#companyCountryText").val($("#companyCountryLabel").html());

来源：https://stackoverflow.com/questions/3462515/set-input-fields-to-the-current-value-of-label-elements

标签

javascript

jquery

input

label