Best way to calculate form fields???

Discussion in 'Scripts' started by davncong, Sep 4, 2008.

to remove all ads.
  1. davncong

    davncong New Member

    Messages:
    6
    I have a simple form that is used to submit catalog orders. The user enters an item #, description, quantity & price from a catalog. The item # and description are not relevant here, but I want to multiply the quantity by the price to give an item (row) total, then sub-total the item totals (column), calculate sales tax (8%), add $5 shipping charge and give a grand total. I figured it would be easier with a static table then a dynamic table, so I created one with 10 rows (should be sufficient 99% of the time).

    I tried using JavaScript but could only find examples where the price was set (usually used a checkbox or dropdown quantity box then multiplied that by a set price), but I haven't been able to get it to work using a textbox for the price. I currently am using a text box for the quantity, but I could change that to a dropdown value if that makes it easier.

    I don't do this professionally, I am just creating a site for my wife to accept catalog orders online. I don't have a lot of programming knowledge, but I created a CSS site and have been learning a few programming languages.

    To make a short story long, what would be the best language to accomplish this? I'd prefer to have the form autosum, but I haven't ruled out a calculate button yet.
     
  2. jnjc

    jnjc New Member

    Messages:
    493
    I think you would be best to us Javascript for this, can you post the page as it is now and we can have a look at how far you've gotten (from what you are describing you seem pretty close).
     
  3. joe

    joe New Member

    Messages:
    82
    write a function in javascipt that when called takes the value from both forms, multiplies them and returns the answer. something to the effect of: var a = document.form1.field1.value var b = document.form1.field2.value c = a*b return c
    (where form1 is the name of your form and field1 & field2 are the names of your input boxes) I'm not the best at writing correct javascript on the fly, but this should give you an idea of what you'll need to do. You can set it to an event such as onchange or onsubmit to trigger the function if you'd like.
     
  4. davncong

    davncong New Member

    Messages:
    6
    As for the script, I've never written a script completely from scratch, so I've tried to modify other scripts available. Most involve set prices though, such as

    Code:
    <form id="frmOrder">
    <p>
    <input type="checkbox" id="chk0" />
    Wonder Widget
    $<span id="txtPrice0">10</span>
    <select id="sel0">
    	<option value="val0">0</option>
    	<option value="val1">1</option>
    	<option value="val2">2</option>
    	<option value="val3">3</option>
    </select>
    </p>
    <p>
    <input type="checkbox" id="chk1" />
    Snow Widget
    $<span id="txtPrice1">20</span>
    <select id="sel1">
    	<option value="val0">0</option>
    	<option value="val1">1</option>
    	<option value="val2">2</option>
    </select>
    </p>
    <p>
    <input type="text" id="txtTotal" size="8" />
    </p>
    </form>
    or very simple autosum functions such as

    Code:
    function startCalc(){
      interval = setInterval("calc()",1);
    }
    function calc(){
      one = document.autoSumForm.firstBox.value;
      two = document.autoSumForm.secondBox.value; 
      document.autoSumForm.thirdBox.value = (one * 1) + (two * 1);
    }
    function stopCalc(){
      clearInterval(interval);
    }
    that I tried to modify to what I needed (with only limited success). I'll try the
    Code:
     var a = document.form1.field1.value var b = document.form1.field2.value c = a*b return c 
    and see if I can get that to work.


    Thanks foy your help.
     
    Last edited: Sep 30, 2008
  5. joe

    joe New Member

    Messages:
    82
    Very basic, but it works. You should be able to manipulate it to do what you need.


    Code:
    <html>
    <head>
    <script type="text/javascript">
    function totalprice()
    {
    a = document.form1.quantity.value
    b = document.form1.price.value
     
    c = a * b
     
    document.form1.total.value = c
    }
    </script>
     
     
    </head>
    <body>
    <form action="here.php" method="post" name="form1">
    Quantity: <input name="quantity" size="10">Price: <input name="price" size="10" onblur="totalprice();"><br>
    Total: <input name="total" size="10" readonly=true><br>
    <input type="submit" value="Submit">
    </form>
     
    </body>
    </html>
    
     
  6. davncong

    davncong New Member

    Messages:
    6
    Thanks Joe. I took what you gave me and modified it to this.

    Code:
     <script type="text/javascript">
    <!--
    
    function totalprice10()
    {
    // Item 1
    a = document.form1.quantity1.value
    b = document.form1.price1.value
     
    c = a * b
     
    document.form1.total1.value = c.toFixed(2)
    
    // Item 2
    d = document.form1.quantity2.value
    e = document.form1.price2.value
     
    f = d * e
     
    document.form1.total2.value = f.toFixed(2)
    
    // Item 3
    g = document.form1.quantity3.value
    h = document.form1.price3.value
     
    i = g * h
     
    document.form1.total3.value = i.toFixed(2)
    
    // Item 4
    j = document.form1.quantity4.value
    k = document.form1.price4.value
     
    l = j * k
     
    document.form1.total4.value = l.toFixed(2)
    
    // Item 5
    m = document.form1.quantity5.value
    n = document.form1.price5.value
     
    o = m * n
     
    document.form1.total5.value = o.toFixed(2)
    
    // Item 6
    p = document.form1.quantity6.value
    q = document.form1.price6.value
     
    r = p * q
     
    document.form1.total6.value = r.toFixed(2)
    
    // Item 7
    s = document.form1.quantity7.value
    t = document.form1.price7.value
     
    u = s * t
     
    document.form1.total7.value = u.toFixed(2)
    
    // Item 8
    v = document.form1.quantity8.value
    w = document.form1.price8.value
     
    x = v * w
     
    document.form1.total8.value = x.toFixed(2)
    
    // Item 9
    y = document.form1.quantity9.value
    z = document.form1.price9.value
     
    aa = y * z
     
    document.form1.total9.value = aa.toFixed(2)
    
    // Item 10
    bb = document.form1.quantity10.value
    cc = document.form1.price10.value
     
    dd = bb * cc
     
    document.form1.total10.value = dd.toFixed(2)
    
    // Sub-Total
    ee = document.form1.subtotal.value
    cc = document.form1.price10.value
     
    ee = c + f + i + l + o + r + u + x + aa + dd
     
    document.form1.subtotal.value = ee.toFixed(2)
    
    // Tax
    ff = ee * .08
     
    document.form1.tax.value = ff.toFixed(2)
    
    //Total
    gg = ee + ff
    
    document.form1.grandtotal.value = gg.toFixed(2)
    
    }
    //-->
    </script>
    You can see I used basic commands to sum the totals (since thats all I know :))

    I added the .toFixed(2) to the script, which seems to round the numbers properly, but I'm not sure if that was the best way to do it. The other methods all seemed to involve lengthy scripts and I could never get them to run properly.

    Anyone know if there are problems using .toFixed() method? Fortunetly for me, the data is not being sent to a server. The results are just being emailed for an order to be submitted, so slight errors with the calculations won't cause failures.

    David
     
  7. abwebdesign

    abwebdesign New Member

    Messages:
    48
    Use AJAX! Way better!
     
  8. joe

    joe New Member

    Messages:
    82
    Looks good. Don't worry about the tofixed(). If it works then don't worry about it.


    ab.....don't use something that's not needed. He didn't need ajax for this.
     
  9. abwebdesign

    abwebdesign New Member

    Messages:
    48

    joe.....it may not be needed in this instance, but AJAX could certainly make it much better.
     
  10. joe

    joe New Member

    Messages:
    82
    care to explain?
     
  11. chrism

    chrism New Member

    Messages:
    1
    what a great script, endless potential, thank you!

    i've been looking at this script and trying to incorporate in into a simple internal purchase order request, with some success, mainly not.

    quesitons i have are:

    1)How can i make the delivery field default to 0.00 but if the user knows the delivery cost they can enter it.

    2) VAT (UK tax) is calculated when all the subtotals are added together, so vat on delivery maybe nothing if it was kept at 0.00 or on the sum added im guessing i just need to tweak the totals area of the script to work it out this way?

    3) Some users have the habit of pressing enter which if they have part completed the form sends the form, can this be disabled?

    thanks in advance of any replies.
     
  12. davncong

    davncong New Member

    Messages:
    6
    This script calculates shipping as a % of the sub-total. You can remove that from the script and add value="0" to the shipping formfield to set the default to 0. The user will still be able to change the shipping value, if needed.

    Our shipping is not taxed, so the shipping field is not included it the tax calculation. Make sure you change the script to add that field or your tax will not be calculated correctly.

    That should take care of

    As for
    I'm not sure how to do #3 yet, but that would probably be a good safeguard to add.
     
  13. dellvostro

    dellvostro New Member

    Messages:
    1
    mod this form to remove quantity

    Im looking for a form to calculate 20 rows of data. There will be no quantity, I just need to be able to fill in listed prices, have it total. The visitor can remove prices from fields and i need to have the total reflect this deduction.
    Basically just 2 rows of data. desciption and cost. at bottom a totals and send button. The form info would need to be submitted to an email address.

    Can anyone help with this? I think the attached code from an earlier post would be best, but need it slightly modified to fit my needs. Thanks for any help.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function totalprice()
    {
    a = document.form1.quantity.value
    b = document.form1.price.value
     
    c = a * b
     
    document.form1.total.value = c
    }
    </script>
     
     
    </head>
    <body>
    <form action="here.php" method="post" name="form1">
    Quantity: <input name="quantity" size="10">Price: <input name="price" size="10" onblur="totalprice();"><br>
    Total: <input name="total" size="10" readonly=true><br>
    <input type="submit" value="Submit">
    </form>
     
    </body>
    </html>
    
     

Share This Page