Trying to add JS to eatery menu

Question

maxxxx 0 Newbie Poster

12 Years Ago

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>

javascript

Edited 12 Years Ago by maxxxx because: n/a

3 Contributors
9 Replies
76 Views
14 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by maxxxx

All 9 Replies

stbuchok

12 Years Ago

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

ddymacek 15 Posting Whiz

12 Years Ago

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...?

ddymacek 15 Posting Whiz

12 Years Ago

ok, give me a few minutes.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

maxxxx 0 Newbie Poster · Answer 1 · 2011-12-10T02:18:15+00:00

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.

maxxxx 0 Newbie Poster · Answer 2 · 2011-12-10T02:28:44+00:00

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.

maxxxx 0 Newbie Poster · Answer 3 · 2011-12-10T02:31:49+00:00

maxxxx 0 Newbie Poster

12 Years Ago

ok, give me a few minutes.

Thank you very much:)

ddymacek 15 Posting Whiz · Answer 4 · 2011-12-10T03:27:44+00:00

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 0 Newbie Poster · Answer 5 · 2011-12-10T03:32:01+00:00

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 0 Newbie Poster · Answer 6 · 2011-12-10T06:45:11+00:00

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?

Trying to add JS to eatery menu

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers