Changing the Order Form

There are a fairly large number of fields included in the order form page of my JavaScript Shopping Cart script. By including all of the fields you will most likely need to have in the form I could incorporate code into the script that provides your visitor with the option of saving all that inforemation in a cookie (that's the only spot in the script that uses a cookie as the rest of the information is passed between the web pages using the frameset).

The situations where you might need to add additional fields of your own to the order form should therefore be fairly minimal. I have included all the fields I can think of that are likely to be the same between orders and so any additional fields will most likely be ones that you will not want your visitors to save between orders anyway as the information will be different from one order to the next. You should therefore be able to add whatever extra fields that you need and the only changes you might need to make to the JavaScript would be to add the extra validations into the validh.js script in the everything() function.

Removing fields from the form is perhaps something you are more likely to want to do. As the fields are actually referenced in many places in the script actually removing the fields will involve major modifications to the script. There is a simpler solution though that will allow you to remove fields from the form without needing to update the JavaScript at all.

The simple way to remove fields from the form is to not actually remove the fields but to hide them instead.To do this you simply change the type of the field from type="input" to type="hidden". If you then remove the label associated with the field etc there will be nothing visible on the page to show that the field is there any more. By still having the id in the field means that all of the JavaScript referencing the field will still operate on the field correctly and so you will not have the order sublissions failing due to script errors. You may need to change the value attribute of the field so as to provide a value that satisfies the validation. By doing this you have removed the field from appearing on the web page without needing to make complicated changes everywhere in the JavaScript that the field is referenced (and having everything mess up if you miss one).

The only other change you need to make is if you don't want the hidden field to be sent with the rest of the data in the form when the form is submitted. If you are the only one who will be receiving the form then it isn't going to matter but if you are sending the form to someone else then you may want to remove these hidden fields from what is sent to the server when the form is submitted as well. Doing that is also simple since all that you need to do to achieve that is to remove the name addtributes from those fields (or if you don't want to remove the name attributes then change all the names of those fields to the same name as the submit button uses).

By using hidden fields instead of deleting them completely from the HTML means that the JavaScript code in the shopping cart script will still be able to find and interact with all of the fields that it expects to find in the page without any changes to the JavaScript being needed.

Note that the option of removing or changing the field names will only work with the newer version of the script that reference the fields by their id rather than their name. You can't change the field names or remove the field names in the original version of the script.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate