In an order form, it is common for the shipping and billing addresses to be the same, so it is helpful to the user if the billing address defaults to what they've entered for the shipping address. Other useful features include having the focus automatically switch to a particular field upon a user selection.

Add the copy_shipping function to the script in ordertxt.htm as follows:

function copy_shipping() {
     if (document.order.billcb.checked) {
          document .order.bname.value=document.order.sname.value;
          document.order.bstreet.value=document.order.sstreet.value;
          document.order.bcity.value=document.order.scity.value;
          document.order.bstate.selectedIndex=document.order.sstate.selectedIndex;
          document.order.bzip.value=document.order.szip.value;
     }
}

Add the onclick event handler to the billcb checkbox:

onclick="copy_shipping()"

Save and test in browser.

Add the use_credit function so the focus switches to the credit card name field upon user selection:

function use_credit() {
     if (document.order.creditcb.checked) document.order.cname.focus();
}

Add the onclick event handler to the creditcb field:

onclick="use_credit()"

Save and test the form.

Troubleshooting Tips

In the event you get an error, IE helps you troubleshoot the error. As you test your scripts, look in the bottom left corner of the status bar in IE for the error icon:

Double-click the icon for information about where the browser encountered the error.

It is common practice to code form validators to make sure the form is correctly filled in by the user. Specifically, you want to reject the form if certain things are not completed. To prevent submittal of incomplete data, you use the onsubmit event handler. Of course, you want to display a message to the user and provide a means for them to complete the form properly. You also want to reload the form in the event the user clicks the reset button.

Add the checkform function:

function checkform() {
     product_ok = true;
     if (document.order.sub1.value == "0.00") product_ok=false;
     if (document.order.sub2.value == "0.00") product_ok=false;
     if (document.order.sub3.value == "0.00") product_ok=false;

     shipping_ok = true;
     if (document.order.sname.value == "") shipping_ok=false;
     if (document.order.sstreet.value == "") shipping_ok=false;
     if (document.order.scity.value == "") shipping_ok=false;
     if (document.order.szip.value == "") shipping_ok=false;

     billing_ok = true;
     if (document.order.bname.value == "") billing_ok = false;
     if (document.order.bstreet.value == "") billing_ok = false;
     if (document.order.bcity.value == "") billing_ok = false;
     if (document.order.bzip.value == "") billing_ok = false;

     credit_ok = true;
     if (document.order.cname.value == "") credit_ok = false;
     if (document.order.cnumber.value=="") credit_ok = false;
     cardchecked=false;
     for (i=0; i <=5; i++) {
          if (document.order.ccard[i].checked) cardchecked=true;
     }
     if (cardchecked == false) credit_ok = false;

     payment_ok=(credit_ok || billing_ok);

     form_ok=(product_ok && shipping_ok && payment_ok);

     if (form_ok) {
     alert("Your order has been submitted");
     } else {
         if (product_ok == false) alert("Select a product, quantity and shipping method");
         if (shipping_ok == false) alert ("Enter a shipping address");
         if (payment_ok == false) alert ("Enter a biling address or credit card");
     }

     return form_ok;
}

Add the onsubmit and onreset event handlers to the <form> tag:

onsubmit="return checkform()" onreset="location.reload()"

Save your work and test it in the browser.