Form submit

After form validity is checked, script can perform other actions attached to form sending. Article describes how prevent multiple form submitting, how prevent sending form by force of Enter key, how to redirect form to other server script, how to submit form by JavaScript and multi submit buttons usage.

Chance of form control depends upon turned on JavaScript in browser. Turned off JavaScript disable form control and therefore some methods described here are applicable only on intranet, where you are sure, that scripting is up. Web applications without JavaScript though do not operate well, but there is nothing risky. Form without JavaScript may be somewhat hazard for database.

Multiple form submit

Double click on submit button, or repeated clicks from impatience, causes multiple form submitting. When form action on server is to create new record in database, then result of multiple form submit are two or even more the same new records.

Prevention of multiple form submit can be done by help of JavaScript either by auxiliary variable send, or by disabling submit button. Blocking is performed at the end of validation script, after positive validation of all form elements.

Note that form elements in status disabled are not submitted to server for processing. When more submit buttons are used in form, then disabling buttons is not good solution, because server gets no information by which button was form sent. In this situation auxiliary variable send is prefered solution.

<script type="text/javascript">
var send=1;                       // form send flag
function checkForm(myForm) {      // function form validation
  if(send==0) return false;       // was sent yet == no action
  ...                             // code form validation
  send = 0;                       // block next submit
  document.getElementById("subm").disabled = true;
  ...                             // another code eg. form redirect
  return true;
}
</script>

Key Enter and form submit

Original specification recommended to use Enter key just for simple form with one text field, in other words search form. Such possibility is surely welcomed. At present it is possible to use Enter key for submitting practically all form types. There are two ways of using Enter key.

1. By the help of TAB key, traverse over form elements, untill submit button is reached (now has focus) and then Enter key is pressed. This way of submitting form is correct and accordinig to premise.
2. Some text field in the middle of form is filled and by mistake Enter key is pressed, then submitting form is incorrect and unexpected. In such a situation can help only JavaScript.

Perhaps the most often quoted solution is disable Enter key on HTML form. Works reliably, but only when scripting is up.

When submit element in form is skipped (regardless of whether JavaScript is on / off) IE and FireFox do not submit the form even by Enter key. Unfortunately Opera and Safari submit the form. It is possible to exploit this situation, but only for IE and FF browsers.

Suppose we need to block Enter key and to force user switch on JavaScript. Then instead of submit element button type="button" is used. This button, when activated, calls validation script which at the end makes form submit.

Sometimes it is needed to submit the form by the help of JavaScript, or to change some form attributes. Following code example first obtain reference on form, subsequently change server script address and then executes form submit. These instructions can be part of validation script, which is started by event onclick, not by event onsubmit.  In case when form is submitted by script, event onsubmit already is not activated.

var myForm = document.forms[0];
myForm.action = "script3.asp";
myForm.submit();

More submit buttons

At database records editing often several possible actions (and submit buttons) are required. Typically these are actions cancel edit, save changes and delete. In such a case server script must get information which button was clicked in order to execute corresponding action.

When more buttons <input type="submit" .. />  are used, all buttons might be of the same name, but must use different value. Serever gets information on activated button by standard way name=value.

At using more buttons <input type="image" .. />  each button must have unique name. It is therefore, that name of image and click coordinates are submitted. Attribute value has meaning only in FireFox and Safari, where also standard form substring name=value is submitted.

Action after form is processed

Important part of application design is page flow, in other words which page are to be displayed after form submitting. For example in application Service Reports, after user submits form with new demand, server redirects him to home page of this application, where in list of all requirements he can see his own new demand in the first line. By this way user gets feedback that his demand was processed successfully.

Another time it is necessary to fill in forms in sequence as series of new records. Just so for example in application DownTime. After form with new downtime event is submitted, application returns the same (empty) form for enter next data. In such a case feedback about successful form processing is missing. Therefore helping page with successful processing message was inserted. Only after 2 seconds is user automatically redirected to blank form.

New version of DownTime application (not described in tour section) implemented new form type. In upper part of form is small bar graph with downtime events, containing few last days. After form submit, new record is dispayed in bar graph and desired feedback is realized. After all, it is possible to click on single bar graph to immediately edit desired record.

updated 27.12.2007

home page intranet tour articles, tips