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>
You should assign the
innerHTML
of the labels to thevalue
s of the inputs. In plain ol' Javascript you can do something like:Using jQuery, this is the same: