javascript multiply help needed

nathgregory · 09-11-2011, 07:01 PM

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

DaveyErwin · 09-11-2011, 07:35 PM

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.

nathgregory · 09-11-2011, 07:35 PM

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>

DaveyErwin · 09-11-2011, 07:42 PM

Quote:

Originally Posted by nathgregory

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

nathgregory · 09-11-2011, 07:44 PM

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

nathgregory · 09-11-2011, 07:56 PM

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.

DaveyErwin · 09-11-2011, 08:09 PM

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>

nathgregory · 09-11-2011, 08:19 PM

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.

DaveyErwin · 09-11-2011, 10:23 PM

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.

nathgregory · 09-12-2011, 12:29 PM

Thanks pal. I've got it working now, with a slightly different approach.