spacer

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

home / web / dev / menus / submit

Conditional Submit

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

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

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
DiVitas's Mobile UC Now Available on the Latest Devices · Review: FON Fonera 2.0n · Chip Market Recovering From '08 Collapse

 



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

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