Issue with Removing Objects

[ffsja]

OK, so I have this great jQuery script that's almost fully functional thanks to some help on these forums. But I have one last piece that's not working as intended. Right now a user can add a course and when they do it updates all the price fields accordingly. This works fine. However when they click the 'Remove' link next to a course they added it doesn't change the price fields as intended, although it does remove the course <select> box. Please look at my code and help me figure out why it's not updating the price fields accordingly. Thank you!!

Here's a link to the page so you can see how it does/n't work, haha:

http://distance.uaf.edu/projects/jquery/regtest.php

Here's the relevant jQuery for removing a course <select> box:

$('a.select_remove').unbind('click').click(function(){

var tuition = document.getElementById('tuitionTotal');
var tech = document.getElementById('techTotal');
var network = document.getElementById('networkTotal');
var total = document.getElementById('courseTotal');

tuition -= parseFloat($(this).attr('rel')) || 0;
if (tech <= 60) {
tech -= 5.00;
} else {
tech -= 0.00;
}
if ($(this).attr('label').charAt(1) < 5) {
network -= 3.00;
} else {
network -= 6.00;
}
total -= tuition + tech + network;

$("span.tuitionTotal").text("$"+tuition.toFixed(2));
$("span.techTotal").text("$"+tech.toFixed(2));
$("span.networkTotal").text("$"+network.toFixed(2));
$("span.courseTotal").text("$"+total.toFixed(2));

$(this).prev('select').remove();
$(this).prev('label').remove();
$(this).remove();

return false;
});

[Spudhead]

Ok this is going to get a little complicated because you've got two threads running on the same subject.

I've done a new version of your page. Your select-removing function wasn't working at all, I've switched it over to use the livequery() plugin that harbingerOTV posted.

Code below, with comments where I've tweaked stuff. Hope it makes sense.

<script type="text/javascript">
var count = 1;

$(document).ready(function(){

	/*
		Calculate totals on course select change
	*/
	$("select.course").livequery('change',function (event) {
		var tuition = tech = network = total = 0;
		$("select.course option:selected").each(function() {
			var $this = $(this);	// speed things up a little by storing a reference to the element, rather than making jQuery go look for it each time.
			tuition += parseFloat($this.attr('rel')) || 0;
			if (tech <= 60) {
				tech += 5.00;
			}
			if ($this.attr('label').charAt(1) < 5) {
				network += 3.00;
			} else {
				network += 6.00;
			}
			total = tuition + tech + network;
		});
		$("span.tuitionTotal").text("$"+tuition.toFixed(2));
		$("span.techTotal").text("$"+tech.toFixed(2));
		$("span.networkTotal").text("$"+network.toFixed(2));
		$("span.courseTotal").text("$"+total.toFixed(2));
	});


	/*
		Calculate totals and remove course select box on "remove" link click
	*/
	$('a.select_remove').livequery('click', function(event){
		var $this					= $(this);
		var $courseSelect			= $this.prev("select.course");				//	find the select box that this anchor tag is next to
		var $selectedCourseOption	= $courseSelect.find("option:selected");	// find the selected option in the select box
		
		var tuition		= parseFloat($('#tuitionTotal').text().replace("$", ""));
		var tech		= parseFloat($('#techTotal').text().replace("$", ""));
		var network		= parseFloat($('#networkTotal').text().replace("$", ""));
		var total		= parseFloat($('#courseTotal').text().replace("$", ""));
		
		tuition -= parseFloat($selectedCourseOption.attr('rel')) || 0;
		if (tech <= 60) {
			tech -= 5.00;
		}
		if ($selectedCourseOption.attr('label').charAt(1) < 5) {
			network -= 3.00;
		} else {
			network -= 6.00;
		}
		total -= tuition + tech + network;
			
		$("span.tuitionTotal").text("$"+tuition.toFixed(2));
		$("span.techTotal").text("$"+tech.toFixed(2));
		$("span.networkTotal").text("$"+network.toFixed(2));
		$("span.courseTotal").text("$"+total.toFixed(2));
		
		$courseSelect.remove();
		$this.prev('label').remove();
		$this.remove();
		
		return false;
	});



	/*
		Add a new course select box on link click
	*/
	$('span#add_field a').click(function(){
		count++;
		$('#container')
		.append(
			$('<label>')
				.attr('for', 'course' + count)
				.append('Select Course: ')
		)
		.append(
			$('<select>')
				.attr('id', 'course' + count)
				.attr('name', 'courses[]')
				.append('<?php // php stuff ?>')
				.addClass("course")
		)
		.append(
			$('<a>').addClass('select_remove').attr('href','#').text("Remove")
		)
		return false;	// stop the anchor tag firing
	});
	
	
	
});
</script>

[ffsja]

Wow. You guys are amazing! That mostly works, except for one error when removing courses the new total is lower than it should be.

Here's an example when I add 2 additional courses:

Course 1:
tuition: $423
tech: $5
network: $3
total: $431
GOOD

Course 2:
tuition total: $846 (added $423)
tech: $10
network: $6
total: $862
GOOD

Course 3:
tuition-total: $1410
tech: $15
network: $9
total: $1434
GOOD

Remove Course 3:
tuition-total: $846
tech: $10
network: $6
TOTAL: $572 (ERROR) ... should be $862 (it subtracted the new total from the total instead of just the total of the tuition+network+tech fees of the course it removed)

So I'll be working on this myself today but thought I'd throw it out there in case you guys had an idea why it might not be working. NOTE: I'm using your code Spudhead.

Also, sorry for starting different threads. I thought the old question had been answered and should start a new one, my bad.

[harbingerOTV]

try changing this:

var $selectedCourseOption	= $courseSelect.find("option:selected");

to this:

var $selectedCourseOption	= $this.prev("select.course");

it appears to be subtracting all the course tuition costs of all the added selects when you remove one.

oh and spudhead, nifty

[ffsja]

Hmmm, that didn't quite work for me harbingerOTV. It made it stop working altogether. I thought it must have something to do with the math being used, but I'm not sure.

I changed this line:

total -= tuition + tech + network;

to:

total -= parseFloat($selectedCourseOption.attr('rel')) || 0; // works
total -= network + tech; // doesn't work

and it's VERY CLOSE. It gets the correct tuition and subtracts it now (the first line), but doesn't subtract the correct network or tech values(depending on how many courses were added)

[ffsja]

Alright, I made another go and this APPEARS to work:

		tuition -= parseFloat($selectedCourseOption.attr('rel')) || 0;
		
		if (tech <= 60) {
			tech -= 5.00;
			total -= 5.00;
		}
		if ($selectedCourseOption.attr('label').charAt(1) < 5) {
			network -= 3.00;
			total -= 3.00;
		} else {
			network -= 6.00;
			total -= 6.00;
		}
		
		total -= parseFloat($selectedCourseOption.attr('rel')) || 0;

Do you think it would give me problems with a large amount of courses added?

[ffsja]

Well, it's not perfect, but anyway, i've got another question about this form i'm working on. Can either of you point me to a script that implements a feature such that when a user clicks out of an <input> field that has a required class attached to it, it gives them an error message that the field is required? ... perhaps by turning the label red or something?

thanks!

[harbingerOTV]

I can't test your script right now but as for your question about it giving trouble with a large amount... If it works when you add 3, there's no reasonable reason to think that it will fail if you add 30. Since you're only handling 1 input at a time.

validation: http://docs.jquery.com/Plugins/Validation