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
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts

    Calculating Form totals

    Can someone please assist. I am trying to create a order form that auto calculates my totals as I enter the quantities. It comes up with Not a Number(NaN).

    Below are snippets from my code this is obviously in a <form>:

    HTML:
    Code:
    <!-- Row 3, Col 3 purchase boxes -->
    <td colspan="1" height="120" align="left">
    <input style="margin-left: 60px" type="text" name="bed_359" size="3" maxlength="3" onchange="calculateValue(this.form)" /> R359</td></tr>
    
    <!-- Row 10, Col 2 Order Value Box-->
    <td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="total" size="10" 
    onfocus="this.form.elements[0].focus()" />
    </td></tr>
    javaScript:
    Code:
    // Function to calculate order value	
    function calculateValue(orders) {
    	var orderValue = 0;
    	var value = 0;
    	var itemPrice = 0;
    	var itemQuantity = 0;
    	
    	// Run through all the product fields
    	for(var i = 0; i < orders.elements.length; ++i) {
    	
    	// Get the current field
    	formField = orders.elements[i];
    	
    	// Get the fields name
    	formName = formField.name;
    	
    	// Items price extracted from name
    	itemPrice = parseFloat(formName.substring(formName.lastIndexOf("0") + 1));
    	
    	// Get the Quantity
    	itemQuantity = parseInt(formField.value);
    	
    	// Update the OrderValue
    	if(itemQuantity >= 0) {
    	value = itemQuantity * itemPrice;
    	orderValue += value;
    	}
    	}
    	
    	// Display the total
        orders.total.value = orderValue;
    }
    Please help its probably something simple.
    Last edited by hans_cellc; 10-03-2011 at 03:59 PM. Reason: Tags

  • #2
    New Coder
    Join Date
    Jan 2010
    Posts
    29
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Hello there,

    Just wanted to follow up with a few short questions. What browser are you running this on? Also, have you tried logging or printing the variables within the function to determine where you're getting a NaN?

    Both Chrome and Firefox have great developer tools which may help you determine where there's an issue. I'm going to test this out myself.

    Thanks,
    Anthony

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    29
    Thanks
    0
    Thanked 2 Times in 2 Posts
    This line here is the issue:

    PHP Code:
    itemPrice parseFloat(formName.substring(formName.lastIndexOf("0") + 
    formName.lastIndexOf("0"); There is no "0" in bed_359. Not sure what you're meaning to do here but if perhaps 359 is the price you'd want to search for "_" instead maybe?

    PHP Code:
    itemPrice parseFloat(formName.substring(formName.lastIndexOf("_") + 

    The other change is that you're running this calc on the "total" form element as well so you're going to get every other call working. (Since the total is initially blank). There are many different ways to fix this I'd suggest calling the function more particularly on ONE form element perhaps and linking the next form element accordingly.

    Let me know if you need more help.

    Thanks,
    Anthony

  • Users who have thanked fatecaresx13 for this post:

    hans_cellc (10-05-2011)

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    See:- *** WARNING: Questions posted here will be deleted! ***.

    You will not get any reply in this forum which is intended to be used only to
    post a completed (working) script for showcasing/benefit of others.

    Before you post again please read the forum rules and posting guidelines.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts
    hi changed it still no avail I incorrectly posted.
    Working on ie9 but same problem on all browsers.

    Also tried:
    <!-- Row 9, Col 3 purchase boxes -->
    <td colspan="1" height="120" align="left">
    <select style="margin-left: 60px" name="shirt" value="215" onchange="calculateValue(this.form)" />
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option></select> R215</td></tr>

    Java'
    // Function to calculate order value
    function calculateValue(orders) {
    var orderValue = 0;
    var value = 0;
    var itemPrice = 0;
    var itemQuantity = 0;

    // Run through all the product fields
    for(var i = 0; i < orders.elements.length; ++i) {

    // Get the current field
    formField = orders.elements[i];

    // Get the fields name
    formValue = formField;

    // Items price extracted from name
    itemPrice = formField;

    // Get the Quantity
    itemQuantity = formField.selectedIndex;

    // Update the OrderValue
    if(itemQuantity > 0) {
    orderValue += itemQuantity * itemPrice
    }
    }

    // Display the total
    orders.total.value = orderValue.toLocaleString();;
    }

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by fatecaresx13 View Post
    This line here is the issue:

    PHP Code:
    itemPrice parseFloat(formName.substring(formName.lastIndexOf("0") + 
    formName.lastIndexOf("0"); There is no "0" in bed_359. Not sure what you're meaning to do here but if perhaps 359 is the price you'd want to search for "_" instead maybe?

    PHP Code:
    itemPrice parseFloat(formName.substring(formName.lastIndexOf("_") + 

    The other change is that you're running this calc on the "total" form element as well so you're going to get every other call working. (Since the total is initially blank). There are many different ways to fix this I'd suggest calling the function more particularly on ONE form element perhaps and linking the next form element accordingly.

    Let me know if you need more help.

    Thanks,
    Anthony
    Hi Thanks, Just to make sure this is the line of code you are talking about that needs to be called more specific. And How?

    Code:
    <input name="total" type="text" style="margin-left: 60px" onfocus="this.form.elements[0].focus()" size="10" />
    Last edited by hans_cellc; 10-05-2011 at 08:11 AM.

  • #7
    New Coder
    Join Date
    Jan 2010
    Posts
    29
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by hans_cellc View Post
    Hi Thanks, Just to make sure this is the line of code you are talking about that needs to be called more specific. And How?

    Code:
    <input name="total" type="text" style="margin-left: 60px" onfocus="this.form.elements[0].focus()" size="10" />
    I would say have adjacent fields organized like so:

    id=x id=x_answer

    and when x is called only update x_answer. Something like that. As I said there are many solutions but you don't want to just call the same function when any element is updated because you will inevitably have fields you don't want these calculations on.

  • Users who have thanked fatecaresx13 for this post:

    hans_cellc (10-05-2011)

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    103
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Hi,

    Try to validate value of quantity this happens when there is junk character used in calculation. Put default value as 0 and put required expression validator

  • Users who have thanked jassi.singh for this post:

    hans_cellc (10-05-2011)


  •  

    Posting Permissions

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