Copy contents of input fields to a hidden div

I have a form one textarea and two input fields. I want to allow the user to be able to click on a "preview" link and get the content of the form that he just entered into a div.

The div is used by a lightbox that will show the content as a pre开发者_如何学运维view. Does that make sense? I need some serious help. Thanks a lot.

Using JQuery you can do something like the following:

<form>
   <input type="text" id="input-lastname" name="lastname" value=""/>
   <input type="text" id="input-firstname" name="firstname" value=""/>
   <textarea id="input-text' rows="10" cols="10"/>
</form>

<a href="#" id="preview-invoke">Preview</a>

<div id="preview" style="display:none">
   <p id="preview-firstname"></p>
   <p id="preview-lastname"></p>
   <p id="preview-text"></p>
</div>

<script type="text/javascript">

   $(document).ready(function() {
      $('#preview-invoke').click(function(evt) {
         evt.stopPropagation();
         $('#preview-firstname').html($('#input-firstname').val());
         $('#preview-lastname').html($('#input-lastname').val());
         $('#preview-text').html($('#input-text').val());

         //TODO: invokeLightBox();
         return false;
      });
   });
</script>

<a href="#" onclick="renderPreview();">preview</a>

<script>
function renderPreview() {
    document.getElementById('preview').innerHTML=document.getElementById('txt-input').value;
}
</script>

<a href="#" onclick="showPreview(); return false;">Show preview</a>

<script type="text/javascript">
    function showPreview() {
        $('#hiddenDiv').html('<p>'+$('#textarea').val()+'</p>').show();
    }
</script>

jQuery version

Working Sample: http://jsfiddle.net/yvTNc/4/

HTML

<input id="inputItem" type="text" size="20" /><br><br>

<a href="#" id="renderPreview">Preview</a><br><br>

<div id="hiddenDiv"></div>

CSS

#hiddenDiv{display:none;}

jQuery

$('#renderPreview').click(function(){
    $.('#hiddenDivId').html( $('#inputItemId').val() );
});