JavaScript - Attempting To Auto-populate Shopping Cart From Conditional Form

I have two slightly different forms on the same page, but I want the values in form1 to auto populate the same form fields in form2. 1 field is a text field, the rest are drop down menus. How would I accomplish this? Link to tutorial would be much appreciated. Thanks

Hello All,

I have a form where the number of input fields (lets call them B through N) is determined by the length of a php array. Above those input fields is another field (lets call this field input A) that I would like to be auto populated based on what the user enters in fields B through N.

Here is my code. The first table (with all of the "totals" fields) holds all of the input fields that I would like to auto update. These fields should auto update so that every input in EACH of the "fy" fields in the second table is added together. Example: every input in the id="fy_{$fy.fy}_high_impact_cost" field should be added together as the user enters them, and the id="totals_high_impact_cost" field should be auto updated with that total.

Code:

<form method="post" name="submit" action="new_item.php" accept-charset='UTF-8'>

<table border="box" width="100%">
<tr>
<td align="center">$<input id="totals_high_impact_cost" size="3" name="totals_high_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_most_likely_impact_cost" size="3" name="totals_most_likely_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_low_impact_cost" size="3" name="totals_low_impact_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_actual_expense" size="3" name="totals_actual_expense" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_high_mitigation_cost" size="3" name="totals_high_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_most_likely_mitigation_cost" size="3" name="totals_most_likely_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_low_mitigation_cost" size="3" name="totals_low_mitigation_cost" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_cost_in_scope" size="3" name="totals_cost_in_scope" maxlength="20" style="text-align: right" />M</td>
<td align="center">$<input id="totals_unfunded_threat" size="3" name="totals_unfunded_threat" maxlength="20" style="text-align: right" />M</td>
</tr>
</table>

{foreach value=fy from=$php_array}
<table>
<tr>
<td align="center">$<input id="fy_{$fy.fy}_high_impact_cost" size="3" name="fy_{$fy.fy}_high_impact_cost" maxlength="20" style="text-align: right" value="{$fy.high_impact_cost}" onchange="update_totals_high_impact_cost()" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_most_likely_impact_cost" size="3" name="fy_{$fy.fy}_most_likely_impact_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_impact_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_low_impact_cost" size="3" name="fy_{$fy.fy}_low_impact_cost" maxlength="20" style="text-align: right" value="{$fy.low_impact_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_actual_expense" size="3" name="fy_{$fy.fy}_actual_expense" maxlength="20" style="text-align: right" value="{$fy.actual_expense}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_high_mitigation_cost" size="3" name="fy_{$fy.fy}_high_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.high_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_most_likely_mitigation_cost" size="3" name="fy_{$fy.fy}_most_likely_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_low_mitigation_cost" size="3" name="fy_{$fy.fy}_low_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.low_mitigation_cost}" />M</td>
<td align="center">$<input id="fy_{$fy.fy}_cost_in_scope" size="3" name="fy_{$fy.fy}_cost_in_scope" maxlength="20" style="text-align: right" value="{$fy.cost_in_scope}" />M</td>
</tr>
</table>
{/foreach}

</form>

Please email me at alexhall12315@yahoo.com if you would like more explanation. Thanks in advance for any help!!! =)

I am working on my shopping cart page with DOM. In my html I created two tables one for items with add buttons, and the other one for displaying how many items are added. So, here is my html codes
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
	<meta name="description" content="forms" />
	<meta name="keywords" content="Client Side Programming, JavaScript, CSS" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Language" content="en-us" />
	<script type="text/javascript" src="shopping.js"></script>
   </head>
<body>  
	<h1>Central Valley Chocolates</h1>
	<h2>Gourmet Chocolates</h2>
	<table border="1" id="chocoateTrable">
	<tr id="ch1">
	<td>Chocolate Truffles</td><td>$34.99</td><td>
	<input type="button" value="Add" onclick="addItem(document.getElementById('ch1').rowIndex)" /></td></tr>
	<tr id="ch2">
	<td>Pecan</td><td>$14.99</td><td>
	<input type="button" value="Add" onclick="addItem(document.getElementById('ch2').rowIndex)" /></td></tr>
	<tr id="ch3">
	<td>Truffles</td><td>$28.99</td><td>
	<input type="button" value="Add" onclick="addItem(document.getElementById('ch3').rowIndex)" /></td></tr>
	<tr id="ch4">
	<td>caramel</td><td>$22.99</td><td>
	<input type="button" value="Add" onclick="addItem(document.getElementById('ch4').rowIndex)" /></td></tr>	
	<tr id="ch5">
	<td>Bark</td><td>$17.99</td><td>
	<input type="button" value="Add" onclick="addItem(document.getElementById('ch5').rowIndex)" /></td></tr>
	</table>
	<h2>Your Shopping Cart</h2>
	<table id="shoppingCart" border="1">
	<tr><td>Your shopping cart is empty</td></tr>
	</table>
	<p id="total">&nbsp;</p>
	</body>
</html>

And in my js file, I have two functions one for adding items and the other for deleting items.

Code:

var emptyCart = true;
var salesTotal = 0;
var curRow = 1;

function addItem(selectedItem){
	if(emptyCart == true){
		document.getElementById('shoppingCart').deleteRow(0);
		emptyCart = false;
	}

	var curItem = document.getElementById("chocolateTable").rows[selectedItem].cells;
	var selectedItem = curItem[0].innerHTML;
	var itemPrice = curItem[1].innerHTML;

	var lastItem = document.getElementById("shoppingCart").rows.length;
	var cartTable = document.getElementById("shoppingCart");
	var newRow = cartTable.insertRow(lastItem);
	document.getElementById("shoppingCart").rows[lastItem].id = "R" + curRow;
	var itemCell = newRow.insertCell(0);
	itemCell.innerHTML = selectedItem;
	var priceCell = newRow.insertCell(1);
	priceCell.innerHTML = itemPrice;
	var actionCell = newRow.insertCell(2);
	actionCell.innerHTML = "<input type='button' value = 'Remove' " + "onclick=\"removeItem('R"+curROw + "')\" />";
	++curRow;

	salesTotal += parseFloat(itemPrice.substring(1));
	document.getElementById('total').innerHTML = "<strong>Sales total</strong>: $" + salesTotal.toFixed(2);
}

function removeItem(rowNum){
	if(document.getElementById("shoppingCart").rows.length == 1){
		document.getElementById("shoppingCart").rows[0].cells[0].innerHTML = "<td>Your shopping cart is empty</td>";
		document.getElementById("shoppingCart").rows[0].cells[1].innerHTML = "<td>$0.00</td>";
		document.getElementById('total').innerHTML = "$" + salesTotal.toFixed(2);
		emptyCart = true;
	}
	else{
		var selectedRow = document.getElementById(rowNum).rowIndex;
		var itemPrice = document.getElementById("shoppingCart").rows[selectedRow].cells[1].innerHTML;
		document.getElementById("ShoppingCart").deleteRow(seletedRow);
		salesTotal = salesTotal - parseFloat(itemPrice.substring(1));
		document.getElementById('total').innerHTML = "$" + salesTotal.toFixed(2);
	}
}

However, when I click add button to add each item, I don't see anything in my shoppingCart. Anyone can tell me what is wrong with my code?

Hi and hope someone can help,

I'm doing some course work on setting / getting cookies for a shopping cart. It basically works except the user can only select one item of each of the goods on offer i.e. you can only buy one cup (not two), one saucer etc. etc.

I've deliberately not put a quantity field on the goods selection page and was hoping to modify my set cookie function so that if you've already selected one cup, the next tiume you select a cup, cups become 2 etc. etc.

Here's my set cookie function. Notice that I've hard wired a "1" in there which I want to change to the variable for the number of cups. I've also commented out some of the first few lines which were experiments to resolve the problem.

Code:

  function setCookie(name)
  {
	  alert("Thank you.\n\nYour basket has been updated.");
/*	if(name.value !=0 || name.value==null)
	name.value++;
	x=getCookie(name) || 0;
	alert(document.cookie);*/

	  var today = new Date();
	  var expiry = new Date(today.getTime()+28*24*60*60*1000); // plus 28 days
	  document.cookie=name+"= 1 ;expires="+expiry.toGMTString();
	  cart = document.cookie;
  }

My thanks,
R

A little while later...
I've cracked it, my function now looks like this and it appears to work...

Code:

function setCookie(name)
{
	  alert("Thank you.\n\nYour basket has been updated.");
	  x=parseInt(getCookie(name)) || 0;
	  alert(x);
	  y=x+1;
	  var today = new Date();
	  var expiry = new Date(today.getTime()+28*24*60*60*1000); // plus 28 days
	  document.cookie=name+"="+y+";expires="+expiry.toGMTString();
	  cart = document.cookie;
	  }

Thanks you fror your interest, appreciated,
R