math - How can I create a div with CSS from data from a form using jquery? -

i've got maths being calculated output in div in

element.

what i'd love create div css takes it's values calculated results...

something -

$("#code-results").append("<div style=" width: "originalresult", margin: "marginresult" >this custom text</div>"); 

where originalresult , marginresult calculated results form inputted maths.

but can't work. i'm guessing it's how i'm adding css.

any ideas?

edit

to make bit more clearer (here's jsfiddle - http://jsfiddle.net/sturobson/mdfe6/19/ )

the js form data , calculate appendto's results correctly this

function round(fvalue, idecimals) { var ipow = math.pow(10, idecimals); return math.round(fvalue * ipow) / ipow; }

function div(fnumerator, fdenominator) { return (fdenominator == 0 ? 0 : fnumerator / fdenominator); }

$(document).ready(function() {

$(function(){ $("#result").submit(function(e) { e.preventdefault();

var ele = $("#element").val(),     target = parseint($("#target").val(), 10) || 0,     context = parseint($("#context").val(), 10) || 0,     border = parseint($("#border").val(), 10) || 0,     margin = parseint($("#margin").val(), 10) || 0,     padding = parseint($("#padding").val(), 10) || 0;  console.log(ele, target, context, border, margin, padding);  var doublemargin = margin * 2; var doublepadding = padding * 2; var doubleborder = border * 2;   var actualtarget = target - doubleborder - doublemargin - doublepadding * 1; var result3 = target - doublemargin * 1; var marginresult = round(div(margin, target) * 100, 5); var paddingresult = round(div(padding, target) * 100, 5); var originalresult = round(div(actualtarget, context) * 100, 5);   var borderresult = target - border * 1;   //$(".result").append(ele + " " + result + "%"); $("<p></p>", {     html: ele + " {<br><span>width: " + originalresult + "%;" + " /* " + actualtarget + " (originally " + target + ") / " + context + " */ " + "<br>border: " + border + "px; " + "<br>margin: " + marginresult + "%; " + "<br>padding: " + paddingresult+ "%;" + "<br> </span>}" }).hide().appendto("#code-results").fadein();   });     });   }); 

what want create kinda thing data fades in on submit relevant data , prepends #code-results div

$("#example").css({"background-color" : "red", "height" : "200px", "width" : "200px", "margin" : " + marginresult + %", "padding" : " + paddingresult + %", "border" : "1px solid black", "border-width" : " + border + px" }); 

currently creates 'dumb' div @ moment can see results.

i'd love 'update/reset' when new set of form inputs submitted.

not ask know...

$(document).ready(function() {     var originalresult = 100;     var marginresult = 100;      $("#code-results").html("<div style='width: " + originalresult + "; margin: " + marginresult + "' >this custom text</div>");  }); 

the problem quotes out of whack. notice how can't use double quotes start style element unless escape them, opted single quotes instead notice semi-colon rather comma between styles.

edit

to make bit more clearer (here's jsfiddle - http://jsfiddle.net/sturobson/mdfe6/19/ )

the js form data , calculate appendto's results correctly

function round(fvalue, idecimals) { var ipow = math.pow(10, idecimals); return math.round(fvalue * ipow) / ipow; }  function div(fnumerator, fdenominator) {     return (fdenominator == 0 ? 0 : fnumerator / fdenominator); }  $(document).ready(function() {  $(function(){ $("#result").submit(function(e) {     e.preventdefault();      var ele = $("#element").val(),         target = parseint($("#target").val(), 10) || 0,         context = parseint($("#context").val(), 10) || 0,         border = parseint($("#border").val(), 10) || 0,         margin = parseint($("#margin").val(), 10) || 0,         padding = parseint($("#padding").val(), 10) || 0;      console.log(ele, target, context, border, margin, padding);      var doublemargin = margin * 2;     var doublepadding = padding * 2;     var doubleborder = border * 2;       var actualtarget = target - doubleborder - doublemargin - doublepadding * 1;     var result3 = target - doublemargin * 1;     var marginresult = round(div(margin, target) * 100, 5);     var paddingresult = round(div(padding, target) * 100, 5);     var originalresult = round(div(actualtarget, context) * 100, 5);       var borderresult = target - border * 1;       //$(".result").append(ele + " " + result + "%");     $("<p></p>", {         html: ele + " {<br><span>width: " + originalresult + "%;" + " /* " + actualtarget + " (originally " + target + ") / " + context + " */ " + "<br>border: " + border + "px; " + "<br>margin: " + marginresult + "%; " + "<br>padding: " + paddingresult+ "%;" + "<br> </span>}"     }).hide().appendto("#code-results").fadein();   });  });   }); 

what want create kinda thing data fades in on submit relevant data , prepends #code-results div

$("#example").css({"background-color" : "red", "height" : "200px", "width" : "200px", "margin" : " + marginresult + %", "padding" : " + paddingresult + %", "border" : "1px solid black", "border-width" : " + border + px" }); 

currently creates 'dumb' div @ moment can see results.

i'd love 'update/reset' when new set of form inputs submitted.

not ask know...