Hello guys, I am not really good at jquery neither javascript.
I have a button named "Add rows", which adds three dropdown list in below the existing one.
The last two are dependent on each other, eg, if I select '0-10kg' from weight list, the price dropdown changes to '1400'.
I want the sum of values selected by the user in the price dropwdown list of all rows created by the user.
This is my code.
html code here
`
<INPUT type="button" value="Add Row" id="button" />
<!-- this button generates three dropwdown lists below the first row and so on !-->
<form id="form1" method="post" action="">
<TABLE id="dataTable">
<TR>
<TD>
<!-- checkbox added for delete option row but isn't working as of now!-->
<INPUT type="checkbox" name="chk"/>
</TD>
<TD>
<select>
<option>Baggage</option>
</select>
</TD>
<TD>
<!-- the weight values are in the javascript code and are populated automatically --!>
<select id="selectCategory">
<option value="0">Choose weight</option>
</select>
</TD>
<TD>
<!-- this value generates after an option from weight is selected, this too is there in the javascript code --!>
<select id="selectSubCategory" name="selectSubCategory" >
<option>Choose price</option>
<option value="1">0</option>
<option value="2">1400</option>
<option value="3">1900</option>
<option value="4">2100</option>
<!-- added these options because needed them to calculate total --!>
</select>
</TD>
</TR>
</TABLE>
</form>
Price: <u id="price"></u> <!--total amount to be displayed here --!>
and jquery here
$(function() {
$('#selectCategory').change(function() {
getSelectedItem(this, null);
});
/* adds row */
$('#button').click(function() {
addRow('dataTable');
});
/* this is where the values are given */
var jsonObj = {
"Other": ["0"],
"0-10kg": ["1400"],
"11-15kg": ["1900"],
"16-20kg": ["2100"]
};
var keys = Object.keys(jsonObj);
var category_dropdown = document.getElementById("selectCategory");
var getSelectedItem = function(element, row) {
var e = element;
var selectedCategory = e.options[e.selectedIndex].value;
var sub_category_dropdown = (row != null ? row.getElementsByTagName("select")[2] : document.getElementById("selectSubCategory"));
sub_category_dropdown.options.length = 0;
for (var i = 0; i < jsonObj[selectedCategory].length; i++) {
sub_category_dropdown[sub_category_dropdown.length] = new Option(jsonObj[selectedCategory][i], jsonObj[selectedCategory][i]);
}
};
var addRow = function(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
newcell.childNodes[0].selectedIndex = 0;
}
var selects = row.getElementsByTagName("select");
selects[1].addEventListener('change', function() {
getSelectedItem(this, row)
}, false);
};
for (var keys in jsonObj) {
category_dropdown[category_dropdown.length] = new Option(keys, keys);
}
});
/* a code to store the values selected by the user and show it's total */
$(function ()
{
var fields = $('#form1 :input').change(calculate)
$("#form1 option").text(function(i,t)
{
if (this.value!=="0")
return t + " - " + this.value
})
function calculate() {
var price = 0;
fields.each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
price += +$(this).val(); //only shows the selected value in the first row, last dropdown list
}
})
$('#price').html(price.toFixed(2)); //decimal rounded till 2 numbers
}
});
/*using console to show selected values of all rows in the last dropwdown list but not working */
$('body').on('change', "#selectSubCategory", function(e){
console.log($(this).val());
});`