如何根據表單中輸入的信息進行實時預覽？ PHP/AJAX？

我正在開發一個項目，它將非常方便地在其中實現「實時預覽」功能。問題在於它不是某種鍵入的文本預覽「例如，當您創建問題時，就像在stackoverflow上一樣」。我的工作內容稍有不同。例如，我有一個輸入形式（背景顏色，填充值，邊距值等）。每次用戶更新其中一個輸入時，我不想在窗體旁顯示更新對象的預覽，讓我們說這個對象是根據用戶在表單中輸入的內容進行劃分的。如何根據表單中輸入的信息進行實時預覽？ PHP/AJAX？

我該如何實現此功能？

基於jQuery的解決方案更可取。

編輯：說這是表單外觀

<form id="div_builder"> 
    <input type="text" name="background_color"/> 
    <input type="text" name="padding"/> 
    <input type="text" name="margin"/> 
</form>

來源

2012-01-14 Ilja

那麼，什麼是真正的問題？更新每個字段值的預覽div用javascript – zerkms 2012-01-14 09:45:30

不testet但應該工作（使用jQuery）...

<form id="div_builder"> 
    <input type="text" name="background-color"/> 
    <input type="text" name="padding"/> 
    <input type="text" name="margin"/> 
</form> 

<div id="object"><img src="some object" /></div> 

<script type="text/javascript"> 
$('#div_builder input').change(function(){ 
    var css = $(this).attr("name"); 
    $("#object").css(css,$(this).val()); 
}) 
</script>

來源

2012-01-14 09:57:03 Abadon

爲什麼'.attr（「value」）'而不是'.val（）'，只是好奇 – zerkms 2012-01-14 11:32:24

你提到.attr（「name」）你的意思是輸入正確？所以基本上我會爲每個輸入複製你的代碼3次，並且改變「name」和css「value」的權利？ – Ilja 2012-01-14 12:39:31

不，它捕獲給定表單中的所有輸入...輸入的名稱必須是應該更改的css值的名稱。不要改變功能中的東西，它會像它一樣工作 – Abadon 2012-01-14 13:03:01

的change event是你的朋友。每次更改時，調用一個函數，將所選屬性分配給要顯示的div。

來源

2012-01-14 09:57:01 Nicolas78

如何根據表單中輸入的信息進行實時預覽？ PHP/AJAX？

回答

相關問題