I did it all within formbuilder.
Add two html elements to your page at the top.
In the top most paste this.
<style>#item1{
display: inline-block;
border:solid;
height: 20px !important;
width: 100px !important;
position: fixed;
bottom: 100px;
right: 30px;
}
@media only screen and (min-width: 768px) {
#item1{
right: 30px;
bottom: 40px;
}
}
@media only screen and (min-width: 1024px) {
#item1{
height: 20px;
width: 100px;
right: 30px;
bottom: 30px;
}
}
</style>
In the second one paste this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>var jQ = $.noConflict();
jQ(document).ready(function(){
jQ("input[name='running_total']").attr('readonly', true);
jQ("input[name^='number']").each(function() {
jQ(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
jQ("input[name^='number']").each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
jQ("input[name^='running_total']").val(sum.toFixed(2));
}</script>
Adjust the #item1 in the top html element to the item id wrapping your input.
Adjust the Input name
name='running_total' in the js to the input that's wrapped by that item id.
I'm using number inputs in my example that are all named number1, number2, and so on so my calculation function is looking for values in inputs starting with the name number.
name^='number'.
I don't know what your calculating but If your already targeting an input then you should only need to use the top css and adjust to your needs.