Submitting Forms

There is more than one way to submit a form. The most common way that people submit forms is to click on the submit button that is within the form. It is also possible though to submit the form simply by pressing the enter key on your keyboard when a field in the form has the focus. It is because the form can be submitted without clicking on the submit button that any JavaScript validation needs to be attached to the submit event on the form and not on the click event of the button as only then will it be run when the form is submitted via the keyboard.

The default action that is performed when the submit button is clicked or the enter key is pressed is to submit the form to the server. If your JavaScript determines that the form isn't valid and so you don't want that default action to happen then you would call preventDefault() to prevent it. This call works the same way with modern event listeners as returning false did with the old style event handlers.

There are a number of different ways to provide a submit button within a form. The most common is <input type="submit"> which if given a name will also pass the value of the button in that named field in the form. This would allow you to set up multiple submit buttons with different values that can be used to determine which of the buttons was used to submit the form. The problem is if the form is submitted by pressing the enter key rather than one of the submit buttons.

A second way of creating a submit button is to use <input type="image"> which displays an image as the submit button. Where this type of button is used there is no text value to pass as a part of the form. Instead the x and y coordinates of where in the image the click occurred are passed. If the form is submitted without clicking on the image then both x and y are set to zero.

The third way of submitting a form is to use a <button></button> which allows you to define the content of the button using HTML. The default type for a button tag inside a form is submit and so you only need to specify the type if you want to use a button inside a form for a purpose other than submitting the form (the default for a button that is outside of a form is type="button" as there is no form to be submitted in that situation).

In most instances you will not need to give your submit button a name. Including a hidden field in a form and testing for its presence in order to determine whether the form was submitted or not is more reliable since the submit button's value may not be passed if the form is submitted without clicking the button. Also there are some browsers that pollute the global namespace with form field names where the most obvious name to give your submit button can interfere with the functionality for actually submitting the form.

Another consideration when it comes to submitting the form is that any form fields which are flagged as "disabled" at the time the form is submitted will not have their values sent to the server while those flagged as "readonly" will be sent. When you have form fields where you want to display the value but not allow the person filling out the form to change it you should select the appropriate one of these two values to apply depending on whether the field is to be submitted or not. If you want a field to be submitted but appear disabled then you should style readonly fields so that they look the same as disabled fields.

The method attribute on the form tag identifies the purpose of the form. If you specify method="GET" you are advising the server that this form is intended for retrieving data and that the data is not being updated on the server. This tells the browser that it is allowed to cache the result returned from a given call so that if the same call is made again the result can be displayed from the cache without needing to revisit the server. Using method="POST" indicates that the form is sending information to update something on the server and therefore sending the same request a second time will not necessarily return the same result. The result cannot therefore be cached. One example of this would be if the form is going to insert data into a database where submitting the same data a second time should result in a duplicate error.

If you don't want the form to submit to the server at all because it is going to be processed only with JavaScript then the best option is to generate the form using JavaScript so that anyone without JavaScript will not be presented with a broken form. As it is always possible to submit a form to the server by pressing the enter key, you will always need to use preventDefault() on the submit event to prevent the form being submitted. If you make that the only code attached to the submit event then you can prevent anyone with JavaScript enabled by submitting a form using the enter key. You could then use either a <input type="button"> or <button type="button"></button> and attach your JavaScript form processing to that by listening for a click event. Pressing the enter key while the button has the focus will trigger the click event on the button as well as the submit event on the form.

When giving names to your form fields you need to consider the server side language you will be using to process the form. While most .net languages will treat multiple fields with the same name as an array on the server, PHP will only do that if you end the names with [] to indicate that they are an array. Where multiple fields with the same name that doesn't have [] on the end are sent to PHP only the last field with that name will be processed. As checkboxes only get sent if they are checked this allows you to simplify your PHP processing of checkboxes by preceding them with a hidden field using the same name and the value you want passed when the checkbox isn't checked.

When creating your form you should make sure that all of the form fields are correctly enclosed within the form element. The only form field that is allowed to appear outside of a form is a <button> which then needs to have JavaScript attached to it in order for it to do anything at all.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow