PHP Form using JavaScript

jdm95lude · March 27, 2008

So I created this form it has some functions in JS that calc total price etc. Well I want to be able to send what the user chose to an email but since im using the value="" field for calc I have to have the amount as the value so then when I try and get the info using PHP all it gives me is the $ amount which I knew it would do but I need to know which product they ordered. I tried to do a if statement to if the value="whatever amount" then it equals the name of the product but they have a few products named the same thing.

html code for the product

  
<html>
<select name="prod" id="prod" onChange="calcPrice()" />
   <option value="0">--------- Select a Product from FHM product list</option>
   <option value="50.00 <?php if (empty($_POST['Eclipse'])) echo $_POST['Eclipse'] ?>" />Sequal Eclipse ($50.00/wk, $100.00 deposit)</option>
   <option value="50.00 <?php if (empty($_POST['EverGo'])) echo $_POST['EverGo'] ?>" />Resperonice EverGo ($50.00/wk, $100.00 deposit)</option>
</html>

php code to show what they chose

<?php
if ($Eclipse != " ")
	{
		$Eclipse = "Sequal Eclipse ($50.00/wk, $100.00 deposit)";

	} 

	if ($EverGo != " ")
	{
		$EverGo = "Resperonice EverGo ($50.00/wk, $100.00 deposit)";
	}

	echo "$Eclipse";
	echo "$EverGo";

?>

any and all ideas are welcome please.

conker87 · March 27, 2008

Make sure you set $Eclipse and $EverGo.

If you're checking for null, just use:

<?php

$Eclipse = $_POST['Eclipse'];
$EverGo = $_POST['EverGo'];

if ($Eclipse)
	{
		$Eclipse = "Sequal Eclipse ($50.00/wk, $100.00 deposit)";

	} 

if ($EverGo)
	{
		$EverGo = "Resperonice EverGo ($50.00/wk, $100.00 deposit)";
	}

	echo "$Eclipse";
	echo "$EverGo";

?>

jdm95lude · March 27, 2008

Yeah I already have them assigned sorry I didn't want to list all my vars. Thats not the problem. Because if you look at the html code they will never be null they have values set to them to do the calculation for a total amt.

Make sure you set $Eclipse and $EverGo.

If you're checking for null, just use:

<?php

$Eclipse = $_POST['Eclipse'];
$EverGo = $_POST['EverGo'];

if ($Eclipse)
	{
		$Eclipse = "Sequal Eclipse ($50.00/wk, $100.00 deposit)";

	} 

if ($EverGo)
	{
		$EverGo = "Resperonice EverGo ($50.00/wk, $100.00 deposit)";
	}

	echo "$Eclipse";
	echo "$EverGo";

?>

rhodesa · March 27, 2008

I would use something like this. It has all the data in one place, so it's easy to update. You should just need to fill in your calculation stuff, and then your email

Note: It does require PHP5's json_encode. If you aren't running PHP5, let me know and I'll supply a json_encode function for you.

<?php
  $choices = array(
    'eclipse' => array(
      'title' => 'Sequal Eclipse ($50.00/wk, $100.00 deposit)',
      'price' => 50,
      'deposit' => 100,
    ),
    'evergo' => array(
      'title' => 'Resperonice EverGo ($50.00/wk, $100.00 deposit)',
      'price' => 50,
      'deposit' => 100,
    ),
  );
  
  if($_SERVER['REQUEST_METHOD'] == 'POST'){
    //Send Email
    $choice = $choices[$_POST['prod']];
    if(!$choice)
      die("No product chosen");
    
    $msg = $choice['title'];
    //Add on other email info here
    
    mail('email@host.com','Email Subject',$msg)
      or die("Failed to send email");
    header('Location: '.$_SERVER['PHP_SELF']);
    exit;
  }
?>
<html>
<body>
<script type="text/javascript">
  var choices = <?php print json_encode($choices); ?>;
  function calcPrice(ele) {
    var choice = choices[ele.value];
    if(!choice) return false;
    //Do Calculation Here
    alert("You picked: "+choice['title']+"\nPrice: $"+choice['price']+"\nDeposit: $"+choice['deposit']);
  }
</script>
<form method="POST">
  <select name="prod" onchange="calcPrice(this);" />
     <option value="">--- Select a Product from FHM product list ---</option>
<?php
  foreach($choices as $key=>$choice){
    echo "     <option value=\"{$key}\" />{$choice['title']}</option>\n";
  }
?>
  </select>
  <input type="submit" />
</form>
</body>
</html>

jdm95lude · March 27, 2008

Could you put some comments in there please

<?php

foreach($choices as $key=>$choice){

echo " <option value=\"{$key}\" />{$choice['title']}</option>\n";

}

?>

what is that doing? Also what is the

var choices = <?php print json_encode($choices); ?>;

I would use something like this. It has all the data in one place, so it's easy to update. You should just need to fill in your calculation stuff, and then your email

Note: It does require PHP5's json_encode. If you aren't running PHP5, let me know and I'll supply a json_encode function for you.

<?php
  $choices = array(
    'eclipse' => array(
      'title' => 'Sequal Eclipse ($50.00/wk, $100.00 deposit)',
      'price' => 50,
      'deposit' => 100,
    ),
    'evergo' => array(
      'title' => 'Resperonice EverGo ($50.00/wk, $100.00 deposit)',
      'price' => 50,
      'deposit' => 100,
    ),
  );
  
  if($_SERVER['REQUEST_METHOD'] == 'POST'){
    //Send Email
    $choice = $choices[$_POST['prod']];
    if(!$choice)
      die("No product chosen");
    
    $msg = $choice['title'];
    //Add on other email info here
    
    mail('email@host.com','Email Subject',$msg)
      or die("Failed to send email");
    header('Location: '.$_SERVER['PHP_SELF']);
    exit;
  }
?>
<html>
<body>
<script type="text/javascript">
  var choices = <?php print json_encode($choices); ?>;
  function calcPrice(ele) {
    var choice = choices[ele.value];
    if(!choice) return false;
    //Do Calculation Here
    alert("You picked: "+choice['title']+"\nPrice: $"+choice['price']+"\nDeposit: $"+choice['deposit']);
  }
</script>
<form method="POST">
  <select name="prod" onchange="calcPrice(this);" />
     <option value="">--- Select a Product from FHM product list ---</option>
<?php
  foreach($choices as $key=>$choice){
    echo "     <option value=\"{$key}\" />{$choice['title']}</option>\n";
  }
?>
  </select>
  <input type="submit" />
</form>
</body>
</html>

rhodesa · March 27, 2008

That foreach loop will print the option choice for each of the items in $choices. So, just add all your Product options using the same format, and the everything will update automatically.

<?php
  $choices = array(
    'eclipse' => array(
      'title' => 'Sequal Eclipse ($50.00/wk, $100.00 deposit)',
      'price' => 50,
      'deposit' => 100,
    ),
    'evergo' => array(
      'title' => 'Resperonice EverGo ($50.00/wk, $100.00 deposit)',
      'price' => 50,
      'deposit' => 100,
    ),
  );
  
  if($_SERVER['REQUEST_METHOD'] == 'POST'){
    //Send Email
    $choice = $choices[$_POST['prod']]; //Get users choice
    if(!$choice)
      die("No product chosen");
    
    $msg = $choice['title']; //Add users choice to email message
    //Add on other email info here
    
    mail('email@host.com','Email Subject',$msg) //Send email
      or die("Failed to send email");
    header('Location: '.$_SERVER['PHP_SELF']); //Forward back to self to prevent resubmit
    exit;
  }
?>
<html>
<body>
<script type="text/javascript">
  var choices = <?php print json_encode($choices); ?>; //Print choices data as JavaScript Object
  function calcPrice(ele) {
    var choice = choices[ele.value]; //Get info for users choice
    if(!choice) return false; //Invalid choice
    var title = choice['title']; //Title of selected choice
    var price = choice['price']; //Price of selected choice
    var deposit = choice['deposit']; //Deposit requirement of selected choice

    //Do Calculation Here
    alert("You picked: "+title+"\nPrice: $"+price+"\nDeposit: $"+deposit);//Some debugging
  }
</script>
<form method="POST">
  <select name="prod" onchange="calcPrice(this);" />
     <option value="">--- Select a Product from FHM product list ---</option>
<?php
  foreach($choices as $key=>$choice){
    //Print option item for each choice
    echo "     <option value=\"{$key}\" />{$choice['title']}</option>\n";
  }
?>
  </select>
  <input type="submit" />
</form>
</body>
</html>

Update: I assume you have other code already for generating the total. Just add that stuff in, and you should be good to go.

jdm95lude · March 27, 2008

I guess I really don't understand what you are doing.

jdm95lude · March 28, 2008

anyone else have any input?

rhodesa · March 28, 2008

What don't you understand? The foreach loop? Instead of manually typing out the info like this:

<select name="prod" id="prod" onChange="calcPrice()" />
   <option value="0">--------- Select a Product from FHM product list</option>
   <option value="50.00 <?php if (empty($_POST['Eclipse'])) echo $_POST['Eclipse'] ?>" />Sequal Eclipse ($50.00/wk, $100.00 deposit)</option>
   <option value="50.00 <?php if (empty($_POST['EverGo'])) echo $_POST['EverGo'] ?>" />Resperonice EverGo ($50.00/wk, $100.00 deposit)</option>
</select>

I am generating it dynamically by storing it into a variable, then looping over that variable.

The json_encode is a way of converting the PHP array into the JavaScript equivalent, so it can be used in the calcPrice function.

The calcPrice function and the body of the email are incomplete because you need to fill them in with whatever fits your needs.

jdm95lude · March 29, 2008

doesn't work properly. I already have the JavaScript calculation in place to get the price. I need to get the value to print on the screen but I don't want to print the price I want it to print the actual machine that they are requesting.

Here is my Order.php code

<html>
<head>

<title>Product Order Form</title>
<link href="scripts/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/functions.js"></script>
<script type="text/javascript">

/* Calls and stores the todayTxt function in the date field to display the current date.
*/
function startForm() {
document.Order.date.value = todayTxt();
document.Order.prod.focus();
}

/* To calculate the total price of a given product, you miltiply the price of the product by the quantity ordered. The following calcPrice() function performs the necessary calculation to determing the price, and then displays the value in the price field of the web form
*/
function calcPrice() {
product = document.Order.prod;
pindex = product.selectedIndex;
product_price = product.options[pindex].value;
quanity = document.Order.qty;
qindex = quanity.selectedIndex;quanity_ordered = quanity.options[qindex].value;
document.Order.price.value = (product_price*quanity_ordered).toFixed(2);
// to update if anything was changed
calcTotal();
}

/* Tp calculate the cost of the shipping. In this function the shipOption parameter represents the shipping option button selected by a customer. But
*/
function calcShipping(shipOption) {
document.Order.ship.value = shipOption.value;
// to update if anything was changed
calcTotal();
}

/* This function named calcTotal() that calculates the values of the subtotal, tax, and total fields. 
*/
function calcTotal() {
priceVal = parseFloat(document.Order.price.value);
shipVal = parseFloat(document.Order.ship.value);
taxVal = 0.05*(priceVal+shipVal);
document.Order.sub.value = (priceVal+shipVal).toFixed(2);
document.Order.tax.value = (taxVal).toFixed(2);
document.Order.tot.value = (priceVal+shipVal+taxVal).toFixed(2);
}

/* This function will check to make sure every section is filled out properly. Note that the return keyword ends this function when one of the conditions is met. Thus, only one alert box will be displayed, even if more than one error is present in the form.
*/
function checkOrder() {
if (document.Order.prod.selectedIndex == 0)
	{alert ("You must select a FHM product");
	return false;}
else if (document.Order.qty.selectedIndex == 0)
	{alert("You must select a quantity to order");
	return false;}
else if (document.Order.ship.value == "0.00")
	{alert("You must select a shipping option");
	return false;}
else return true;
}

</script>

</head>
<!--Calls the startForm() function to start the form-->
<body onLoad="startForm()">
<!--Calls the checkOrder() function to validate the form if everything is correct it goes to form 2. and resets the form when cancel is pressed-->
<form name="Order" id="Order" method="post" action="summary.php" onSubmit="return checkOrder()" onReset="location.reload()">


<div id="main">
<p id="logo"><img src="images/orderformheader.gif" alt="FHM-Logo" /></p>
<h1 class="h1">Order Form</h1>
<p id="datep">
   <input class="text" id="date" name="date" size="11" readonly="readonly" value="<?php if (empty($_POST['date'])) echo $_POST['date'] ?>" />
</p>
<fieldset>
<legend>Select a Product</legend>

<table width="580">
<tr>
<td width="97" class="labelcell">Product</td>
<td colspan="2" class="inputcell">
<!-- When you want to run the calcPrice() function whenever a user selects a new option from either the prodduct or quanity selection lists. Do this by using the onchange event handler which runs a command whenver the slected option in the list changes.
-->
   <select name="prod" id="prod" onChange="calcPrice()" />
   <option value="0">--------- Select a Product from FHM product list</option>
   <option value="50.00 <?php if (empty($_POST['Eclipse'])) echo $_POST['Eclipse'] ?>" />Sequal Eclipse ($50.00/wk, $100.00 deposit)</option>
   <option value="50.00 <?php if (empty($_POST['EverGo'])) echo $_POST['EverGo'] ?>" />Resperonice EverGo ($50.00/wk, $100.00 deposit)</option>
   <option value="55.00">Resperonice EverGo w/extra battery ($55.00/wk, $100.00 deposit)</option>
   <option value="30.00">Airsep LifeStyle ($30.00/wk, $100.00 deposit)</option>
   <option value="35.00">Airsep LifeStyle w/extra battery ($35.00/wk, $100.00 deposit)</option>
   <option value="50.00">Airsep FreeStyle ($50.00/wk, $100.00 deposit)</option>
   <option value="65.00">Airsep FreeStyle w/extra battery ($65.00/wk, $100.00 deposit)</option>
   </select>
<!-- When you want to run the calcPrice() function whenever a user selects a new option from either the prodduct or quanity selection lists. Do this by using the onchange event handler which runs a command whenver the slected option in the list changes.
-->     
   <select name="qty" id="qty" onChange="calcPrice()" >
   <option value="0">Quantity</option>
   <option value="1">1</option><option value="2">2</option><option value="3">3</option>
   <option value="4">4</option><option value="5">5</option>
   </select></td>
<td width="30" class="outcell">
   <input class="num" name="price" id="price" size="7" value="0.00" readonly="readonly" /></td>
</tr>

<tr>
<td class="labelcell">Shipping</td>
<td colspan="2">
<!--/* When a customer clicks one of the shipType option buttons, the calcShipping() function is called. The object indecated by the "this" keyword is stored in the shipOption parameter, which is then used in determining the cost of the selected shipping option
*/-->
   <p><input type="radio" name="shipType" id="ship1" value="30.00" onClick="calcShipping(this)"/>
       <label for="ship1">Standard (Flate Rate): $30.00</label>
   </p>
<!--/* When a customer clicks one of the shipType option buttons, the calcShipping() function is called. The object indecated by the "this" keyword is stored in the shipOption parameter, which is then used in determining the cost of the selected shipping option
*/--></td>
<td class="outcell">
   <input class="num" name="ship" id="ship" size="7" value="0.00" readonly="readonly" /></td>
</tr>

<tr>
<td class="labelcell2"> </td>
<td width="633" rowspan="3"> <br />You will be contacted within 48hrs to verify your order and to make sure what you ordered will suite your needs.
There will be a hold of $3,000.00 on your credit card for insurance purposes. You will receive the the refund of the difference upon return of the maching in good working condition.</td>
<td class="labelcell2">Subtotal</td>
<td class="outcell">
   <input class="num" name="sub" size="7" value="0.00" readonly="readonly" /></td>
</tr>

<tr>
<td class="labelcell2"> </td>
<td width="65" class="labelcell2">Tax (5%)</td>
<td width="30" class="labelcell2"><span class="outcell">
  <input class="num" name="tax" id="tax" size="7" value="0.00" readonly="readonly" />
</span></td>
<td width="3" class="outcell"> </td>
</tr>

<tr>
<td class="labelcell2"> </td>
<td class="labelcell2">TOTAL</td>
<td class="labelcell2"><span class="outcell">
  <input class="num" name="tot" id="tot" size="7" value="0.00" readonly="readonly" />
</span></td>
<td class="outcell"> </td>
</tr>
</table>
</fieldset>

<p id="formbuttons">
   <input type="reset"  name="cancelb" id="cancelb" value="Cancel" />
   <input type="submit" name="nextb" id="nextb" value="Next" />
</p>
</div>

</form>
</body>
</html>

jdm95lude · March 30, 2008

bump bump anyone?

Sign In

PHP Form using JavaScript

Recommended Posts

jdm95lude

Link to comment

Share on other sites

conker87

Link to comment

Share on other sites

jdm95lude

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

jdm95lude

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

jdm95lude

Link to comment

Share on other sites

jdm95lude

Link to comment

Share on other sites

rhodesa

Link to comment

Share on other sites

jdm95lude

Link to comment

Share on other sites

jdm95lude

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information