Show dropdown values in sum div when form is created

JavaScript
41

I did make some progress after, it wasnt much and its still not right, but i at least got the the values from the options to populate the dropdowns.

But, there too many dropdowns as there supposed to be only 9, and then the labels are not working.

Have updated the fiddle.

Would you mind getting this bit sorted for me Paul, as i need to then work out how to add the value (400) etc to multiply the dropdown value, which from the last 2 days im not looking forward to.

I’m almost done for the day now so this is where I am


$(function () {
    $(".addRow").click(addRow)
})
function sum($els) {
    var sum = 0;
    $els.each(function () {
        sum += +$(this).val()
    })
    return sum
}
function addRow() {
    var fieldset = $('<fieldset></fieldset>').appendTo("#test");
    var sumDiv = $("<div class='sum'>total £<span>0</span></div>").appendTo(fieldset)
 
$.each(selects, function (index, selectInfo) {
 var label = $("<label>"+ selectInfo.label +"</label>").prependTo(fieldset);
 $.each(selects, createSelect);
});
function sortOptions(options) {
    var optionValues = [];
 
    $.each(options, function (value, key) {
        optionValues.push(value);
    });
    function numbersDecreasing(a, b) {
        return b - a;
    }
    optionValues.sort(numbersDecreasing);
 
    return optionValues;
}
function createSelect(index, selectOptions) {
var select = $("<select class='selectD' name='select" + selectOptions.options + "'></select>").appendTo(sumDiv),
optionValues = sortOptions(selectOptions.options);
$.each(optionValues, function (index, value) {
var key = selectOptions.options[value];
$("<option></option>", {
value: value,
text: key
}).appendTo(select)
})
select.change(function () {
fieldset.find("span").text(sum($("select", fieldset)))
$(".sumTotal").find("span").text(sum($("#test select")))
}).change()
}
}
42

This is where having good info about what you are wanting to achieve can be of good benefit.

What is your desired HTML code for the form, for when a row has been added? Just what is the desired structure for your titles and selects?
Once the desired structure is known, the code can be adjusted to achieve that.

43

Hi Paul,

The structure in honesty was pretty much it for the time being as we had it last week, I kept a copy of it here.

http://quotation.csf.dcmanaged.com/design.php

The only addition to this, was to get the lables in the label area, and when selecting from the dropdown the value associated with the dropdown was multiplied with the value selected in the corresponding dropdowns.

Is that what you mean Paul.

44

This is closer now to what I had before, seems to be a bit more organised now.

Why though are there so many drop downs, and I cant seem to append them to each label all in order.

http://www.accend4web.co.uk/OCalculator/design.php

45

I think I finally worked it out -

Will see about adding the value in now.

46

It looks like you’ve found the solution to that, because one .each call was nexted within another one.

The labels are all backwards though because of how you are adding them. Currently you are prepending them, whereas instead you should be appending them instead.

This can be easily achieved by holding back on appending sumDiv until after the labels have been appended.

47

Hi Paul,

Yes it finally came together once the css was properly implemented, and yes I noticed the lables all coming out backwards will take a look at that now.

Yes I nested the other .each inside the first one and it worked, seemed to make sense when i finally noticed it and it worked, not straight away mind lol.

I have been looking at the multiplying of the value to the dropdown selected options.

I know what needs to be done, but for the life of me I couldnt work out where to do the math with it. It seemed very straight forward but when I tried to get this working it didnt do it properly, I have started a new thread with it, as it is a different problem, but doesnt look and work to bad does it?

http://www.accend4web.co.uk/OCalculator/design.php