EE_Q_28406036

by robert_schutt

HTML

<div id="container">
<form name="frm1" id="frm1">
    <span class="header header1">Option</span>
    <span class="header header2">Price</span>
    <span class="header header3">Qty</span>
    <br style="clear: both;"/>
    <input type='text' name='productname[]' />
    <input type='text' name='qty[]' />
    <input type='text' name='price[]' />
    <br style="clear: both;"/>
    <input type='text' name='productname[]' />
    <input type='text' name='qty[]' />
    <input type='text' name='price[]' />
</form>
<span class='totalvalue'>0.00</span>
</div>

CSS

#container {
    display: inline-block;
    border: 2px solid silver;
    padding: 10px;
}
form#frm1 {
    border-bottom: 2px dotted silver;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
form#frm1 input {
    border: none;
    padding: 5px;
    margin-top: 1px;
    margin-bottom: 2px;
}
span.header {
    font-size: small;
    font-weight: bold;
    padding: 5px;
    display: inline-block;
}
span.header1 {
    width: 200px;
}
span.header2 {
    width: 60px;
    text-align: center;
}
input[name^=productname] {
    width: 200px;
}
input[name^=qty] {
    width: 30px;
    float: right;
    border: 1px solid silver !important;
    margin-top: 0 !important;
}
input[name^=price] {
    width: 60px;
    text-align: right;
}
span.totalvalue {
    display: block;
    text-align: right;
    width: 100%;
    color: red;
    font-weight: bold;
}
span.totalvalue::before {
    content: "Total Price: £ ";
}

JavaScript

$('input[name^=productname]').each(function(i,o){
    o.value = 'product ' + Math.floor(1000 + Math.random() * 9000);
    o.readonly = true;
});
$('input[name^=price]').each(function(i,o){
    o.value = "£ " + Math.floor(100 + Math.random() * 900) + ".00";
    o.readonly = true;
});
$('input[name^=qty]').on('change', function(){
    var ttl = 0;
    var allInputs = $('#frm1 input[type=text]');
    for (var i=0; i < allInputs.length; i+=3) {
        ttl += allInputs[i+1].value * allInputs[i+2].value.substr(2);
    }
    $('span.totalvalue').text(ttl.toPrecision((""+Math.floor(ttl)).length+2));
}).each(function(i,o){
    o.value = '0';
});