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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Inserting variables into document.form.name.value

    So I've got an order form that uses javascript to immediately calculate the price as soon as you enter the quantity that you want to order:

    Code:
    <form method="post" action="submitted.html" name="form">
      <table id="order-table">
        <tr>
            <td>Widgets</td>
            <td><input type="text" name="quantityWidgets" onchange="calculate()"></input></td>
    	<td> x </td>
    	<td>$650</td>
    	<td>=</td>
    	<td><input type="text" name="totalWidgets" disabled="disabled"></input></td>
        </tr>
      </table>
    </form>
    And here's the Javascript

    Code:
    function calculate(){
    	total = document.form.quantityWidgets.value * 650;
    	document.form.totalWidgets.value = total;
    }
    But that's just for 1 row and I have several rows of products. I could just use a different calculate() function for each row, but I'm trying to pass arguments into calculate() AND make it display the result in the proper place, but my syntax must be wrong.

    Code:
    ...
    <td><input type="text" name="quantityWidgets" onchange="calculate(quantityWidgets, 650, totalWidgets)"></input></td>
    ...
    function calculate(quantity, price, total){
    	total = document.form.quantity.value * price;
    	document.form.total.value = total;
    }
    Can anyone help me please?
    Last edited by mike20599; 01-03-2012 at 08:28 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,984
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I hate laying stuff out in tables, so this looks a little wonky, but I think the js is right at least:

    Code:
    <html>
    <head>
    <title></title>
    
    <script type="text/javascript">
    function calculate(quantity, price, total){
    	total.value = quantity*price;
    }
    </script>
    </head>
    <body>
    <form method="post" action="submitted.html" name="form">
      <table id="order-table">
        <tr>
            <td>Widgets</td>
            <td><input type="text" name="quantityWidgets" onchange="calculate(this.value, 650,form.totalWidgets)"></input></td>
    	<td> x </td>
    	<td>$650</td>
    	<td>=</td>
    	<td><input type="text" name="totalWidgets" disabled="disabled"></input></td>
            <td>Grommets</td>
            <td><input type="text" name="quantityGrommets" onchange="calculate(this.value, 400,form.totalGrommets)"></input></td>
    	<td> x </td>
    	<td>$400</td>
    	<td>=</td>
    	<td><input type="text" name="totalGrommets" disabled="disabled"></input></td>
        </tr>
      </table>
    </form>
    </body>
    </html>
    I would suggest changing your "onchange" to "onkeyup" so that the user doesn't have to do anything, but that's up to you...

  • Users who have thanked xelawho for this post:

    mike20599 (01-03-2012)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    Are all your fields paired? That is, you have "quantityZambonis" and "totalZambonis" to go along with the Widgets?

    Or are all your quantity and total fields named the same?

    If they are all named differently, it's not hard:

    Code:
    <form method="post" action="submitted.html" name="form">
      <table id="order-table">
        <tr>
            <td>Widgets</td>
            <td>
                <input type="text" name="quantityWidgets" onchange="calculate(this)" />
                <input type="hidden" name="priceWidgets" value="650.0" />
            </td>
    	<td> x </td>
    	<td>$650</td>
    	<td>=</td>
    	<td><input type="text" name="totalWidgets" disabled="disabled"/></td>
        </tr>
        <tr>
            <td>Zambonis</td>
            <td>
                <input type="text" name="quantityZambonis" onchange="calculate(this)" />
                <input type="hidden" name="priceZambonis" value="85295.0" />
            </td>
    	<td> x </td>
    	<td>$85,295</td>
    	<td>=</td>
    	<td><input type="text" name="totalZambonis" disabled="disabled"/></td>
        </tr>
      </table>
    </form>
    Then:
    Code:
    function calculate(what)
    {
        var form = what.form;
        var product = what.name.replace("quantity","");
        var total = form[ "price" + product ].value * what.value;
        form[ "total" + product ].value = total.toFixed(2);
    }
    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:

    mike20599 (01-03-2012)

  • #4
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks, that worked perfectly!


  •  

    Posting Permissions

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