JavaScript Forum

**talytech** · 04-28-2012, 02:05 PM

I have a html form set up with a table that includes 3 columns: [label],[full qty],[half qty] and a field to caluculate the total called [total]

I want the [total] field to display the total based upon what the user puts in the text boxes.

The [full qty] should be multiplied by $24.00 and the [half qty] should be multiplied by $12.00.

When I run the html page and plug some numbers in, the total field doesn't calculate. In fact, it doesn't do anything. I'm not sure what I'm doing wrong.

Here's my code:

Code:

<html>

<head>
<script> 
function calculate(){ 
if(isNaN(document.orderfrm.full_qty[].value) || document.orderfrm.full_qty[].value==""){ 
var text1 = 0; 
}else{ 
var text1 = parseInt(document.orderfrm.full_qty[].value); 
} 
if(isNaN(document.orderfrm.half_qty[].value) || document.orderfrm.half_qty[].value==""){ 
var text2 = 0; 
}else{ 
var text2 = parseFloat(document.orderfrm.half_qty[].value); 
} 
document.orderfrm.total.value = (text1*24)+(text2*12); 
} 
</script> 
</head>
<form name="orderfrm" action="orderfrm.php" method="POST">
<table border="0" width="320">
<tr>
<th align="left">Flavor</th>
<th align="left">Total Full</th>
<th align="left">Total Half</th>
</tr>
<tr>
<td width="90%">Chocolate City</td>
<td width="5%"><input type="text" name="full_qty[]" onblur="calculate()" size="5" /></td>
<td width="5%"><input type="text" name="half_qty[]" onblur="calculate()" size="5" /></td>
</tr>
<tr>
<td width="50%">Cookies & Cream</td>
<td width="15%"><input type="text" name="full_qty[]" onblur="calculate()" size="5" /></td>
<td width="15%"><input type="text" name="half_qty[]" onblur="calculate()" size="5" /></td>
</tr>
<tr>
<td width="50%">Ebony & Ivory</td>
<td width="15%"><input type="text" name="full_qty[]" onblur="calculate()" size="5" /></td>
<td width="15%"><input type="text" name="half_qty[]" onblur="calculate()" size="5" /></td>
</tr>
<tr>
<td width="50%">Lemon Heads</td>
<td width="15%"><input type="text" name="full_qty[]" onblur="calculate()" size="5" /></td>
<td width="15%"><input type="text" name="half_qty[]" onblur="calculate()" size="5" /></td>
</tr>

</table>
<br><br>
Total: <input type="text" name="total" size = "10" />
</form>
</html>

**chrishirst** · 04-28-2012, 02:17 PM

Well with FOUR inputs all with the same name which one does document.orderfrm.full_qty[].value refer to?

**talytech** · 04-28-2012, 06:39 PM

full_qty and half_qty are suppose to be arrays. this is what I don't understand. How to set up the arrays.

**chrishirst** · 04-28-2012, 07:27 PM

There is no such thing as arrays in HTML, and only PHP will treat name[] as an array element when the form is submitted.

You need to set the onblur event to pass the value and the product it is for to the javascript function.
You can create an object (which is an associated array) to hold the values before passing them to total value field.

**lizciz** · 04-28-2012, 08:26 PM

I had nothing better to do so I wrote this. It's not optimal if you plan to, i.e. dynamically generate more fields, but if you're only going to have those four it will probably suffice. Feel free to do what ever you want with it.

HTML Code:

<html>

<head>
<script> 
function calculate() {
    var fullSum = 0;
    var halfSum = 0;
    var total = document.getElementById("total");
    for (i = 1; i <= 4; i++) {
        var full = document.getElementById("full_" + i);
        var half = document.getElementById("half_" + i);
        if (full.value != "") {
            if (isPositiveNumber(full.value)) {
                fullSum += parseInt(full.value);
                full.style.background = "none";
            } else {
                full.style.background = "red";
            }
        }
        if (half.value != "") {
            if (isPositiveNumber(half.value)) {
                halfSum += parseInt(half.value);
                half.style.background = "none";
            } else {
                half.style.background = "red";
            }
        }
    }
    total.value = (fullSum * 24) + (halfSum * 12);
}
function isPositiveNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n) && parseFloat(n) >= 0;
}
</script> 
</head>
<form name="orderfrm" action="orderfrm.php" method="POST">
<table border="0" width="320">
<tr>
<th align="left">Flavor</th>
<th align="left">Total Full</th>
<th align="left">Total Half</th>
</tr>
<tr>
<td width="90%">Chocolate City</td>
<td width="5%"><input type="text" id="full_1" name="full_qty[]" onblur="calculate()" size="5" /></td>
<td width="5%"><input type="text" id="half_1" name="half_qty[]" onblur="calculate()" size="5" /></td>
</tr>
<tr>
<td width="50%">Cookies & Cream</td>
<td width="15%"><input type="text" id="full_2" name="full_qty[]" onblur="calculate()" size="5" /></td>
<td width="15%"><input type="text" id="half_2" name="half_qty[]" onblur="calculate()" size="5" /></td>
</tr>
<tr>
<td width="50%">Ebony & Ivory</td>
<td width="15%"><input type="text" id="full_3" name="full_qty[]" onblur="calculate()" size="5" /></td>
<td width="15%"><input type="text" id="half_3" name="half_qty[]" onblur="calculate()" size="5" /></td>
</tr>
<tr>
<td width="50%">Lemon Heads</td>
<td width="15%"><input type="text" id="full_4" name="full_qty[]" onblur="calculate()" size="5" /></td>
<td width="15%"><input type="text" id="half_4" name="half_qty[]" onblur="calculate()" size="5" /></td>
</tr>

</table>
<br><br>
Total: <input type="text" id="total" name="total" size = "10" />
</form>
</html>

**talytech** · 04-29-2012, 07:42 AM

Yes. Lizciz, this is exactly what I was looking for. But I will have at least 20 more cupcake choices that I will create. Couldn't I just alter the code part ...

Code:

for (i = 1; i <= 4; i++) {

What if i changed that 4 to 24?

**lizciz** · 04-29-2012, 09:02 AM

Yes, as long as every new item you add also has two inputs, with ID "full_5" and "half_5", "full_6" and "half_6" and so on, until "full_24" and "half_24".

**chrishirst** · 04-29-2012, 12:21 PM

Would it not be MUCH simpler to pass this.value and this.name as parameters to the function that way it does NOT natter how many you have.?

**lizciz** · 03:26 PM

Yes, probably

I don't know wheather or not this is what you meant chris, but this should be much easier to deal with.
You'll never have to edit anything in the JS function again, just make sure that all the text fields call the calculate function with three parameters; a name, "this" and the price for that item (see example below).

Code:

<script type="text/javascript">
var data = {};
var sum = 0;
var total = document.getElementById("total");

function calculate(name, elem, price) {
    var newVal = 0;
    if (elem.value != "") {
        if (isPositiveNumber(elem.value)) {
            newVal = parseInt(elem.value) * price;
            elem.style.background = "none";
        } else {
            elem.style.background = "red";
        }
    } else {
        elem.style.background = "none";
    }
    var diff = data[name] ? newVal - data[name] : newVal;
    data[name] = newVal;
    sum += diff;
    total.value = sum;
}
function isPositiveNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n) && parseFloat(n) >= 0;
}
</script>

Make all text fields like below. No ID needed anymore, just call calculate with a uniqe name.

HTML Code:

...
<tr>
    <td width="90%">Chocolate City</td>
    <td width="5%"><input type="text" name="full_qty[]" onblur="calculate('ChocCityFull', this, 24)" size="5" /></td>
    <td width="5%"><input type="text" name="half_qty[]" onblur="calculate('ChocCityHalf', this, 12)" size="5" /></td>
</tr>
<tr>
    <td width="50%">Cookies & Cream</td>
    <td width="15%"><input type="text" name="full_qty[]" onblur="calculate('C&C_full', this, 24)" size="5" /></td>
    <td width="15%"><input type="text" name="half_qty[]" onblur="calculate('C&C_half', this, 12)" size="5" /></td>
</tr>
...

EDIT: The total field needs to have the ID "total", though.

**chrishirst** · 04-29-2012, 03:53 PM

http://examples.webmaster-talk.eu/ja.../instant-calc/

HTML Code:

<form name="orderfrm" action="" method="POST">
<table border="0" width="320">
<tr>
<th align="left">Flavor</th>
<th align="left">Total Full</th>
<th align="left">Total Half</th>
</tr>
<tr>
<td width="90%">Chocolate City</td>
<td width="5%"><input type="text" rel="Chocolate City" name="chocF" onblur="calculate(this.value, 1.0)" size="5" /></td>
<td width="5%"><input type="text" rel="Chocolate City" name="chocH" onblur="calculate(this.value, 0.5)" size="5" /></td>
</tr>
<tr>
<td width="50%">Cookies & Cream</td>
<td width="15%"><input type="text" rel="Cookies & Cream" name="candcF" onblur="calculate(this.value, 1.0)" size="5" /></td>
<td width="15%"><input type="text" rel="Cookies & Cream" name="candcH" onblur="calculate(this.value, 0.5)" size="5" /></td>
</tr>
<tr>
<td width="50%">Ebony & Ivory</td>
<td width="15%"><input type="text" rel="Ebony & Ivory" name="ebandivF" onblur="calculate(this.value, 1.0)" size="5" /></td>
<td width="15%"><input type="text" rel="Ebony & Ivory" name="ebandivH" onblur="calculate(this.value, 0.5)" size="5" /></td>
</tr>
<tr>
<td width="50%">Lemon Heads</td>
<td width="15%"><input type="text" rel="Lemon Heads" name="lemonheadF" onblur="calculate(this.value, 1.0)" size="5" /></td>
<td width="15%"><input type="text" rel="Lemon Heads" name="lemonheadH" onblur="calculate(this.value, 0.5)" size="5" /></td>
</tr>

</table>
<br><br>
Total: <input type="text" name="total" id="total" size = "10" />
</form>

Code:

// javascript document

var UnitCost = 24;

// object constructor
CupCake = new Object();
CupCake.TotalCost = 0;
CupCake.Count = 0;


function calculate(p_QTY, p_mult) { 
  QTY = testNaN(parseInt(p_QTY))
  multipler = testNaN(parseFloat(p_mult));
  value = QTY * (UnitCost * p_mult);
  CupCake.TotalCost += value;
  CupCake.Count += QTY;
  document.getElementById('total').value = CupCake.TotalCost;
}
function testNaN (p_val) {
  if (isNaN(p_val)) {
    return 0;
  } else {
    return p_val;
 	}
}

The input names are only required for the server side data collection.

**chrishirst** · 04-29-2012, 03:58 PM

By the way, the rel attribute values were just something I was playing with js shopping cart style of thing and not really required

**talytech** · 07:10 PM

thanks Chrishirst. I like that method as well, but here's what i did with lizciz's code:

Javascript Code:

Code:

<script> 
function calculate() {
  var fullSum = 0;
    var halfSum = 0;
 var fullSumsp = 0;
 var halfSumsp = 0;
    var total = document.getElementById("total");
 
    for (i = 1; i <= 11; i++) {
        var full = document.getElementById("full_" + i);
        var half = document.getElementById("half_" + i);
 
        if (full.value != "") {
            if (isPositiveNumber(full.value)) {
                fullSum += parseInt(full.value);
                full.style.background = "none";
            } else {
                full.style.background = "red";
            }
        }
        if (half.value != "") {
            if (isPositiveNumber(half.value)) {
                halfSum += parseInt(half.value);
                half.style.background = "none";
            } else {
                half.style.background = "red";
            }
        }
    }
 
 
 for (i = 1; i <= 8; i++) {
        var fullsp = document.getElementById("fullsp_" + i);
        var halfsp = document.getElementById("halfsp_" + i);
 
        if (fullsp.value != "") {
            if (isPositiveNumber(fullsp.value)) {
                fullSumsp += parseInt(fullsp.value);
                fullsp.style.background = "none";
            } else {
                fullsp.style.background = "red";
            }
        }
        if (halfsp.value != "") {
            if (isPositiveNumber(halfsp.value)) {
                halfSumsp += parseInt(halfsp.value);
                halfsp.style.background = "none";
            } else {
                halfsp.style.background = "red";
            }
        }
    }
 
 
 
    total.value = (fullSum * 24) + (halfSum * 12) + (fullSumsp * 48) + (halfSumsp * 24);
}
function isPositiveNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n) && parseFloat(n) >= 0;
}
</script>

HTML Code:

Code:

  <div id="contactpart">
   <form name="orderfrm" action="orderfrm.php" method="POST">
   <fieldset>
   <legend>Contact Info</legend>
   <table width="200" border="0">
    <tr>
 
     <td width="60%"><br>Name:<br><input type="text" name="name" maxlength="155" size="30" /></td>     
    </tr>
    <tr>
 
     <td width="60%">Email:<br><input type="text" name="email" maxlength="255" size="30" /></td>     
    </tr>
    <tr>
 
     <td width="50%">Phone:<br><input type="text" name="phone" /></td>     
    </tr>
 
    <tr>
 
     <td>
     Date Needed:<br>
     <select id="daydropdown">
     </select> 
     <select id="monthdropdown">
     </select> 
     <select id="yeardropdown">
     </select> 
 
     <script type="text/javascript">
     //populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
     window.onload=function(){
     populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
     }
     </script>
     </td>
 
    </tr>
 
    <tr>
     <td width="50%"><br>Special requests:<br><textarea name="specialrequests" rows="7" cols="23"></textarea></td>
    </tr>
 
   </table>
   </fieldset>
  </div> 
   <div id="orderpart">
    <fieldset>
    <legend>Mainstream Selections<br>$24/Full dozen - $12/half dozen</legend>
    <br><br>
    <table border="0" width="320">
     <tr>
     <th align="left"><br>Flavor</th>
     <th align="left">Total Full</th>
     <th align="left">Total Half</th>
     </tr>
     <tr>
     <td width="90%">Chocolate City</td>
     <td width="5%"><input type="text" id="full_1" name="cupcake[]" onblur="calculate()" size="5" /></td>
     <td width="5%"><input type="text" id="half_1" name="cupcake[]" onblur="calculate()" size="5" /></td>
     </tr>
     <tr>
     <td width="50%">Cookies & Cream</td>
     <td width="15%"><input type="text" id="full_2" name="cupcake[]" onblur="calculate()" size="5" /></td>
     <td width="15%"><input type="text" id="half_2" name="cupcake[]" onblur="calculate()" size="5" /></td>
     </tr>
     <tr>
     <td width="50%">Ebony & Ivory</td>
     <td width="15%"><input type="text" id="full_3" name="cupcake[]" onblur="calculate()" size="5" /></td>
     <td width="15%"><input type="text" id="half_3" name="cupcake[]" onblur="calculate()" size="5" /></td>
     </tr>
     <tr>
     <td width="50%">Lemon Heads</td>
     <td width="15%"><input type="text" id="full_4" name="cupcake[]" onblur="calculate()" size="5" /></td>
     <td width="15%"><input type="text" id="half_4" name="cupcake[]" onblur="calculate()" size="5" /></td>
     </tr>
 
     <tr>
     <td width="50%">Orange Crush</td>
     <td width="15%"><input type="text" id="full_5" name="full_qty[]" onblur="calculate()" size="5" /></td>
     <td width="15%"><input type="text" id="half_5" name="half_qty[]" onblur="calculate()" size="5" /></td>
     </tr>
 
     <tr>
     <td width="50%">Piano Keys</td>
     <td width="15%"><input type="text" id="full_6" name="full_qty[]" onblur="calculate()" size="5" /></td>
     <td width="15%"><input type="text" id="half_6" name="half_qty[]" onblur="calculate()" size="5" /></td>
     </tr>
 
     <tr>
     <td width="50%">Pink Lemonade</td>
     <td width="15%"><input type="text" id="full_7" name="full_qty[]" onblur="calculate()" size="5" /></td>
     <td width="15%"><input type="text" id="half_7" name="half_qty[]" onblur="calculate()" size="5" /></td>
     </tr>
 
     <tr>
     <td width="50%">Red Velvet</td>
     <td width="15%"><input type="text" id="full_8" name="full_qty[]" onblur="calculate()" size="5" /></td>
     <td width="15%"><input type="text" id="half_8" name="half_qty[]" onblur="calculate()" size="5" /></td>
     </tr>
 
     <tr>
     <td width="50%">Reese's Cup</td>
     <td width="15%"><input type="text" id="full_9" name="full_qty[]" onblur="calculate()" size="5" /></td>
     <td width="15%"><input type="text" id="half_9" name="half_qty[]" onblur="calculate()" size="5" /></td>
     </tr>
 
     <tr>
     <td width="50%">Snow White</td>
     <td width="15%"><input type="text" id="full_10" name="full_qty[]" onblur="calculate()" size="5" /></td>
     <td width="15%"><input type="text" id="half_10" name="half_qty[]" onblur="calculate()" size="5" /></td>
     </tr>
 
     <tr>
     <td width="50%">Strawberry Shortcake</td>
     <td width="15%"><input type="text" id="full_11" name="full_qty[]" onblur="calculate()" size="5" /></td>
     <td width="15%"><input type="text" id="half_11" name="half_qty[]" onblur="calculate()" size="5" /></td>
     </tr>
 
    </table>
    </fieldset>
   </div>

**talytech** · 04-29-2012, 07:19 PM

Hey Chrishirst,

Now I'm having an issue with sending the data to my email using a php script. Can you assist me?

I know how to set up the contact information but I can't find a solution for the textboxes. I want the user to fill out the form and when they click on the "Place Order" button I want an email to be sent to my email address with the contact information and whichever cupcake selections they've made. I want the email message to be formatted like the following:

Name: John Doe
Email: someemail@testing.com
Phone:555-555-5555

Special instructions: If there are any.

Chocolate city: 1 full dozen
Chocolate city: 1 half dozen

Total: $36

Here's what I have so far, which I get stuck with the output string and the newline syntax.

Code:

<?php
if(!isset($_POST['submit']))
{
 //This page should not be accessed directly. Need to submit the form.
 echo "error; you need to submit the form!";
}
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$message = $_POST['specialrequests'];
$phone = $_POST['phone'];
//Validate first
if(empty($name)||empty($visitor_email)) 
{
    echo "Name and email are mandatory!";
    exit;
}
if(IsInjected($visitor_email))
{
    echo "Bad email value!";
    exit;
}
$email_from = 'info@myweb.com';//<== update the email address
$email_subject = "New Cupcake Order";
$email_body = "You have received a new order from:\n"
 "the user $name.\n".
    "Here is the message:\n $message".
    
$to = "info@myweb.com";//<== update the email address
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');

// Function to validate against any email injection attempts
function IsInjected($str)
{
  $injections = array('(\n+)',
              '(\r+)',
              '(\t+)',
              '(%0A+)',
              '(%0D+)',
              '(%08+)',
              '(%09+)'
              );
  $inject = join('|', $injections);
  $inject = "/$inject/i";
  if(preg_match($inject,$str))
    {
    return true;
  }
  else
    {
    return false;
  }
}
   
?>

**miki86** · 04-30-2012, 04:49 AM

Sending an email with php:

PHP Code:


			
//=======================  PHP SEND MAIL  *******************************

$to      = "myemail@example.com";

$subject = "email Subject";

                

$message = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />";

$message .= "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />";

$message .= "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />";

$message .= "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />";

                

$headers = 'From: noreplay@example.com' . "\r\n" . 'Reply-To: noreplay@example.com' . "\r\n" . 'MIME-Version: 1.0' . "\r\n" . 'Content-type: text/html; charset=UTF-8';

                

$mailStat = mail($to, $subject, $message, $headers); // returns true on success or false if fails

If you are sending html mail (Content-type: text/html) then you can use html tags like "<br />" for new line.
If you are sending regular email use:
\n new line
\r carriage return
\t horizontal tab

**chrishirst** · 05:40 PM

Quote:

I know how to set up the contact information but I can't find a solution for the textboxes.

It's the exact same no matter what type of input is used.

PHP Code:


			
 echo($_POST['inputname']);

http://www.w3schools.com/php/php_post.asp

AND if you have multiple inputs with the same name they will be received as a comma sepreated string of values.