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

Question

I've got some maths being calculated that I then output in a div in a

element.

What I'd love to do is create a div with CSS that takes it's values from the calculated results...

Something like this -

$("#code-results").append("<div style=" width: "OriginalResult", margin: "MarginResult" >This is some custom text</div>");

Where OriginalResult and MarginResult are the calculated results from my form inputted maths.

But I can't get this to work. I'm guessing it's how I'm adding it the CSS.

Any ideas?

EDIT

To make this a bit more clearer (here's the JSFiddle - http://jsfiddle.net/sturobson/mDfe6/19/ )

The JS to get form data and calculate it which then appendTo's the results correctly is 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 I want to create is this kinda thing with the data that fades in on submit with the relevant data and prepends to the #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 this just creates a 'dumb' div at the moment as you can see from the results.

I'd also love this to 'update/reset' when a new set of form inputs are submitted.

Not much I ask I know...

Answer 1

$(document).ready(function() {
    var originalResult = 100;
    var marginResult = 100;

    $("#code-results").html("<div style='width: " + originalResult + "; margin: " + marginResult + "' >This is some custom text</div>");

});

The problem was that your quotes were all out of whack. Notice how you can't use double quotes to start the style element unless you escape them, I opted for single quotes instead also notice the semi-colon rather than comma between styles.

EDIT

To make this a bit more clearer (here's the JSFiddle - http://jsfiddle.net/sturobson/mDfe6/19/ )

The JS to get form data and calculate it which then appendTo's the results correctly is 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 I want to create is this kinda thing with the data that fades in on submit with the relevant data and prepends to the #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 this just creates a 'dumb' div at the moment as you can see from the results.

I'd also love this to 'update/reset' when a new set of form inputs are submitted.

Not much I ask I know...