Question

我有一个表单textarea和两个输入字段。我希望允许用户点击“预览”链接并获取他刚刚输入div的表单内容。

div由灯箱使用，灯箱会将内容显示为预览。那有意义吗？我需要一些认真的帮助。非常感谢。

Answer 1

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

Answer 2

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

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

Answer 3

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 4

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

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

将输入字段的内容复制到隐藏的div

4 个答案: