Question

I’m working on one project and it would be very handy to implement “live preview” feature in it. The problem is it is not some kind of typed text preview “e.g. one like on stackoverflow when you create a question”. What I am working on is slightly different. For example, I have a form with inputs like (background color, padding value, margin value etc…) Each time user updates one of those inputs I wan’t to show preview of updated object next to the form, Lets say this object is div styled basing on what user entered in a form.

How can I achieve this feature?

jQuery based solution is preferable.

Edit: say this is how form looks

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

Answer 1

not testet but should work (with 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>