reptile7's JavaScript blog is Andrew Peak's personal technical writing project: it focuses on JavaScript and the analysis of JavaScript scripts, although HTML, CSS, and anything else related to coding for the Web are also fair game.

So, a user goes to the "So, You Want A Shopping Cart, Huh?" shopping cart, adds one or more items to the cart, proceeds to the order.html page, and fills out the Customer Information / Details and Shipping Address tables. Ready to order, the user clicks the submit button at the bottom of the page.

(Technically, this button is a push button and not a submit button because its type attribute is set to button and not submit, but its purpose is to submit the order form, so I'm gonna call it a submit button.)

Clicking the button calls the order.html orderSubmit( ) function and passes it an order string argument.

The orderSubmit( ) function gives the order argument a type identifier and then promptly checks if type and order are equal; the if (type == "order") { ... } gate can of course be removed. The rest of orderSubmit( ) comprises an if...else statement whose if clause submits the order form if the user's order.html table inputs are in order.

Go get on the phone

If the user checked the Phone Call: radio button in the Choose Order Method table, then the (document.order.order_type.checked || checkRequired( )) operation short-circuits to true, which is converted to false by the ! operator, and consequently control passes to the else clause, which pops up a first false alert( ) message and unnecessarily returns false.

Something's missing

If the user didn't check the Phone Call: radio button, then the order.html checkRequired( ) function is called.

• The alert( ) message fails to include the Email Address field of the Customer Information / Details table in its list of required fields.

Back at the orderSubmit( ) function, a true checkRequired( ) return causes the (document.order.order_type.checked || checkRequired( )) operation to return true, which is !-ed to false, sending control to the else clause, which pops up the first false alert( ) message and returns false, per the preceding section.

Submit it

If the user has entered something (not necessarily a valid something) into each of the required fields listed above, then the checkRequired( ) else clause returns false to the orderSubmit( ) function. As false || false gives false, the overall ! (document.order.order_type.checked || checkRequired( ))if condition now returns true; as a result, the if clause
(1) pops up a first true alert( ) message,
(2) assigns type/order to the value of the order form's form_action field (vide supra),
(3) submits the order form via a document.order.submit( ); command, and
(4) unnecessarily returns true.

Joe sets the order form's action attribute to a mailto: URL, which would have been OK for IE 4.x or Netscape 4.x but is not OK for modern browsers: see The mailto: blues section of Blog Entry #172. For his part, Gordon much more sensibly sends the form data to a formmail.pl CGI script, which is provided in the shopcart.zip package.

The subject, recipient, and redirectname values appear in the formmail.pl code whereas the retailer and form_actionnames don't, and I suspect that the retailer and form_action inputs can be thrown out but I don't know for sure. Note that the form_action input's value is already order, so we can at least delete the document.order.form_action.value = type; statement in the orderSubmit( ) function.

As Joe notes in the Altering the order.html Page section of the tutorial, your role here is to replace the CAPS parts with appropriate values. The redirect input's value points to a "thank you for your order" thanku.htm page to which the user is routed after the form has been submitted; a sample thanku.htm page is provided by the shopcart.zip package.

orderSubmit( ) retool

Per the preceding discussion, the orderSubmit( ) function can be streamlined as follows:

function orderSubmit( ) {
if (document.order.order_type.checked)
window.alert("The 'Phone Call' radio button in the Choose Order Method section must be unchecked in order to submit the form.");
else if (!checkRequired( )) {
document.order.submit( );
window.alert("Thank you!"); } }

If we're going to condition the submission of the order form on the checked status of the order_type radio button, then we should give the user a more meaningful explanation than first false for why the submission is unsuccessful when the radio button is checked, wouldn't you say? Moreover, the checkRequired( ) function pops up its own alert( ) message if the form is not complete, so there's no need to display the first false message in that case either.

An alternate checkRequired( )

It's not necessary to write out a reference expression for each required field in the checkRequired( ) function: