Canceling a Form Submission | Learn How to Program Using Any Web Browser

As you can see in the previous example, Internet Explorer’s version of the event object can be used to cancel certain actions by returning a value of false (technically, setting the value of the event object’s returnValue property to false). This can be used to control important aspects of browser behavior, for example, to determine whether an HTML form should be submitted.

As an example, let’s use the returnValue property of an event object associated with a form submission to cancel the submission of a form. Typically, the submission of a form occurs when the user clicks the submit button provided by the form.

The way an HTML form is submitted to a Web server is controlled by the <FORM> tag. The <FORM> tag can include a number of attributes.

The value of the action attribute is a URL, normally that of the serverside program that’s executed when the form is submitted. In the example I’m about to show you, the value of the action attribute is simply an HTML page (actually the HTML page developed in the first example in this chapter). This is because I really don’t want anything to happen when the form is submitted.

As you may know, the method attribute determines how form values are passed to a server, but we’re really not going to get into that here. It has more to do with the specifics of Web programming than it does with understanding events.

In any case, in Internet Explorer, when a form is submitted, the form object fires an onSubmit event. In Internet Explorer, as you saw in the example in the previous section, you can use the properties of the event object when an event has been fired. Setting the value of the returnValue property of the event object to false simply cancels the submission of a form. This makes, at least in Internet Explorer, a form a pretty good place to perform chores such as validating the inputs to a form (meaning making as sure as possible that there are no required fields left empty and that they actually are phone numbers, email addresses, or whatever).

Advanced Note

Performing validation when possible in an onSubmit event on the client side is good because it takes a load off the server and because users don’t have to “hurry up and wait” for the server to tell them their input is “no good.” If you’ve ever submitted a form on the Web, waited for a response, and received a message back eventually along the lines of “You left the hoody-doody required field empty,” you’ll know exactly what I mean.

Listing 8-2 shows using the form onSubmit event in Internet Explorer to let the user cancel a form submission. Form submission is canceled by setting the event object returnValue property to false, as explained in the previous example. Using an <INPUT> tag of type=submit creates a submission button that submits the form when it’s clicked.

Listing 8.2: Using the onSubmit Event to Cancel a Form Submission (Internet Explorer)

 <HTML> <HEAD> <TITLE>On Close</TITLE> <SCRIPT>  function checkForm(e) {     if (!(window.confirm("Do you want to submit the form?")))       e.returnValue = false;   }  </SCRIPT> </HEAD> <BODY> <FORM name="theForm" action="0801.html"     onSubmit="checkForm(event);"> <INPUT type=submit> </FORM> </BODY> </HTML>

If you open the page shown in Listing 8-2 in Internet Explorer, you’ll see a single submit button.

Tip

With an input element of type submit, the browser supplies the text value for the button, usually something such as Submit Query.

Clicking the button causes the confirmation box shown in Figure 8-4 to open.

click to expand
Figure 8-4: The confirmation box asks the user whether they want to submit the form.

If the user clicks Cancel, the form isn’t submitted, whereas if the user clicks OK, the form is submitted.

Let’s set the bar a little higher and write code (and create an HTML page) that will work for both Internet Explorer and for the browsers without a returnValue property (meaning Mozilla and Netscape).

Doing this involves a couple of tricks. It turns out that in Mozilla/ Netscape, because we can’t use the ReturnValue property, our best bet is to create a faux input button that looks like a submit input element but isn’t. The onClick event of this button will mimic the functionality of the onSubmit event of a submit input element.

That’s the first trick. The second trick deals with the fact that the HTML form elements are themselves different for the different browsers. It’s not just that the program code differs. So, what this means is that the actual HTML for the form needs to be dynamically generated, depending on the browser that’s opening the page. This is done using the document.write method.

The actual script that submits (or doesn’t submit) the form is pretty simple. You’ve already seen it for Internet Explorer. Here it is expanded to include Netzilla as well:

 function checkForm(e) {     if (Netscape.appName == "Microsoft Internet Explorer") {        if (!(window.confirm("Do you want to submit the form?")))           e.returnValue = false;     }     else {        if (window.confirm("Do you want to submit the form?"))           document.theForm.submit();     }  }

The Mozscape branch of this conditional simply uses the form’s submit method (rather than the properties of the event object) to submit the form should the user so choose.

Next, here’s the code that dynamically generates the HTML form for Internet Explorer:

 ...  if (Netscape.appName == "Microsoft Internet Explorer") {     document.write("<");     document.write("FORM name='theForm' action='0801.html'        onSubmit='checkForm(event);'");     document.write("> <");     document.write("INPUT type=submit");     document.write("> <");     document.write("/FORM");     document.write(">");  }  ...

Finally, here’s the code that dynamically generates the HTML form for Netzilla:

 ...  else {     document.write("<");     document.write("FORM name='theForm' action='0801.html'");     document.write("> <");     document.write("INPUT type=button name='theButton' value='SUBMIT QUERY'        onClick='checkForm();'");     document.write("> <");     document.write("/FORM");     document.write(">");  }  ...

You can put these snippets together in a complete HTML page as shown in Listing 8-3. If you open the page shown in Listing 8-3 in a Mozscape browser and click the Submit Query button, a confirmation box will open (shown in Netscape in Figure 8-5).

Listing 8.3: Canceling a “Form” Submission (All Browsers)

 <HTML> <HEAD> <TITLE>On Close</TITLE> </HEAD> <BODY> <SCRIPT>  function checkForm(e) {     if (Netscape.appName == "Microsoft Internet Explorer") {        if (!(window.confirm("Do you want to submit the form?")))           e.returnValue = false;     }     else {        if (window.confirm("Do you want to submit the form?"))           document.theForm.submit();     }  }  if (Netscape.appName == "Microsoft Internet Explorer") {     document.write("<");     document.write("FORM name='theForm' action='0801.html'        onSubmit='checkForm(event);'");     document.write("> <");     document.write("INPUT type=submit");     document.write("> <");     document.write("/FORM");     document.write(">");  }  else {     document.write("<");     document.write("FORM name='theForm' action='0801.html'");     document.write("> <");     document.write("INPUT type=button name='theButton' value='SUBMIT QUERY'        onClick='checkForm();'");     document.write("> <");     document.write("/FORM");     document.write(">");  }  </SCRIPT> </BODY> </HTML>

click to expand
Figure 8-5: The cross-browser version of the application uses a button onClick event as a “faux” form onSubmit event.

Clicking Cancel cancels the form submission, and clicking OK causes the action specified in the form to take place (the page 0801.html, the first example in this chapter, is shown opened in Figure 8-6).

click to expand
Figure 8-6: The action specified in the form tag takes place when the user clicks OK.

Tip

Once again, the Netscape/Mozilla version with its faux submit button would also work for Internet Explorer. But then I wouldn’t get to show you the form onSubmit button and the very useful returnValue property of the event object.