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 10 of 10
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    javascript multiply help needed

    Hi,
    At www.happydaysremovals.com.estimatenew.html. Users fill in a form which has items of furniture, so they enter a number next to each item of furniture. The HTML uses text fields.
    When the form is submitted, the form is submitted to a php script that emails the results to myself.
    I am trying to also have a javascript function which runs before the php script runs. This javascript works out the cubic footage of all the items. If a user put "3" in the sofa text field, and I have defined that a sofa is 45 cubic feet, then the javascript will multiply 3 * 45. It will do a similar thing for all items of furniture, then add them all up to give a total cubic feet. I want that total field to then sent as a variable to the php script, along with all the other variables.
    My code so far (which doesnt work)
    Code:
    <script language="JavaScript"> 
       function calculate()
    {
    
    var sofa_3_seater = document.getElementById('sofa_3_seater').value*45;
    var sofa_2_seater = document.getElementByID('sofa_2_seater').value*30;
    var armchair_large = document.getElementByID('armchair_large').value*15;
    
    var total=sofa_3_seater+sofa_2_seater+armchair_large;
    
    document.getElementByID('total').value = total;
    
    }
    </script>
    I have used a hidden field for the total value:

    Code:
    <input type="hidden" name="total" value="">
    I want the javascript result to change the value of the hidden field that is called total.
    THen I want it all to be posted to the PHP script and email everything to me, including this newly calculated total field!

    THanks

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Lots of problems with your code.
    Here is something to think about.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="daveyerwin">
    <title>Untitled</title>
    <script type="text/javascript">
    
       function calculate()
    {
    
    var sofa_3_seater = document.frm.sofa_3_seater.value*45;
    var sofa_2_seater = document.frm.sofa_2_seater.value*30;
    var armchair_large = document.frm.armchair_large.value*15;
    
    var total=sofa_3_seater+sofa_2_seater+armchair_large;
    
    document.getElementById('hidVal').value = total;
    
    }
    </script>
    
    <style type="text/css">
    </style>
    <body>
    <div id="content">
    <form name="frm" action="">
    <input type="text" name="sofa_3_seater">
    <label for=""sofa_3_seater"">sofa_3_seater</label><br>
    <input type="text" name="sofa_2_seater">
    <label for="sofa_2_seater">sofa_2_seater</label><br>
    <input type="text" name="armchair_large">
    <label for="armchair_large">armchair_large</label><br>
    <input type="hidden" name="total" id="hidVal" value="">
    <input type="button" value="calculate" onclick="calculate()">
    <input type="button" value="getHiddenValue" onclick="alert(document.getElementById('hidVal').value)">
    
    </form>
    </div>
    <body>
    Compare this to your code and
    ask more questions.

  • #3
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Really struggling. I have just added id's to the input fields, as well as the names, but still not working.
    Can someone tell me if the following code would work?
    Code:
    <script language="JavaScript"> 
       function calculate()
    {
    
    var sofa_3_seater = document.getElementById('sofa_3_seater').value*45;
    var sofa_2_seater = document.getElementByID('sofa_2_seater').value*30;
    var armchair_large = document.getElementByID('armchair_large').value*15;
    
    var result=sofa_3_seater+sofa_2_seater+armchair_large;
    
    document.getElementByID('total').value=result;
    return true
    }
    </script>
    The form code is
    Code:
    <form name="main" action="http://www.happydaysremovals.com/phpmailer-fenew.php" onsubmit="javascript:calculate();" method="post">
    The hidden field which needs its value changing from the script is
    Code:
    <input type="hidden" name="total" id="total" value="">
    My input fields are:
    Code:
    <tr class="tr1">
    <td>3 Seater Sofa</td>
    <td><input type="text" name="sofa_3_seater" id="sofa_3_seater" size="3" tabindex="24"></td>
    <td>2 Seater Sofa</td>
    <td><input type="text" name="sofa_2_seater" id="sofa_2_seater" size="3" tabindex="25"></td>
    </tr>
    <tr>
    <td>Large Armchair</td>
    <td><input type="text" name="armchair_large" id ="armchair_large" size="3" tabindex="26"></td>
    <td>Small Armchair</td>

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by nathgregory View Post
    Really struggling. I have just added id's to the input fields, as well as the names, but still not working.
    Can someone tell me if the following code would work?
    Just way too many problems to mention them all but,
    getElementById not getElementByID

    ids of elements must be uniuqe
    not the same as name

    many other problems

  • #5
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok. I posted that second reply before I saw your reply, so I'm still having a look at what you put to see if I can figure it out! Thanks

  • #6
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok I'm still stuck. I am new to all this. As the form stands, all it does is email the values of the fields to myself. I then thought it would be good to have some calculations done automatically. So, as well as emailing me the information, it could also calculate the cubic footage. Any idea the best approach for this then, if my approach was wrong?
    I want to define a separate value for each item, say sofa_3_seater is defined as being 45 cubic metres. If the customer enters 2 into the sofa_3_seater field, it means they are enquiring about 2 sofas, but in the background I want it to calculate 2*45=90 cubic metres. This would happen for every item on the form, and then all the results are added up, to given a total cubic meterage. Totally stuck, because I want this calculation to happen before the form is subgmitted, which is via php script.
    Thanks

    I dont want the customer to see the cubic footage results, I want that emailed to me in the php script. So I was trying to put the calculated result from the script as a value in a hidden field, that when the form was submitted, would be passed to the php script, for inclusion in my email.
    Last edited by nathgregory; 09-11-2011 at 08:03 PM.

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="daveyerwin">
    <title>Untitled</title>
    <script type="text/javascript">
    
       function calculate()
    {
    
    var sofa_3_seater = document.frm.sofa_3_seater.value*45;
    var sofa_2_seater = document.frm.sofa_2_seater.value*30;
    var armchair_large = document.frm.armchair_large.value*15;
    
    var total=sofa_3_seater+sofa_2_seater+armchair_large;
    
    document.getElementById('hidVal').value = total;
    
    }
    </script>
    
    <style type="text/css">
    </style>
    <body>
    <div id="content">
    <form name="frm" action="" onsubmit="calculate();return true;">
    <input type="text" name="sofa_3_seater">
    <label for=""sofa_3_seater"">sofa_3_seater</label><br>
    <input type="text" name="sofa_2_seater">
    <label for="sofa_2_seater">sofa_2_seater</label><br>
    <input type="text" name="armchair_large">
    <label for="armchair_large">armchair_large</label><br>
    <input type="hidden" name="total" id="hidVal" value="">
    </body>
    </html>
    Last edited by DaveyErwin; 09-11-2011 at 08:55 PM.

  • #8
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I've changed my code to as yours is. The form submits ok, but the new field, hiddentotal doesnt show on my html email. You can see the full source code at www.happydaysremovals.com/estimatenew.html

    I do appreciate any help.

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <?php echo $_GET["total"]; ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="daveyerwin">
    <title>Untitled</title>
    <script type="text/javascript">
    
       function calculate()
    {
    
    var sofa3seater = document.frm.sofa_3_seater.value*45;
    var sofa2seater = document.frm.sofa_2_seater.value*30;
    var armchairlarge = document.frm.armchair_large.value*15;
    
    var total=sofa3seater+sofa2seater+armchairlarge;
    
    document.getElementById('hidVal').value = total;
    
    }
    </script>
    
    <style type="text/css">
    </style>
    <body>
    <div id="content">
    <form name="frm" action="" onsubmit="calculate();return true;"><p>
    <input type="text" id="sofa3" name="sofa_3_seater">
    <label for="sofa3">sofa_3_seater</label><br>
    <input type="text" id="sofa2" name="sofa_2_seater">
    <label for="sofa2">sofa_2_seater</label><br>
    <input type="text" id="armchair" name="armchair_large">
    <label for="armchair">armchair_large</label><br>
    <input type="hidden" name="total" id="hidVal" value="">
    <input type="submit"></P>
    </form>
    </div>
    </body>
    </html>
    This works on my box .
    Maybe you have a php problem ?
    Try posting you php in the php forun.
    Last edited by DaveyErwin; 09-12-2011 at 12:07 PM.

  • Users who have thanked DaveyErwin for this post:

    nathgregory (09-12-2011)

  • #10
    New Coder
    Join Date
    Sep 2011
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks pal. I've got it working now, with a slightly different approach.


  •  

    Posting Permissions

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