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 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts

    Smile Online Order form?

    I have been playing with two options but just dont seem to get the coding right. Can someone please assist. Using ie9 but same problem with all browsers.

    first snippets.
    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("_") + 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;
    }
    Second code:
    Code:
    <!-- 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
    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
        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();;
    }
    Please help its probably something simple.
    Last edited by hans_cellc; 10-04-2011 at 01:31 PM. Reason: Inserted code tags.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Tell us what the problem is - don't leave it to us to guess.

    BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.


    Quizmaster: The TV show "The Merits of Ferrets" stars which kind of animal?
    Contestant: I don't know.
    Quizmaster: There's a clue, if you know where to look.
    Contestant: I'm sorry, no.
    Quizmaster (laughing): The answer is ferrets.
    Contestant: Well, how was I supposed to know that?

    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.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts
    Sorry man, It gives NaN(not a number) with the first and with the second it just does nothing.

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts
    Thanks I have inserted the code tags as well.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,933
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    *what* gives NaN?

    And this makes no sense:
    Code:
    <select style="margin-left: 60px" name="shirt" value="215" onchange="calculateValue(this.form)" />
    You can't give a value= to a <select> element. Even if you could, that value will change as soon as the user makes a selection in the <select>.

    Your system is badly flawed if you are depending on finding the "215" when the form is submitted! It will *NOT* be there!

    The basic problem with the code in the second snippet is that it runs through *ALL* the form fields. *ALL* of them. INCLUDING THE TOTAL FIELD! Including any other fields that are *NOT* product <select> fields.

    And yet, for EVERY field, you do itemQuantity = formField.selectedIndex; and so the first NON-<select> field you get an error. KABLOOEY! the script stops at that point.

    Time to do some rethinking about what you need to accomplish?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts
    Thanks a mil, let me re look at this I need to uniquely identify the fields I want to run through therefore the error. I am going to give it a bash now. I know snippets can be confusing so attached is the whole code for the HTML, js and CSS. this will give you an indication of what I am trying.

    I am brand new to this but am extremely intrigued.
    Last edited by hans_cellc; 10-03-2011 at 09:51 PM.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,933
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    One way to solve this is to give a class= to the fields that you want to process.

    And the name of the class can tell your JS code *how* to process. (Other than that, the class can be a dummy...its only purpose is to aid the JS code.) In JS, you use something like if ( element.className == "xxxx" ) ....


    So, for example, if you have a quantity to process, use
    Code:
    <select class="quantity" ...>
    If you have a price, use class="price", etc.

    Then, in addition, you can look at the type of the form field (tagName and/or type) to determine if you have a <select> or an <input> or what.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    hans_cellc (10-03-2011)

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    92
    Thanks
    38
    Thanked 0 Times in 0 Posts
    Could it of been so simple, thanks a mil. Changed the code to:

    Code:
    <!-- Row 3, Col 3 purchase boxes -->
    <td colspan="1" height="120" align="left">
    <input style="margin-left: 60px" type="text" name="prod_bed_359" size="3" maxlength="3" onchange="calculateValue(this.form)" /> R359</td></tr>
    and java to:


    Code:
    // Function to calculate order value 
    function calculateValue(orders) {
    	var orderValue = 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;
    	
    	// Is it a "product" field?
            if (formName.substring(0,4) == "prod") {
     
    	// Items price extracted from name
    	itemPrice = parseFloat(formName.substring(formName.lastIndexOf("_") + 1));
     
    	// Get the Quantity
    	itemQuantity = parseInt(formField.value);
     
    	// Update the OrderValue
    	if(itemQuantity >= 0) {
    	orderValue += itemQuantity * itemPrice;
    	}
    	}
    	}
    	// Display the total
        orders.total.value = orderValue.toLocaleString();;
    }
    It now works perfectly.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,933
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    Sure...that works as well.

    I thought you were trying to mix <select>s and <input>s and prices and quantities, etc. But if your names include the (hidden) prices, that works great.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    hans_cellc (10-04-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
    •