HELP HTML not doing what I want... Options

[Jamma]

Hi all

I am a newbie to HTML and am just trying to set up a little business for my family. I am trying to do an online order form that adds up the total orders and also allows people to select a time frame for their order to be delivered and a date as well as leave comments then when they click submit I want the order to come to me and a thank you page to be generated.

Please help me fix this script if you can. Here it is:

<script TYPE="text/javascript">
<!--
function orderTotal(oform, prefix)
{
// set references to fields
var qty = oform[prefix + "_qty"];
var stHold = oform[prefix + "_stHold"];
var price = oform[prefix + "_price"];
var stVis = oform[prefix + "_stVis"];

// only bother if the field has contents
if (qty == "")return;

// if the with is not a number (NaN)
// or is zero or less
// everything goes blank
if(isNaN(qty.value) || (qty.value <= 0))
{
qty.value = "";
stHold.value = "";
}

// else the field is a valid number, so calculate the
// total order cost and put that value in the
// hidden subtotal field
else
stHold.value = (Math.round(qty.value * price.value * 100))/100;

// call the routine which checks if the
// visible subtotal is correct
visTotal(oform, prefix);
}

// checks if the visible subtotal is correct
// ie, if it equals the hidden subtotal field
function visTotal(oform, prefix)
{
var stHold = oform[prefix + "_stHold"];
var stVis = oform[prefix + "_stVis"];

if (stVis.value != stHold.value)
stVis.value = stHold.value;
}
// -->
</SCRIPT>

<FORM ACTION="../cgi-bin/mycgi.pl">
<TABLE BORDER CELLPADDING=3>
<!-- table titles -->
<TR BGCOLOR="#99CCFF">
<TH>ITEM</TD>
<TH>QUANTITY</TD>
<TH>PRICE</TD>
<TH>TOTAL</TD>
</TR>

<!-- Ackee & Saltfish -->
<TR BGCOLOR="#FFFFCC">
<TD>Ackee & Saltfish</TD>
<TD><INPUT
TYPE=TEXT
NAME="vn_qty"
SIZE=3
onChange="orderTotal(this.form, 'vn')"
></TD>
<TD><INPUT TYPE=HIDDEN NAME="vn_price" VALUE="15.00">£15.00</TD>
<TD ALIGN=RIGHT>
<INPUT TYPE=HIDDEN NAME="vn_stHold">
<INPUT
TYPE=TEXT
NAME="vn_stVis"
SIZE=10
onChange="visTotal(this.form, 'vn')"
></TD>
</TR>

<!-- Escovietched Fish -->
<TR BGCOLOR="#FFFFCC">
<TD>Escovietched Fish</TD>
<TD><INPUT
TYPE=TEXT
NAME="ja_qty"
SIZE=3
onChange="orderTotal(this.form, 'ja')"
></TD>
<TD><INPUT TYPE=HIDDEN NAME="ja_price" VALUE="15.00">£15.00</TD>
<TD ALIGN=RIGHT>
<INPUT TYPE=HIDDEN NAME="ja_stHold">
<INPUT
TYPE=TEXT
NAME="ja_stVis"
SIZE=10
onChange="visTotal(this.form, 'ja')"
></TD>
</TR>

<!-- Brown Stew Chicken-->
<TR BGCOLOR="#FFFFCC">
<TD>Brown Stew Chicken</TD>
<TD><INPUT
TYPE=TEXT
NAME="vn_qty"
SIZE=3
onChange="orderTotal(this.form, 'vn')"
></TD>
<TD><INPUT TYPE=HIDDEN NAME="vn_price" VALUE="10.50">£10.50</TD>
<TD ALIGN=RIGHT>
<INPUT TYPE=HIDDEN NAME="vn_stHold">
<INPUT
TYPE=TEXT
NAME="vn_stVis"
SIZE=10
onChange="visTotal(this.form, 'vn')"
></TD>
</TR>

<!-- Curried Chicken-->
<TR BGCOLOR="#FFFFCC">
<TD>Curried Chicken</TD>
<TD><INPUT
TYPE=TEXT
NAME="vn_qty"
SIZE=3
onChange="orderTotal(this.form, 'vn')"
></TD>
<TD><INPUT TYPE=HIDDEN NAME="vn_price" VALUE="15.00">£15.00</TD>
<TD ALIGN=RIGHT>
<INPUT TYPE=HIDDEN NAME="vn_stHold">
<INPUT
TYPE=TEXT
NAME="vn_stVis"
SIZE=10
onChange="visTotal(this.form, 'vn')"
></TD>
</TR>

<!-- Curried Mutton-->
<TR BGCOLOR="#FFFFCC">
<TD>Curried Mutton</TD>
<TD><INPUT
TYPE=TEXT
NAME="vn_qty"
SIZE=3
onChange="orderTotal(this.form, 'vn')"
></TD>
<TD><INPUT TYPE=HIDDEN NAME="vn_price" VALUE="15.00">£15.00</TD>
<TD ALIGN=RIGHT>
<INPUT TYPE=HIDDEN NAME="vn_stHold">
<INPUT
TYPE=TEXT
NAME="vn_stVis"
SIZE=10
onChange="visTotal(this.form, 'vn')"
></TD>
</TR>

<!-- Jamaican Jerked Chicken-->
<TR BGCOLOR="#FFFFCC">
<TD>Jamaican Jerked Chicken</TD>
<TD><INPUT
TYPE=TEXT
NAME="vn_qty"
SIZE=3
onChange="orderTotal(this.form, 'vn')"
></TD>
<TD><INPUT TYPE=HIDDEN NAME="vn_price" VALUE="15.00">£15.00</TD>
<TD ALIGN=RIGHT>
<INPUT TYPE=HIDDEN NAME="vn_stHold">
<INPUT
TYPE=TEXT
NAME="vn_stVis"
SIZE=10
onChange="visTotal(this.form, 'vn')"
></TD>
</TR>

<!-- Glazed Chicken in Pineapple-->
<TR BGCOLOR="#FFFFCC">
<TD>Glazed Chicken in Pineapple</TD>
<TD><INPUT
TYPE=TEXT
NAME="vn_qty"
SIZE=3
onChange="orderTotal(this.form, 'vn')"
></TD>
<TD><INPUT TYPE=HIDDEN NAME="vn_price" VALUE="14.50">£14.50</TD>
<TD ALIGN=RIGHT>
<INPUT TYPE=HIDDEN NAME="vn_stHold">
<INPUT
TYPE=TEXT
NAME="vn_stVis"
SIZE=10
onChange="visTotal(this.form, 'vn')"
></TD>
</TR>

<!-- Lamb in Pickled Red Cabbage-->
<TR BGCOLOR="#FFFFCC">
<TD>Lamb in Pickled Red Cabbage</TD>
<TD><INPUT
TYPE=TEXT
NAME="vn_qty"
SIZE=3
onChange="orderTotal(this.form, 'vn')"
></TD>
<TD><INPUT TYPE=HIDDEN NAME="vn_price" VALUE="20.00">£20.00</TD>
<TD ALIGN=RIGHT>
<INPUT TYPE=HIDDEN NAME="vn_stHold">
<INPUT
TYPE=TEXT
NAME="vn_stVis"
SIZE=10
onChange="visTotal(this.form, 'vn')"
></TD>
</TR>

<!-- Grilled Pork in BBQ Jerk Marinade-->
<TR BGCOLOR="#FFFFCC">
<TD>Grilled Pork in BBQ Jerk Marinade</TD>
<TD><INPUT
TYPE=TEXT
NAME="vn_qty"
SIZE=3
onChange="orderTotal(this.form, 'vn')"
></TD>
<TD><INPUT TYPE=HIDDEN NAME="vn_price" VALUE="20.00">£15.50</TD>
<TD ALIGN=RIGHT>
<INPUT TYPE=HIDDEN NAME="vn_stHold">
<INPUT
TYPE=TEXT
NAME="vn_stVis"
SIZE=10
onChange="visTotal(this.form, 'vn')"
></TD>

<!-- Pot Roast Beef-->
<TR BGCOLOR="#FFFFCC">
<TD>Pot Roast Beef</TD>
<TD><INPUT
TYPE=TEXT
NAME="vn_qty"
SIZE=3
onChange="orderTotal(this.form, 'vn')"
></TD>
<TD><INPUT TYPE=HIDDEN NAME="vn_price" VALUE="12.50">£12.50</TD>
<TD ALIGN=RIGHT>
<INPUT TYPE=HIDDEN NAME="vn_stHold">
<INPUT
TYPE=TEXT
NAME="vn_stVis"
SIZE=10
onChange="visTotal(this.form, 'vn')"
></TD>
</TR>

</TABLE>

<!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" xml:lang="en" lang="en">

<head>
<title>this is the title of the web page</title>
</head>
<body>

<form action="">
<b>11:00am delivery slot preferred (order arrives by 12noon the latest):
<input type="checkbox" name="tutorial" value="HTML" />
<br />
4:00pm delivery slot preferred (order arrives by 5:00pm the latest): </b>
<input type="checkbox" name="tutorial" value="CSS" />
<br />
</form>

</body>
</html>

<P><INPUT TYPE=SUBMIT VALUE="submit">
</FORM>

It is a total nightmare!
Any reason why only one box is adding up total orders and why it is not allowing me to add an email address for the submit button??? What am I doing wrong - no doubt everything!

Thanks for your help in advance.

[Brian Chandler]

Indeed a total nightmare. You could try reading some _very elementary_ HTML tutorials, and you might also look for a prebuilt online shop system you could use - such as oscommerce, though I have no direct experience of it.

Where did you get the bits you have now? Seems to be some javascript, followed by a table, followed by an html document, with a bit of extra <form> spilling over the end. This is such a total mess that the only way really is to start again.
Sorry if you think this doesn't help, but it's the truth.

[Darin McGrew]

Please see the FAQ entry How do I use forms?

[Brian Chandler]

Please see the FAQ entry How do I use forms?

I don't think this is a very helpful or appropriate reply, because it suggests that all the OP has to do is learn about forms - but actually it looks as though the OP first needs to learn about basic html syntax, to grasp what a basic web page document is, before even beginning to think about forms.

Incidentally, I wish people would stop moving questions without first working out what they are about. This is not a question about client side scripting, despite the fact that the document starts with "Javascript"; it is more about basic web page design/programming.

[Jamma]

Please see the FAQ entry How do I use forms?

I don't think this is a very helpful or appropriate reply, because it suggests that all the OP has to do is learn about forms - but actually it looks as though the OP first needs to learn about basic html syntax, to grasp what a basic web page document is, before even beginning to think about forms.

Incidentally, I wish people would stop moving questions without first working out what they are about. This is not a question about client side scripting, despite the fact that the document starts with "Javascript"; it is more about basic web page design/programming.

Thanks Brian - I wasn't sure why they moved my question. You are absolutely right I am clueless but willing and eager to learn. Back to the drawing board for me - I will check out oscommerce as suggested also.

Will let you know how i get on!

[pandy]

I moved it. I thought the problem you posted about was with the JavaScript that's supposed to add up the total. Was I wrong? I can move it back again if the problem really is with the HTML.

[Brian Chandler]

I moved it. I thought the problem you posted about was with the JavaScript that's supposed to add up the total. Was I wrong? I can move it back again if the problem really is with the HTML.

Please do not interpret this as a personal attack on the OP, or anyone else... "There are no stupid questions, only stupid answers."

The problem is that writing an html document is an exercise in software generation. (It would be nice if we could use the general word for this activity, viz "programming", but it causes apoplexy in some people, so I suppose we'd be stuck with a circumlocution like "causing a desired effect in a computer system by the generation of text in a system of formal syntax", which is a bit unwieldy.)

Anyway, the problem is the "cooking" view of web pages. When you make a casserole, you put in meat, onions, carrots, other root vegetables, well, anything that takes your fancy. It obviously doesn't make any major difference whether you put the onions in then the carrots, or whether you cut the carrots longitudinally or into rings, because all this stuff is going to be cooked, and as long as you're hungry it will seem tasty enough. But making a web page is just not remotely like cooking. Someone asked yesterday how to "make a loop", and it's clear they were hoping you got a little tub of "loop-juice" and sprinkled it in somewhere, anywhere in the cooking pot.

So I suggest the first problem that needs to be solved here is to understand the idea that an html document _must_ be something that starts with doctype, followed by <head>, followed by <body>. Gradually the learner can find how to fill out the details of these various bits. But until you can generate a more-or-less valid simple html page, hoping to get fancy javascript working is not plausible.

In this particular case, there are actually two <form> elements, nested, one with a blank action, the other <FORM ACTION="../cgi-bin/mycgi.pl">. This latter looks to me as though you are expected to enter the name of your own form handler, which ought to happen before you even think about javascript. Another possibility for the "basic problem" is that it's not understanding that javascript to add the total on the form only provides feedback to the user, and doesn't reach the shopkeeper.