I'm trying to add or multiply input values to come to two total, this was working without trying to use a for loop. My intention was to match the selectors with the various iterations of i that are at the end of each string. I have a fiddle example here : https://jsfiddle.net/shiataz12/Lo1yek2g/69/
I've tried to copy and paste the function while manually inputting names for each iteration, however it doesnt quite work either as only the first two and last two checkbox do anything if clicked.
HTML :
<--- HTML SECTION --->>
// obtained from $nosday = $_POST['nosday'];
<br>
// value is normally $nosday
<br>
<input type="text" value="5" id="nosday"><br><br>
// obtained from $count = mysqli_num_rows($result);
<br>
// value is normally $count;
<br>
<input type="text" value="2" id="countrows"><br><br>
<label for="checkbox1">Standard</label>
<<----Assume checkbox --> id --> is $qri and $qri = "qr"."$i";
<input type="checkbox" name="checkbox1" class="quip" value="125" id="qr1" checked><br><br>
<label for="checkbox1">Equipped</label>
<input type="checkbox" name="checkbox1" class="quip" value="225" id="qr1"><br><br>
<label for="checkbox3">GPS</label>
<input type="checkbox" name="checkbox3" value="20" id="qr1"><br><br>
<label for="checkbox4">booster</label>
<input type="checkbox" name="checkbox4" value="20" id="qr1"><br><br>
<label for="checkbox5">One tent</label>
<input type="checkbox" name="checkbox5" class="tents" value="60" id="qr1" checked><br><br>
<label for="checkbox6">Two tents :</label>
<input type="checkbox" name="checkbox6" class="tents" value="80" id="qr1"><br><br>
// assume id="#dailytotal" where dailytotal = "dailytotal"."$i";
<br>
Daily :<span id="dailytotal1"> </span><br><br>
// Assume id = "$lengthtotal" where $lengthtotal = "lengthtotal"."$i";
<br>
Total :<span id="lengthtotal1"> </span><br><br>
// Hidden element for daily rate to use in $_POST, shown for now
<br>
<input tyep="text" id="dailytot1" name="pricef1" value="">
<br>
// Hidden element for length rate to use in $_POST, shown for now
<input tyep="text" id="lengthtot" name="pricef2" value="">
<input type="text" value="2" id="countrows"><br><br>
<label for="checkbox1">Standard</label>
<input type="checkbox" name="checkbox1" class="quip" value="125" id="qr2" checked><br><br>
<label for="checkbox1">Equipped</label>
<input type="checkbox" name="checkbox1" class="quip" value="225" id="qr2"><br><br>
<label for="checkbox3">GPS</label>
<input type="checkbox" name="checkbox3" value="20" id="qr2"><br><br>
<label for="checkbox4">booster</label>
<input type="checkbox" name="checkbox4" value="20" id="qr2"><br><br>
<label for="checkbox5">One tent</label>
<input type="checkbox" name="checkbox5" class="tents" value="60" id="qr2" checked><br><br>
<label for="checkbox6">Two tents :</label>
<input type="checkbox" name="checkbox6" class="tents" value="80" id="qr2"><br><br>
Daily :<span id="dailytotal2"> </span><br><br>
Total :<span id="lengthtotal2"> </span><br><br>
// Hidden element for daily rate to use in $_POST, shown for now
<br>
<input tyep="text" id="dailytot2" name="pricef1" value="">
<br>
// Hidden element for length rate to use in $_POST, shown for now
<input tyep="text" id="lengthtot2" name="pricef2" value="">
$(function() {
$("input.quip").change(function() {
$("input.quip").not(this).prop("checked", false);
});
$("input.tent").change(function() {
$("input.tent").not(this).prop("checked", false);
});
$(function() {
//get the values of the selected options
var counter = ("#countrows").val();
var i = 0;
for (i = 1; i <= counter; i++){
let v = $.map($('#qr' + i).is("checked"), function(i) {
return parseFloat($(i).val());
});
let s = v.reduce((a, b) => a + b); //sum them up to a daily total
console.log(v);
$('#dailytotal' + i).text('R' + s + '/day');
$('#lengthtotal' + i).text('R' + s * parseFloat($("#nosday").val()) + '/day');
$('#dailytot' + i).val(s);
$('#lengthtot' + i).val(s * parseFloat($("#nosday").val()));
}
});
});
The example provided assumes that there are two rows of a database and so i = 2 so id's should change to qr2 for i=2. I expected this to work by using the number of rows as a base to use a for in Jquery, limited to the number of rows so that each section can act independently, however they continue to react to the function together and do not show any values.
I thought perhaps if i could get it working for now and copy/paste code with individual id's that'd give me time to work on a better solution however it doesn't work as i'd expected. with map would it be better to declare an array prior and can i use the same id across inputs as an array? It makes calculation easier, although i guess i could use the name selector.
Hopefully someone can guide me to the correct answer, this is driving me up the wall.
Trimmed it down a little. There are other issues. The "Labels for" are suppose to refer to the id of the labelled element. The "Standard" and "Equipped" options are really radio buttons, not checkboxes, since presumably you can have one of the others. I renamed some of the classes and id's, although you may not need all of those. I am presuming that maybe you are generating the HTML dynamically and just add the value of "i" for a suffix, depending upon how many row you have. I actually just made changes to the first row and rewrote the JS to give you a total for the items form the values in the input elements for that row. Not sure exactly how you are calculating those totals, since $("#multiplier") I do not think is even in your code. You will have to look that over and see what you want, but the totals look like it is working.
<--- HTML SECTION --->>
// obtained from $nosday = $_POST['nosday'];
<br>
// value is normally $nosday
<br>
<input type="hidden" value = "1.5" id = "multiplier">
<input type="text" value="5" id="nosday"><br><br>
// obtained from $count = mysqli_num_rows($result);
<br>
// value is normally $count;
<br>
<input type="hidden" value="2" id="countrows"><br><br>
// Assume checkbox is $qri and $qri = "qr"."$i";<br>
<label for="standard1">Standard</label>
<input type="radio" name="equipment" id ="standard1" class="quip qr1" value="125" checked><br><br>
<label for="equipped1">Equipped</label>
<input type="radio" name="equipment" id ="equipped1" class="quip qr1" value="225" ><br><br>
<label for="gps1">GPS</label>
<input type="checkbox" name="gps" id ="gps1" value="20" class ="qr1"><br><br>
<label for="booster1">booster</label>
<input type="checkbox" name="booster" id ="booster1" value="20" class ="qr1"><br><br>
<label for="tents1">One tent</label>
<input type="checkbox" name="tents" id ="tents1" class="tents qr1" value="60" checked><br><br>
<label for="twotents1">Two tents :</label>
<input type="checkbox" name="twotents" id ="twotents1" class="tent qr1" value="80"><br><br>
// assume id="#dailytotal" where dailytotal = "dailytotal"."$i";
<br>
Daily :<span id="dailytotal1"> </span><br><br>
// Assume id = "$lengthtotal" where $lengthtotal = "lengthtotal"."$i";
<br>
Total :<span id="lengthtotal1"> </span><br><br>
// Hidden element for daily rate to use in $_POST, shown for now
<br>
<input tyep="text" id="dailytot1" name="pricef1" value="">
<br>
The JS probably needs to be tweaked since I do not know how you are generating the HTML. As it is, it should calculate the totals for all "i" rows on load, and it would not be hard to add something to have it calculate the total for the "ith" row. That should give you something to work with.
function Calc() {
//get the values of the selected options
var counter = $("#countrows").val();
let totals = [];
for (i = 1; i <= counter; i++) {
totals[i] = 0;
$.each($('.qr' + i + ':checked'), function() {
totals[i] += parseInt($(this).val());
});
console.log(totals[i]);
$('#dailytotal' + i).text('R' + totals[i] + '/day');
$('#lengthtotal' + i).text('R' + totals[i] * parseFloat($("#multiplier").val()) + '/day');
$('#dailytot' + i).val(totals[i]);
$('#lengthtot' + i).val(totals[i] * parseFloat($("#multiplier").val()));
}
}
Calc();
$("[class*=qr]").on("change", function(e) {
e.preventDefault();
Calc();
});
"[class*=qr]" isn't the best really because *=qr is not that specific really, depending upon your markup. Also, not clear that you are using form tags anywhere either.