www.webdeveloper.com
Page 3 of 3 FirstFirst 123
Results 31 to 44 of 44

Thread: Javascript sums for 2 different sub total fields help

  1. #31
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    This will probably be a little messy. Throughout this thread the code has changed a bit and I've done my work on several computers (so I was updating an older version that was on this PC). Also, the biggest thing I didn't want to deal with was the HTML/formatting of this form. So with that aside, understand this code works, but cannot be directly copied into your page as it'll likely break something. But if you're careful, you can take out the parts and place them as you see fit. As long as the core of this is on your page and the script is the same, it should work.

    HTML Code:
    Number of Items:
    <select id="itemCount" name="itemCount" onchange="_ChangeItemCount(this)">
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    </select>
    <br />
    <br />
    <p><input class="checkbox" value="withouttooling" checked="checked" name="tooling" type="radio"> No Tooling Design<br/><br />
    <input class="checkbox" value="withtooling" name="tooling" type="radio"> With tooling design<br/><br />
    <small style="FONT: 10px Arial,Helvetica,sans-serif">(All tooling Gold unless otherwise specified)</small></p>
    <p>Tooling design inset<br/><br />
    Choose<br />
    <input class="checkbox" value="1/2 inch" name="inset" type="radio"> 1/2”<br />
    <input class="checkbox" value="3/4 inch" name="inset" type="radio"> 3/4”<br />
    <input class="checkbox" value="1 inch" name="inset" type="radio"> 1”</p>
    <p>Plus $25.00 shipping</p>
    <hr/>
    <br />
    
    <div id="itemDiv1">
    	<strong>Item 1</strong>
    	<br />
    	Width<br />
    	<input class="short" onchange="Calculate(1)" name="width1"><small>(in)</small>
    	<br/><br />
    	Length<br />
    	<input class="short" onchange="Calculate(1)" name="length1"><small>(in)</small>
    	<p style="PADDING-BOTTOM: 0pt"><strong>Total Cost</strong><input class="short" onfocus="this.form.elements[0].focus()" name="totalcost1" id="totalcost1" /></p>
    </div>
    
    
    <div id="itemDiv2">
    	<strong>Item 2</strong>
    	<br />
    	Width<br />
    	<input class="short" type="text" name="width2" onchange="Calculate(2)" /><small>(in)</small>
    	<br /><br />
    	Length<br />
    	<input class="short" type="text" name="length2" onchange="Calculate(2)" /><small>(in)</small>
    	<p style="PADDING-BOTTOM: 0pt"><strong>Total Cost</strong><input class="short" onfocus="this.form.elements[0].focus()" name="totalcost2" id="totalcost2" /></p>
    </div>
    
    
    <div id="itemDiv3">
    	<strong>Item 3</strong>
    	<br />
    	Width<br />
    	<input class="short" type="text" name="width3" onchange="Calculate(3)" /><small>(in)</small>
    	<br /><br />
    	Length<br />
    	<input class="short" type="text" name="length3" onchange="Calculate(3)" /><small>(in)</small>
    	<p style="PADDING-BOTTOM: 0pt"><strong>Total Cost</strong><input class="short" onfocus="this.form.elements[0].focus()" name="totalcost3" id="totalcost3" /></p>
    </div>
    
    
    <br />
    <br />
    
    Grand Total: <span id="grandTotal"></span>
    
    <script>
    if(typeof(_N) != "function") function _N($n, $d) { return ($d) ? Number($n).toFixed($d).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : $n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }
    
    $itemCount = 1;
    
    function _ChangeItemCount($a) {
    	$itemCount = $a.value;
    	document.getElementById("itemDiv1").style.display = "none";
    	document.getElementById("itemDiv2").style.display = "none";
    	document.getElementById("itemDiv3").style.display = "none";
    	for(var $i = 0; $i < $itemCount; $i++) {
    		document.getElementById("itemDiv"+($i+1)).style.display = "block";
    	}
    	_CalculateTotal();
    }
    _ChangeItemCount(document.getElementById("itemCount"));
    
    function Calculate($a) {
    	var order_total, length, width, i;
    	order_total = 0;
    
    	length = parseFloat(document.forms[1]["length"+$a].value);
    	width = parseFloat(document.forms[1]["width"+$a].value);
    
    	if(length > 0 && width > 0) {
    		order_total = length * width;
    		for(i = 0; i < document.forms[1]["tooling"].length; i++) {
    			if (document.forms[1]["tooling"][i].value === "withouttooling" && document.forms[1]["tooling"][i].checked === true) order_total = order_total * ".30";
    			if (document.forms[1]["tooling"][i].value === "withtooling" && document.forms[1]["tooling"][i].checked === true) order_total = order_total * ".40";
    		}
    		order_total = order_total + 25;
    	} else {
    		order_total = 0;
    	}
    
    
    	document.forms[1]["totalcost"+$a].value = '$' + _N(order_total, 2);
    	_CalculateTotal();
    }
    
    function _CalculateTotal() {
    	var $grandTotal = 0;
    	var $f = document.forms[1];
    	for(var $i = 0; $i < $itemCount; $i++) {
    		var $tmpTotal = parseFloat($f["totalcost"+($i+1)].value.replace(/[^0-9.]/g, ""));
    		$grandTotal = (isNaN($tmpTotal)) ? ($grandTotal) + 0 : ($grandTotal) + $tmpTotal;
    	}
    	document.getElementById("grandTotal").innerHTML = _N($grandTotal, 2);
    }
    </script>
    This is pretty simple overall, but to explain (so you know what you're getting and what to expect), this has a dropdown/select element at the top. When you change this, a new function will show/hide the number items (currently set at a max of 3). Each 'item' display includes a width, length and totalcost field. Each of these items functions independently, with their own values and prices. The tooling and options are at the top, but not part of any specific item (so the value is applied to all items). The grand total calculates the total based on which items are currently visible/available.

    Again, be careful when adding this code. I didn't copy your entire form so the actual HTML part needs to be inserted as you feel it should be placed on your form. The javascript can be copied directly with no issues.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  2. #32
    Join Date
    Apr 2014
    Posts
    36
    Hi, thanks for helping with this.

    I added this to a new page just to test and items 2 and 3 appear to be showing all the time. (doesn't matter how many items are selected)

    I added html head body and form tags (just didn't spend time formatting)

    I removed the newsletter form off of my site so I think I needed to change form name from 1 to 0.

    This is the page I have it plugged into - http://www.webcrawldesigns.com/dct/new-code/


    This is the code in the page
    if(typeof(_N) != "function") function _N($n, $d) { return ($d) ? Number($n).toFixed($d).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : $n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }

    $itemCount = 1;

    function _ChangeItemCount($a) {
    $itemCount = $a.value;
    document.getElementById("itemDiv1").style.display = "none";
    document.getElementById("itemDiv2").style.display = "none";
    document.getElementById("itemDiv3").style.display = "none";
    for(var $i = 0; $i < $itemCount; $i++) {
    document.getElementById("itemDiv"+($i+1)).style.display = "block";
    }
    _CalculateTotal();
    }
    _ChangeItemCount(document.getElementById("itemCount"));

    function Calculate($a) {
    var order_total, length, width, i;
    order_total = 0;

    length = parseFloat(document.forms[0]["length"+$a].value);
    width = parseFloat(document.forms[0]["width"+$a].value);

    if(length > 0 && width > 0) {
    order_total = length * width;
    for(i = 0; i < document.forms[0]["tooling"].length; i++) {
    if (document.forms[0]["tooling"][i].value === "withouttooling" && document.forms[0]["tooling"][i].checked === true) order_total = order_total * ".30";
    if (document.forms[0]["tooling"][i].value === "withtooling" && document.forms[0]["tooling"][i].checked === true) order_total = order_total * ".40";
    }
    order_total = order_total + 25;
    } else {
    order_total = 0;
    }


    document.forms[0]["totalcost"+$a].value = '$' + _N(order_total, 2);
    _CalculateTotal();
    }

    function _CalculateTotal() {
    var $grandTotal = 0;
    var $f = document.forms[0];
    for(var $i = 0; $i < $itemCount; $i++) {
    var $tmpTotal = parseFloat($f["totalcost"+($i+1)].value.replace(/[^0-9.]/g, ""));
    $grandTotal = (isNaN($tmpTotal)) ? ($grandTotal) + 0 : ($grandTotal) + $tmpTotal;
    }
    document.getElementById("grandTotal").innerHTML = _N($grandTotal, 2);
    }

  3. #33
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    What are you using to edit this page or upload your code? There are a bunch of <p> tags (opening and closing) inside of the javascript. This is causing an error (syntax), thus none of the javascript can run, so things like totaling and showing/hiding items won't work.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  4. #34
    Join Date
    Apr 2014
    Posts
    36
    Hi, strange I removed <P> references and doesn't work but might be how WP editor handles code?
    I did paste in regular html page -http://www.webcrawldesigns.com/dct/_ordertest.html

    and it looks like it works except is there any way to make it so when the page loads only item 1 width and height shows instead of all 3? (until selection is made)

  5. #35
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    The script will automatically hide the additional fields, however you are currently loading the script (calculatornew1.js) before the HTML of the form is loaded (thus it hits an error as the <select> element doesn't exist yet.

    To be fair, in the name of standards the code should be able to adapt to such situations so there is one line that should be changed to fix this on the script's end. Change:
    Code:
    _ChangeItemCount(document.getElementById("itemCount"));
    To:
    Code:
    window.onload = function() {_ChangeItemCount(document.getElementById("itemCount")); }
    That should fix the issue of not hiding the extra items when the page loads. I feel I should also mention that it's generally a good idea to include javascript files at the end of your document. When a script file is loaded, unless the async property is set to true, the page will stop loading all other data until the script has finished loading. Thus scripts included in the <head> or above any content tend to be a bad idea logically, as it can slow down load times (while generally unnoticeable, it should still be avoided for the sake of standards).
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  6. #36
    Join Date
    Apr 2014
    Posts
    36
    Actually when I moved the script down on the page it did only show 1 when the page loaded thanks for that.
    OK hopefully my final question (I do appreciate your help)
    I have the calculation working thanks to you and when I add the drop down code to the page with working calculations page I cannot get both to work.

    WORKING CALCULATION CODE

    http://www.webcrawldesigns.com/dct/w...lculatornew.js


    WORKING DROP DOWN CODE
    http://www.webcrawldesigns.com/dct/w...culatornew1.js


    but can't get both functions to work on the same page...
    http://www.webcrawldesigns.com/dct/order-form/

  7. #37
    Join Date
    Apr 2014
    Posts
    36
    Would there be a reason I couldnt' run both scripts on 1 page? Or is the problem with the grand total (because on both?)

  8. #38
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    On your 'combined' page (http://www.webcrawldesigns.com/dct/order-form/) I'm still seeing <p> tags inside of the javascript. I assume this is why the script doesn't appear to be working on that page. Try removing those tags from the script and see if that fixes the issue.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  9. #39
    Join Date
    Apr 2014
    Posts
    36
    I have a working page with select drop down and calculated totals - thanks
    Only thing that isn't working now is the remember js I plugged in (and was working before)

    http://www.webcrawldesigns.com/dct/order-form

    remember js script

    function _SaveFields($a) {
    if(localStorage !== null && localStorage !== undefined) {
    localStorage.setItem("company", $a["company"].value);
    localStorage.setItem("contact", $a["contact"].value);
    localStorage.setItem("address", $a["address"].value);
    localStorage.setItem("city", $a["city"].value);
    localStorage.setItem("state", $a["state"].value);
    localStorage.setItem("Zip", $a["Zip"].value);
    localStorage.setItem("phone", $a["phone"].value);
    localStorage.setItem("email", $a["email"].value);
    localStorage.setItem("shipping", $a["shipping"].value);
    localStorage.setItem("comments", $a["comments"].value);
    }
    }

    window.onload = function() {
    if(localStorage !== null && localStorage !== undefined) {
    document.forms[1]["company"].value = (localStorage.getItem("company") !== null && localStorage.getItem("company") !== undefined) ? localStorage.getItem("company") : "";
    document.forms[1]["contact"].value = (localStorage.getItem("contact") !== null && localStorage.getItem("contact") !== undefined) ? localStorage.getItem("contact") : "";
    document.forms[1]["address"].value = (localStorage.getItem("address") !== null && localStorage.getItem("address") !== undefined) ? localStorage.getItem("address") : "";
    document.forms[1]["city"].value = (localStorage.getItem("city") !== null && localStorage.getItem("city") !== undefined) ? localStorage.getItem("city") : "";
    document.forms[1]["state"].value = (localStorage.getItem("state") !== null && localStorage.getItem("state") !== undefined) ? localStorage.getItem("state") : "";
    document.forms[1]["Zip"].value = (localStorage.getItem("Zip") !== null && localStorage.getItem("Zip") !== undefined) ? localStorage.getItem("Zip") : "";
    document.forms[1]["phone"].value = (localStorage.getItem("phone") !== null && localStorage.getItem("phone") !== undefined) ? localStorage.getItem("phone") : "";
    document.forms[1]["email"].value = (localStorage.getItem("email") !== null && localStorage.getItem("email") !== undefined) ? localStorage.getItem("email") : "";
    document.forms[1]["shipping"].value = (localStorage.getItem("shipping") !== null && localStorage.getItem("shipping") !== undefined) ? localStorage.getItem("shipping") : "";
    document.forms[1]["comments"].value = (localStorage.getItem("comments") !== null && localStorage.getItem("comments") !== undefined) ? localStorage.getItem("comments") : "";
    }
    }

  10. #40
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    The part of that script that runs to restore any saved values is referencing 'document.forms[1]' but currently there is only one form on the page now so that should be updated to 'document.forms[0]' and everything should be working then.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  11. #41
    Join Date
    Apr 2014
    Posts
    36
    Thanks that did it.. I notice that when I change the selection from tooling to notooling the total cost doesn't change.
    Can you take a quick look at this please www.webcrawldesigns.com/dct/order-form

    thanks

  12. #42
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Exclamation

    Quote Originally Posted by sherryr View Post
    Thanks that did it.. I notice that when I change the selection from tooling to notooling the total cost doesn't change.
    Can you take a quick look at this please www.webcrawldesigns.com/dct/order-form

    thanks
    Some might think you are starting to abuse the generosity of Sup3rkirby.

    You should at least look at the code provided and give a guess as to what should or would be changed to accomplish your requirements. Otherwise you will spend the rest of your career like Stella in "A Streetcar Named Desire" always relying on the "generosity of strangers".

  13. #43
    Join Date
    Apr 2014
    Posts
    36
    Actually it is not like that. I appreciate the help and I am learning as I go.

  14. #44
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    "Stellaaaaaaaaaaa!"

    Perhaps you have since fixed the issue, but I'm not noticing that problem on the page. Switching between the two tooling options seems to change the price accordingly.

    I will note that generally your questions are easy enough to where I don't mind helping, but you should know there is no secret magic behind what I do. Generally when a script doesn't work I open the page where it should be running, press F12 and go to the 'Console' tab. If the script is truly broken I'll see an error that I can link back to a specific line in the script. If there are no errors I know it's more of a logical flaw in the script.

    It's an invaluable tool built into modern browsers that can likely help you solve most of the problems you may encounter. For instance, you'll be able to pick up on a number of other errors that are occurring on the page, such as your remember.js file trying to set the value of your 'shipping' field which does not exist.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles