#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    567
    Rep Power
    51

    Executing Multiple Javascripts


    Hi:

    I have an order form which allows customers to order multiple items by entering a quantity and the javascript (using keyup) automatically calculates the subtotal for a line item as the user types a quantity. As well, the grand total at the bottom also sums all product lines as the value on one product line changes.

    Further, there are two levels of pricing, standard and member. If a user is a member, their cost is calculated using member pricing. Otherwise costs are calculated using standard pricing. Non members can also select to purchase membership and then a line item for membership is added and costs for the products are calculated using member pricing.

    THE PROBLEM is that the selector to add membership is in a different script from the product price calculation. So, if users select that they want to add membership, THEN when they select the prices are calculated using member pricing. BUT if they go back and change the membership request to "no" but don't change any values in the product array, the product prices are not recalculated using standard pricing.

    I am not even sure how I can get the onChange function on the membership selector to force a re-calculation in the product array

    The Membership selector looks like this:

    Code:
    <select onChange=\"dropdownMbr(this.value)\" name=\"add_mbr\" style=\"margin-right:10px; margin-top:2px;\">
    <option value=0> -- Choose -- </option> 
    [membership options here]
    <script type=\"text/javascript\">
        function dropdownMbr(value){
            curr_member = \"$member\";
            document.getElementById(\"mbr_add\").innerHTML = value;
            addm = document.getElementById(\"mbr_add\").innerHTML;
    	finishCalcs();
        }
    </script>
    The product array calculation looks like this:

    Code:
    <INPUT type=\"text\" name=\"ttl_units[$i]\" class=\"unitCount\" data-id=\"$i\"  data-p_name=\"$product_name\" data-f_name=\"$field_name\"  data-standard=\"$standard_price\" data-member=\"$member_price\" data-member_price_limit=\"$member_price_limit\" data-eb_discount=\"$eb_discount\"size=\"10\" maxlength=\"10\" value=\"0\" /> 
    
    <script type="text/javascript">  
    	$('.unitCount').keyup(function(e){ 
    			
    		if (typeof addm == 'undefined') {
      			addm = 0;
    		}
    		addm = parseInt(addm);
    
    		p_name = $(this).attr('data-p_name');
    		f_name = $(this).attr('data-f_name');
    		mbr_add = Number(document.getElementById("mbr_add").innerHTML);
    		curr_mbr = "$member";
    		if(curr_mbr == "yes" || mbr_add >0){
    			memType = "member";
    		}else{
    			memType = "standard";
    		}
    		unitCount1 = $(this).val(); 
    		unitCount = unitCount1; 
    		unitSubId = $(this).attr('data-id'); 
    		std_price = $(this).attr('data-standard');
    		unitPrice = {'standard': +$(this).attr('data-standard'), 'member': +$(this).attr('data-member'), 'joining': +$(this).attr('data-member')};  
    		eb_disc = $(this).attr('data-eb_discount');
    		member_price_limit1 = $(this).attr('data-member_price_limit');
    		member_price_limit =  parseInt(member_price_limit1);
    		memFee = addm;
    		grandTotal = 0.00; 
    	
    		finishCalcs();
    	}); 
    </script>
    Finally, the following is intended to calculate the total from both of the previous but, of course, changing the on change from the membership selector does not effect the keyup in the product array

    Code:
    <script type="text/javascript">
    function finishCalcs(){
    		
    	if(curr_mbr == "yes" || addm >0){
    		if (member_price_limit > 0 && unitCount > member_price_limit){
    			num_at_standard = unitCount - member_price_limit;
    			document.getElementById(f_name).innerHTML = p_name + "<br/> (Max for Mbr Price Exceeded, " + num_at_standard + " charged at standard rate)";
    			unitSub1 = (member_price_limit * unitPrice[memType] * (1 - eb_disc/100));
    			unitSub2 = (num_at_standard * std_price * (1 - eb_disc/100));
    			unitSub = unitSub1 + unitSub2;
    		}else{
    			unitSub = (unitCount * unitPrice[memType] * (1 - eb_disc/100));
    		}		
    	}else{
    		unitSub = (unitCount * unitPrice[memType] * (1 - eb_disc/100));
    	}
    	document.getElementById('unitPriceDisp'+unitSubId).innerHTML = '$'+unitPrice[memType].toFixed(2); 
    	document.getElementById('unitSubDisp'+unitSubId).innerHTML = '$'+unitSub.toFixed(2); 
    	document.getElementById('unit_price['+unitSubId+']').value = unitPrice[memType].toFixed(2); 
    	document.getElementById('subttl['+unitSubId+']').value = unitSub.toFixed(2); 
    	$('.subVal').each(function() { grandTotal += +this.value }); 
    	addm = parseInt(addm);
    	grandTotal += addm; 
    	document.getElementById('MemberFeeDisp').innerHTML = '$'+addm.toFixed(2);
    	document.getElementById('mbrFee').value = addm.toFixed(2); 
    	document.getElementById('GrandTotal').innerHTML = '$'+grandTotal.toFixed(2); 
    }
    </script>
    Any suggestions would be greatly appreciated.
    Last edited by SeanF; March 4th, 2018 at 04:46 AM.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2015
    Posts
    8
    Rep Power
    0
    I'm not going to go in to the code and tell you exactly what to do 'cause I don't have the time. But here is the approach you should take: move all of the script code into a dedicated single javascript file that contains functions that take care of the rules you need followed above. The js file will have functions that do the work in response to the various events on the page that should appropriately trigger them. Example names of functions I can think of off-hand would include: productQtyChanged(productId), productLineItemAdded(productId), customerChoseMembership(booleanYesOrNo), calculateAllCosts(). All of the functions call "calculateAllCosts" when they have gathered there data and updated any arrays/objects/variables in memory that are visible to all of those functions. When a function gets a handle on a supplied productID, it uses jQuery (or js) to pick off the qty for that item and it updates the in-memory variables and then finally calls the "calculateAllCosts" function. In this way, you close all loops everywhere and there are no loose ends. The benefits of including an external javascript resource file that I'm speaking of here above are great. Having script tags inside your page makes it more difficult to manage than it needs to be.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2004
    Location
    Boston, MA USA
    Posts
    567
    Rep Power
    51
    Thanks for the insight.

    I wasn't really expecting anyone to read all the code, it kind of calls into the "TLDR" category. I only included it in case anyone was curious.

    I will start building a single js file with multiple functions and see where that takes me.

    Thanks again,

IMN logo majestic logo threadwatch logo seochat tools logo