I am working on a ‘formsbuilder’ form. The form is a page for users to pick multiple trips they would like to go on. From picking multiple trips, a value should show up with the total of how much the multiple trips are going to cost the user.
Custom code was required to create this functionality as the CMS we use at our work is a little restricted!
It seems to have broken and I’m not sure why.
When a user selects the first trip, the total comes up correctly as it should (so £15), there is a screenshot attached. I should be able to click on the other trips and the totals should gradually add up to £287, but none of the other check boxes are generating anything.
The code is as follows:
<script type="text/javascript">// <![CDATA[
(function(window,document,$,undefined){
$(document).ready(function(){
$('#for5').hide().next().hide().next().hide();
$('#for5').val('').attr('readonly',true);
$('<div id="myTotalValueLabel"><span id="myTotalTransactionAmount">0.00</span> GBP</div>').insertBefore($('#for5'));
var prices = {
'for4_0': 15,
'for4_1': 50,
'for4_2': 64,
'for4_3': 42,
'for4_4': 25,
'for4_5': 41,
'for4_6': 50
};
var ids = [];
for(var id in prices) ids.push(id);
function getTotal(){
var total = 0;
for(var i=0;i<ids.length;i++){
if($("#"+ids[i]).is(':checked'))
total += prices[ids[i]];
}
return total;
}
$('#for4_0').parent().parent().on('change','input',function(){
var total = getTotal();
$('#myTotalTransactionAmount').html(total.toFixed(2));
$('.payment-other').val(total.toFixed(2));
reCalculateTransactionValue();
});
});
})(this,this.document,this.jQuery)
// ]]></script>
My apologies I’m not sure what you mean by permissions, do you mean permission to post by codecademy? Have I made a mistake already?
There is html code, automatically created from the forms builder set up. I’ve pasted just what I’ve done in the customisable section of the CMS.
I was a bit unsure what your question is about being a developer as well. Is that a rhetorical question? As I mentioned in the subject, I’m a javascript novice so not a fully fledged developer.
Ah I see - no the code is not licensed to the company.
I emailed my senior a couple of days ago for help but, alas, he has not replied yet (it’s a common theme and we both work remotely), so I thought I’d try a potentially quicker solution.
Thank you anyway. At least this confirms to me that it’s not an “obvious” fix (like a spelling mistake or an extra bracket or something)!
actually, thinking about it, this bug is really easy. $('#for4_0').parent().parent().on('change','input',function() will attach the event listener to #for4_0, which why only the first one was working
This would indicate multiple choices, which means the checkboxes all have to have different names (or no name at all). When the name attributes have the same value, only one of them may be checked.
