spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / web / dev / menus / submit

Conditional Submit

Developer News
Google Chrome Playing Catch-Up on Extensions
Open Solutions Alliance Gets New Leadership
Red Hat Spacewalk Expands Linux Management

Universal Related Popup Menus

In order to meet our goal of universality we had to find a way to make a dual function submit button. We knew we needed to call a redirect CGI script with a matching submit button for non-JavaScript enabled browsers, but how could we prevent JavaScript-enabled browsers from calling this script?

JavaScript: The Definitive Guide says that the onClick event handler can not stop a submission for Netscape 2:

The Submit button has the special function of submitting a form to the server. This event handler may add any additional functionality to the Submit button. In Navigator 2.0, there is no way for this onClick() event handler to cancel the submit action or to prevent the form from being submitted; use the Form.onsubmit() event handler to prevent input validation and to cancel form submission if necessary.

In Navigator 3.0, the onClick() event handler may return false to prevent the Submit object from submitting the form. - page 536

The way to cancel a submit button is through the onSubmit() event handler.

...if the data is not valid, the onsubmit() handler may cancel form submission by returning the value false. - page 410.

    <FORM ... onSubmit="return false">
    

Just return "false" to the onSubmit event handler and it will stop the submission. Since this is JavaScript code this construction automatically bypasses the submit CGI script for JavaScript-enabled browsers and calls the redirect CGI for non-JavaScript enabled browsers, as they ignore the onSubmit. The final code looks like this:

    <FORM NAME="f1" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false">
    <SMALL>Pick a topic:</SMALL><BR>
    <SELECT NAME="m1" onChange="jmp(this.form,0)">
    <OPTION VALUE="/3d/">3D Animation
    <OPTION VALUE="/dlab/">Design
    ...
    </SELECT><INPUT TYPE=SUBMIT VALUE="Go" onClick ="jmp(this.form,0)">
    </FORM>

For JavaScript browsers clicking on the submit button triggers the jmp() function and for non-JavaScript browsers it calls the redirect.cgi script. A dual function submit button!

Comments are welcome

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags

 



Created: Mar. 10, 1997
Revised: Feb. 12, 1999

URL: http://webreference.com/dev/menus/submit.html