Javascript novice trying to fix a broken formsbuilder page my old colleague set up


#1

Hello there,

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>

30

Thank you very much in advance!

littleredweb


#2

What about the HTML code? There must be html code as well. Given the amount of .parent() and other methods i see

Whoever wrote that code was not really concerned about performance it seems.

But as developer, shouldn’t you be able to fix it? Did you ask permission before posting this?


#3

Hi,

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.


#4

No, from your work/organization, the code might be licensed. Just wanted to check

its really difficult to debug something which i can not replicate. It might be easier to ask a senior for help?


#5

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)!


#6

you can’t know for sure, you might have a typo (in an ID for example), but given i can’t see the html code, i can’t say.


#7

I think all the IDs are correct. I have grabbed the html from the page source if that helps at all?

<div class="row form-group">
		<div class="col-xs-3">
			<a class="field-anchor" id="fbr_4" name="fbr_4"></a>
			<label for="for4" class="checkbox-label">
				Please select the trips and events you would like to attend:
				<span class="required_true">*</span>
			</label>
		</div>
	<div class="col-xs-9">
		<div class="radio-check-set">				<div class="checkbox">
					<label for="for4_0">
						<input type="checkbox" id="for4_0" name="elements[4].values" data-name="trips" 
						
							value="0-oxforddaytrip"/>
						Oxford Day Trip
					</label>
				</div>
				<div class="checkbox">
					<label for="for4_1">
						<input type="checkbox" id="for4_1" name="elements[4].values" data-name="trips" 
						
							value="1-harrypotterworld"/>
						Harry Potter World
					</label>
				</div>
				<div class="checkbox">
					<label for="for4_2">
						<input type="checkbox" id="for4_2" name="elements[4].values" data-name="trips" 
						
							value="2-londontripincludeshoponhopoffbus"/>
						London Trip (includes hop on/hop off bus)
					</label>
				</div>
				<div class="checkbox">
					<label for="for4_3">
						<input type="checkbox" id="for4_3" name="elements[4].values" data-name="trips" 
						
							value="3-londontripexcludeshoponhopoffbus"/>
						London Trip (excludes hop on/hop off bus)
					</label>
				</div>
				<div class="checkbox">
					<label for="for4_4">
						<input type="checkbox" id="for4_4" name="elements[4].values" data-name="trips" 
						
							value="4-brightontrip"/>
						Brighton Trip
					</label>
				</div>
				<div class="checkbox">
					<label for="for4_5">
						<input type="checkbox" id="for4_5" name="elements[4].values" data-name="trips" 
						
							value="5-thorpepark"/>
						Thorpe Park
					</label>
				</div>
				<div class="checkbox">
					<label for="for4_6">
						<input type="checkbox" id="for4_6" name="elements[4].values" data-name="trips" 
						
							value="6-westendtheatretrip"/>
						West End Theatre Trip
					</label>
				</div>
            <input type="hidden" id="_elements[4].values" value="on" name="_elements[4].values"/>
		</div>
	</div>
</div>

	<div class="row form-group">
		<div class="col-xs-3">
			<a class="field-anchor" id="fbr_5" name="fbr_5"></a>
			<label for="for5">
				Total transaction value:
				<span class="required_true">*</span>
			</label>
		</div>
		<div class="col-xs-9 payment-group">
			<select class="dropdown" id="for5" name="elements[5].values" data-name="totaltv" onchange="reCalculateTransactionValue()">
					<option value="0-">----</option>
					<option value="1-15"> Oxford Day Trip</option>
					<option value="2-50"> Harry Potter World</option>
					<option value="3-64"> London Trip (includes hop on/hop off bus)</option>
					<option value="4-42"> London Trip (excludes hop on/hop off bus)</option>
					<option value="5-25"> Brighton Trip</option>
					<option value="6-41"> Thorpe Park</option>
					<option value="7-50"> West End Theatre Trip</option>
					<option data-other="true"  value="">Other</option>
			</select>
				<label for="for5_OTHER" class="other-choice">
					Other
					<input type="text" name="elements[5].values" class="payment-other" onchange="reCalculateTransactionValue()"
onkeyup="reCalculateTransactionValue()"
value="" disabled />
				</label>
				<div id="totalValueLabel">
					Total transaction value: <span id="totalTransactionAmount">0</span> GBP
				</div>
		</div>
</div>

#8

here:

$('#for4_0').parent().parent()

using .parent() is a terrible idea, its what is causing the bug.

just give <div class="col-xs-9"> an id, that is much easier and less change of bugs then using parent twice. Not sure why this causes a bug though

why you have this:

				<div id="totalValueLabel">
					Total transaction value: <span id="totalTransactionAmount">0</span> GBP
				</div>

and also insert something very similar using jquery is a mystery to me.


#9

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


#10

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.