Копирование содержимого полей ввода в скрытый div

Question

У меня есть одна текстовая область и два поля ввода. Я хочу, чтобы пользователь мог щелкнуть ссылку «Предварительный просмотр» и получить содержимое формы, которое он только что ввел в div.

Этот раздел используется в лайтбокс, которые будут отображаться в качестве превью. Имеет ли это смысл? Мне нужна серьезная помощь. Большое спасибо.

Answer 1

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

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

Answer 2

JQuery версия

Работа Пример: 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()); 
}); 

Answer 3

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

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

Answer 4

Использование JQuery вы можете сделать что-то вроде следующего:

<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>