Kompx.com or Compmiscellanea.com

JavaScript form submit

Windows : Internet Explorer 4.01+, Firefox 1.0+, Google Chrome, Opera 3.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [ 2 ].

Submitting a form using JavaScript. A dropdown list (form + select + multiple options) is processed without any submit button. Example:

HTML / XHTML. Code:

<form action="action.php" method="post">

<select name="page" required="required" onchange="this.form.submit()">

<option value="" selected="selected" disabled="disabled"> --- Select a page --- </option>

<option value="http://www.kompx.com/en/os/linux-1.htm">Linux</option>

<option value="http://www.kompx.com/en/os/windows-1.htm">Windows</option>

<option value="http://www.kompx.com/en/os/dos-1.htm">DOS</option>

</select>

<noscript><input type="submit" value="Submit" /></noscript>

</form>

When an option has been chosen from the dropdown list, the form's state is changed. So the onchange event occurs and JavaScript code in onchange is executed: the process of the form submission in started by the script, not by clicking submit button which is absent.

Some server-side script [ 3 ] is meant then to handle the form action. The script is supposed to get what the form sends and have it processed. A PHP script in action.php is used in the example:

<?php

if (isset($_POST["page"])) {

    header("Location: $_POST[page]");

    exit;

} else {

    echo "No options selected";

}

$_POST is an array of variables passed to the current script via the HTTP POST method. So $_POST[page] contains the content of the value attribute in a select option. That is, a URL. It is passed from form to PHP script and the script redirects browser to the URL / page selected.

HTML code of <noscript><input type="submit" value="Submit" /></noscript> is present in the form as a fallback in case JavaScript happens to be turned off. Then there is a submit button to appear and the form is usable anyway.


[ 1 ]

As well as Netscape 3.04+, Mozilla 0.6+.

[ 2 ]

As well as Netscape 3.04+, Mozilla 0.6+.

[ 3 ]

If a CMS is used, form action may be handled by some of its inbuilt means.


Aliosque subditos et thema

 

CSS for a range of elements

 

Styling a range of elements. Here from the 1st to the 3rd one - changing background color. Example:         HTML / XHTML. Code: <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> CSS. Code: div:nth-of-type(-n+3) {background: #f66;} /* Extra CSS, just styling the look: */ div {width: 100%; margin-top: 5px; background: #066;} Note: nth-child may also be used instead.

CSS. Target Firefox only

 

CSS targeting Firefox web browser only: This text is red in Firefox HTML / XHTML. Code: <p>This text is red in Firefox</p> CSS. Code: @-moz-document url-prefix() {p {color: #f00;}} Unlike the method of styling elements for Opera browser only, it is essentially a hack - since the rule originally is intended for a different purpose. But lack of support in browsers other than Firefox allows to isolate code for use by Firefox web browser only. [ 1 ] Other browsers with Gecko web browser engine, like SeaMonkey 1.0+ or older Netscape 9.0, also support the hack. [ 2 ] Various versions of Internet Explorer, Google Chrome, Opera, Safari react to the hack as they are meant to - these browsers ignore the whole code of the Firefox specific hack. [ 3 ] There is also one more browser where text gets red - ELinks, an advanced text-based web browser with some support for CSS.