Trying to add JS to eatery menu

[maxxxx]

I have this form, and I want to add JS to it. I got part of it. But the hard part is the ordering menu part it's self. Can someone help me please?

</p></td><td width="359" align="right"><table width="325">
<tbody>
<tr>
<th width="144">item</th>
<th width="75">price</th>
<th width="92">quantity</th>
<th width="101">sub-total</th>
</tr>
<tr align="middle">
<td align="left">Hamberger</td>
<td><input size="7" </td>
<td><input size="3" /></td>
<td><input size="10" /></td>
</tr>
<tr align="middle">
<td align="left">Cheeseburger</td>
<td><input size="7" value="$3.99" /></td>
<td><input size="3" /></td>
<td><input size="10" /></td>
</tr>
<tr align="middle">
<td align="left">Chicken Burger</td>
<td><input size="7" value="$4.99" /></td>
<td><input size="3" /></td>
<td><input size="10" /></td>
</tr>
</tbody>
</table>
<table width="324">
<tbody>
<tr>
<th width="124">item</th>
<th width="42">price</th>
<th width="72">quantity</th>
<th width="74">sub-total</th>
</tr>
<tr align="middle">
<td align="left">French Fries</td>
<td><input size="7" value="$2.99" /></td>
<td><input size="3" /></td>
<td><input size="10" /></td>
</tr>
<tr align="middle">
<td align="left"><input type="checkbox" />
gravy</td>
<td><input size="7" value="$0.50" /></td>
<td><input size="3" /></td>
<td><input size="10" /></td>
</tr>
<tr align="middle">
<td align="left"><input type="checkbox" />
chilli</td>
<td><input size="7" value="$1.99" /></td>
<td><input size="3" /></td>
<td><input size="10" /></td>
</tr>
</tbody>
</table>
<table align="right">
<tbody>
<tr>
<td>subtotal</td>
<td><input size="10" /></td>
</tr>
<tr>
<td>pst 7%</td>
<td><input size="6" /></td>
</tr>
<tr>
<td>gst  5%</td>
<td><input size="6" /></td>
</tr>
<tr>
<td>total</td>
<td><input size="10" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="total up order" />
</td>
</tr>
</tbody>
</table></td>

[stbuchok]

No, as you have not explained what the problem is.

[maxxxx]

No, as you have not explained what the problem is.

I'm looking for help with the first item. Then I will understand the rest. For example Adding javascript to the hamburger Quantity and price. I realize I have a hard time explaining myself.

[ddymacek]

what do you mean adding javascript to the hamburger quantity and price? do you need to total the values of items selected? you still have not explained what you are trying to do...?

[maxxxx]

what do you mean adding javascript to the hamburger quantity and price? do you need to total the values of items selected? you still have not explained what you are trying to do...?

for example if the hamburger is 2.99 and he enters 1 in the quantity field it will tell him it's 2.99 in the sub-total field. If he types 2 in the quantity field it will give him the sup--total of 2 hamburgers in the sub-total field.

[ddymacek]

ok, give me a few minutes.

[maxxxx]

ok, give me a few minutes.

Thank you very much:)

[ddymacek]

mind you, I did not do the whole form, I did hamburger and cheeseburger fields along with subtotal pst, gst, and total fields near the end.
You were very vague on what you wanted so... I didn't quite understand until I was already coding, anyway, this should be a very good start for you.
If you want to move the 'total order' to the button, move the action to your submit button and call calculate_amount() there. hope the helps...

<script type="text/javascript">
	function calculate_amount() {
		var subtotal = 0;
		var hamburger_subtotal = 0;
		var hamburger = document.myform.hamburger.value;
		var hamburger_qty = document.myform.hamburger_qty.value;
		var cheeseburger_subtotal = 0;
		var cheeseburger = document.myform.cheeseburger.value;
		var cheeseburger_qty = document.myform.cheeseburger_qty.value;		
		var pst = 0;
		var gst = 0;
		var total = 0;
		//etc...
		//var chicken_burger;
		//var fries;
		//var gravy;
		//var chili;
		if (hamburger > 0) {
			hamburger_subtotal = hamburger * hamburger_qty;			
		}
		subtotal = hamburger_subtotal;
		// myform -- depends on the name of your actual form, if it does not have one give it one.
		document.myform.display_hamburger_subtotal.value = hamburger_subtotal;
		if (cheeseburger > 0) {
			cheeseburger_subtotal = cheeseburger * cheeseburger_qty;
		}
		// myform -- depends on the name of your actual form, if it does not have one give it one.
		document.myform.display_cheeseburger_subtotal.value = cheeseburger_subtotal;		
		subtotal = subtotal + cheeseburger_subtotal;
		pst = .07 * subtotal;
		gst = .05 * subtotal;
		// you cannot add the values after you call toFixed, so do the total now!
		total = subtotal + pst + gst;
		total = total.toFixed(2);		
		subtotal = subtotal.toFixed(2);
		pst = pst.toFixed(2);
		gst = gst.toFixed(2);
		//  this is wrong var tax = foo * 1.07; 	

		document.myform.display_subtotal.value = subtotal;
		document.myform.display_pst.value = pst;
		document.myform.display_gst.value = gst;
		//total = subtotal += pst += gst;


		document.myform.display_total.value = total;
		
	}
	</script>
	// first off this all needs to be wrapped in form tags if you are going to post the values to something.
	// you need to look up how to name your items, you should have an input type=x with name=y and id=y
	<form name="myform">
	<table width="325">
    <tbody>
    <tr>
    <th width="144">item</th>
    <th width="75">price</th>
    <th width="92">quantity</th>
    <th width="101">sub-total</th>
    </tr>
    <tr align="middle">
    <td align="left">Hamberger</td>
			    <td><select id="hamburger" name="hamburger" onchange="calculate_amount()">
					<OPTION VALUE='2.99'>2.99</OPTION>
					<OPTION VALUE='3.99'>3.99</OPTION>
					<OPTION VALUE='4.99'>4.99</OPTION>
				</select>
	</td>
	 <td><select id="hamburger_qty" name="hamburger_qty" onchange="calculate_amount()">
					<OPTION VALUE='0'>0</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>
					<OPTION VALUE='6'>6</OPTION>
					<OPTION VALUE='7'>7</OPTION>
					<OPTION VALUE='8'>8</OPTION>
					<OPTION VALUE='9'>9</OPTION>					
				</select>
	</td>
	<td><input type="text" id="display_hamburger_subtotal" name="display_hamburger_subtotal" size="10" disabled="disabled" /></td>
    </tr>
    <td align="left">Cheeseberger</td>
			    <td><select id="cheeseburger" name="cheeseburger" onchange="calculate_amount()">
					<OPTION VALUE='3.99'>3.99</OPTION>
					<OPTION VALUE='4.99'>4.99</OPTION>
					<OPTION VALUE='5.99'>5.99</OPTION>
				</select>
	</td>
	 <td><select id="cheeseburger_qty" name="cheeseburger_qty" onchange="calculate_amount()">
					<OPTION VALUE='0'>0</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>
					<OPTION VALUE='6'>6</OPTION>
					<OPTION VALUE='7'>7</OPTION>
					<OPTION VALUE='8'>8</OPTION>
					<OPTION VALUE='9'>9</OPTION>					
				</select>
	</td>
	<td><input type="text" id="display_cheeseburger_subtotal" name="display_cheeseburger_subtotal" size="10" disabled="disabled" /></td>
    </tr>
    <tr align="middle">
    <td align="left">Chicken Burger</td>
    <td><input size="7" value="$4.99" /></td>
    <td><input size="3" /></td>
    <td><input size="10" /></td>
    </tr>
    </tbody>
    </table>
    <table width="324">
    <tbody>
    <tr>
    <th width="124">item</th>
    <th width="42">price</th>
    <th width="72">quantity</th>
    <th width="74">sub-total</th>
    </tr>
    <tr align="middle">
    <td align="left">French Fries</td>
    <td><input size="7" value="$2.99" /></td>
    <td><input size="3" /></td>
    <td><input size="10" /></td>
    </tr>
    <tr align="middle">
    <td align="left"><input type="checkbox" />
    gravy</td>
    <td><input size="7" value="$0.50" /></td>
    <td><input size="3" /></td>
    <td><input size="10" /></td>
    </tr>
    <tr align="middle">
    <td align="left"><input type="checkbox" />
    chilli</td>
    <td><input size="7" value="$1.99" /></td>
    <td><input size="3" /></td>
    <td><input size="10" /></td>
    </tr>
    </tbody>
    </table>
    <table align="right">
    <tbody>
    <tr>
    <td>subtotal</td>
    <td><input type="text" id="display_subtotal" name="display_subtotal" size="10" disabled="disabled" /></td>
    </tr>
    <tr>
    <td>pst 7%</td>
    <td><input type="text" id="display_pst" name="display_pst" size="10" disabled="disabled" /></td>
    </tr>
    <tr>
    <td>gst 5%</td>
    <td><input type="text" id="display_gst" name="display_gst" size="10" disabled="disabled" /></td>
    </tr>
    <tr>
    <td>total</td>
    <td><input type="text" id="display_total" name="display_total" size="10" disabled="disabled" /></td>
    </tr>
    <tr>
    <td colspan="2"><input type="button" value="total up order" />
    </td>
    </tr>
    </tbody>
    </table>
	</form>

[maxxxx]

Thank you very much. This very helpful. Thanks again.

mind you, I did not do the whole form, I did hamburger and cheeseburger fields along with subtotal pst, gst, and total fields near the end.
You were very vague on what you wanted so... I didn't quite understand until I was already coding, anyway, this should be a very good start for you.
If you want to move the 'total order' to the button, move the action to your submit button and call calculate_amount() there. hope the helps...

<script type="text/javascript">
	function calculate_amount() {
		var subtotal = 0;
		var hamburger_subtotal = 0;
		var hamburger = document.myform.hamburger.value;
		var hamburger_qty = document.myform.hamburger_qty.value;
		var cheeseburger_subtotal = 0;
		var cheeseburger = document.myform.cheeseburger.value;
		var cheeseburger_qty = document.myform.cheeseburger_qty.value;		
		var pst = 0;
		var gst = 0;
		var total = 0;
		//etc...
		//var chicken_burger;
		//var fries;
		//var gravy;
		//var chili;
		if (hamburger > 0) {
			hamburger_subtotal = hamburger * hamburger_qty;			
		}
		subtotal = hamburger_subtotal;
		// myform -- depends on the name of your actual form, if it does not have one give it one.
		document.myform.display_hamburger_subtotal.value = hamburger_subtotal;
		if (cheeseburger > 0) {
			cheeseburger_subtotal = cheeseburger * cheeseburger_qty;
		}
		// myform -- depends on the name of your actual form, if it does not have one give it one.
		document.myform.display_cheeseburger_subtotal.value = cheeseburger_subtotal;		
		subtotal = subtotal + cheeseburger_subtotal;
		pst = .07 * subtotal;
		gst = .05 * subtotal;
		// you cannot add the values after you call toFixed, so do the total now!
		total = subtotal + pst + gst;
		total = total.toFixed(2);		
		subtotal = subtotal.toFixed(2);
		pst = pst.toFixed(2);
		gst = gst.toFixed(2);
		//  this is wrong var tax = foo * 1.07; 	

		document.myform.display_subtotal.value = subtotal;
		document.myform.display_pst.value = pst;
		document.myform.display_gst.value = gst;
		//total = subtotal += pst += gst;


		document.myform.display_total.value = total;
		
	}
	</script>
	// first off this all needs to be wrapped in form tags if you are going to post the values to something.
	// you need to look up how to name your items, you should have an input type=x with name=y and id=y
	<form name="myform">
	<table width="325">
    <tbody>
    <tr>
    <th width="144">item</th>
    <th width="75">price</th>
    <th width="92">quantity</th>
    <th width="101">sub-total</th>
    </tr>
    <tr align="middle">
    <td align="left">Hamberger</td>
			    <td><select id="hamburger" name="hamburger" onchange="calculate_amount()">
					<OPTION VALUE='2.99'>2.99</OPTION>
					<OPTION VALUE='3.99'>3.99</OPTION>
					<OPTION VALUE='4.99'>4.99</OPTION>
				</select>
	</td>
	 <td><select id="hamburger_qty" name="hamburger_qty" onchange="calculate_amount()">
					<OPTION VALUE='0'>0</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>
					<OPTION VALUE='6'>6</OPTION>
					<OPTION VALUE='7'>7</OPTION>
					<OPTION VALUE='8'>8</OPTION>
					<OPTION VALUE='9'>9</OPTION>					
				</select>
	</td>
	<td><input type="text" id="display_hamburger_subtotal" name="display_hamburger_subtotal" size="10" disabled="disabled" /></td>
    </tr>
    <td align="left">Cheeseberger</td>
			    <td><select id="cheeseburger" name="cheeseburger" onchange="calculate_amount()">
					<OPTION VALUE='3.99'>3.99</OPTION>
					<OPTION VALUE='4.99'>4.99</OPTION>
					<OPTION VALUE='5.99'>5.99</OPTION>
				</select>
	</td>
	 <td><select id="cheeseburger_qty" name="cheeseburger_qty" onchange="calculate_amount()">
					<OPTION VALUE='0'>0</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>
					<OPTION VALUE='6'>6</OPTION>
					<OPTION VALUE='7'>7</OPTION>
					<OPTION VALUE='8'>8</OPTION>
					<OPTION VALUE='9'>9</OPTION>					
				</select>
	</td>
	<td><input type="text" id="display_cheeseburger_subtotal" name="display_cheeseburger_subtotal" size="10" disabled="disabled" /></td>
    </tr>
    <tr align="middle">
    <td align="left">Chicken Burger</td>
    <td><input size="7" value="$4.99" /></td>
    <td><input size="3" /></td>
    <td><input size="10" /></td>
    </tr>
    </tbody>
    </table>
    <table width="324">
    <tbody>
    <tr>
    <th width="124">item</th>
    <th width="42">price</th>
    <th width="72">quantity</th>
    <th width="74">sub-total</th>
    </tr>
    <tr align="middle">
    <td align="left">French Fries</td>
    <td><input size="7" value="$2.99" /></td>
    <td><input size="3" /></td>
    <td><input size="10" /></td>
    </tr>
    <tr align="middle">
    <td align="left"><input type="checkbox" />
    gravy</td>
    <td><input size="7" value="$0.50" /></td>
    <td><input size="3" /></td>
    <td><input size="10" /></td>
    </tr>
    <tr align="middle">
    <td align="left"><input type="checkbox" />
    chilli</td>
    <td><input size="7" value="$1.99" /></td>
    <td><input size="3" /></td>
    <td><input size="10" /></td>
    </tr>
    </tbody>
    </table>
    <table align="right">
    <tbody>
    <tr>
    <td>subtotal</td>
    <td><input type="text" id="display_subtotal" name="display_subtotal" size="10" disabled="disabled" /></td>
    </tr>
    <tr>
    <td>pst 7%</td>
    <td><input type="text" id="display_pst" name="display_pst" size="10" disabled="disabled" /></td>
    </tr>
    <tr>
    <td>gst 5%</td>
    <td><input type="text" id="display_gst" name="display_gst" size="10" disabled="disabled" /></td>
    </tr>
    <tr>
    <td>total</td>
    <td><input type="text" id="display_total" name="display_total" size="10" disabled="disabled" /></td>
    </tr>
    <tr>
    <td colspan="2"><input type="button" value="total up order" />
    </td>
    </tr>
    </tbody>
    </table>
	</form>

[maxxxx]

ddymacek would it be hard for me to change the price option to one price only and let the customer type in there own quantity?