2011-02-02 68 views
1

我有一個表單文本區域和兩個輸入字段。我想讓用戶能夠點擊一個「預覽」鏈接,並獲取他剛剛輸入到div中的表單的內容。將輸入字段的內容複製到隱藏區域

該div由燈箱使用,將顯示內容作爲預覽。那有意義嗎?我需要一些認真的幫助。非常感謝。

+0

這裏唯一的問題是: 「這是否有意義?」。這個問題的答案是「是」,但這顯然不是你想要的。請重新說明這個問題,以便它實際提出一個關於如何使用代碼做些事情的問題。我不知道你不能做什麼。 – tster 2011-02-02 18:25:02

回答

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

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

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()); 
}); 
0
<a href="#" onclick="showPreview(); return false;">Show preview</a> 

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

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