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:


<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>


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


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:


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

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


} 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


Bold numbers in ordered lists


Numbers in an ordered list made bold without having any extra HTML tags added: List item List item List item HTML / XHTML. Code: <ol> <li>List item</li> <li>List item</li> <li>List item</li> </ol> CSS. Code: ol {counter-reset: item;} ol li {display: block;} ol li:before {content: counter(item) ". "; counter-increment: item; font-weight: bold;} There is no obvious way at the moment to style only numbers marking ordered list items. A workaround is to use a CSS counter instead of the default automatic numbering of ordered lists. The way a CSS counter is started allows to style specifically the marking numbers. Like in the example, where numbers in an ordered list are styled bold. This method also lets to use other characters after the numbers - besides dots. Like a parenthesis / round bracket instead of a dot. Or handling of space between the number, punctuation mark and the content proper of list item. [ 1 ] As well as Netscape 9.0+. [ 2 ] As well as Netscape 9.0+.

Pure CSS responsive square


Responsive CSS square. No JavaScript / jQuery. Example:   HTML / XHTML. Code: <div class="square">&nbsp;</div> CSS. Code: .square {width: 10%; height: 0; padding-bottom: 10%;} /* Extra CSS, just styling the look: */ .square {background: #fd0;} Width: 10% makes the .square div to be 10% of the parent element's width. Height: 0 eliminates any height the element may have, letting padding-bottom: 10% to make it exactly equal to the width. So each time the width of the parent container is changed, the element's size gets recalculated. Based on the concept - CSS grid with responsive square cells: Square cell 1 Square cell 2 Square cell 3 Square cell 4 Square cell 5 Square cell 6 Square cell 7 Square cell 8 [ 1 ] As well as Netscape 6.01+, Mozilla 0.6+. [ 2 ] As well as Netscape 6.01+, Mozilla 0.6+.