Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Issue with Removing Objects

    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;
    });

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    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.

    Code:
    <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>

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    try changing this:

    Code:
    var $selectedCourseOption	= $courseSelect.find("option:selected");
    to this:
    Code:
    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
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)

  • #6
    New Coder
    Join Date
    Jul 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Alright, I made another go and this APPEARS to work:

    Code:
    		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?

  • #7
    New Coder
    Join Date
    Jul 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    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!

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •