フォームに入力された情報に基づいてライブプレビューを作成するにはどうすればよいですか？ PhP/ajax？

Question

私は1つのプロジェクトに取り組んでおり、その中に「ライブプレビュー」機能を実装するのが非常に便利です。問題は、「質問を作成するときにstackoverflowのようなもの」など、入力されたテキストプレビューの種類ではないということです。私が取り組んでいることは少し異なります。例えば、私は、背景色、パディング値、余白値などのような入力を持つフォームを持っています。ユーザがこれらの入力の1つを更新するたびに、フォームの隣にある更新されたオブジェクトのプレビューを表示することができませんでした。オブジェクトは、ユーザがフォームに入力したものに基づいてスタイル付けされます。

どうすればこの機能を利用できますか？

jQueryベースのソリューションが適しています。

編集：これはフォームが

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

Answer 1

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> 

Answer 2

change eventはあなたの友達ですがどのように見えるかであると言います。それぞれの変更で、表示するdivに選択した属性を割り当てる関数を呼び出します。