KOMPX.COM or COMPMISCELLANEA.COM   

JavaScript submit form

Обработка формы с помощью JavaScript. Выпадающий список (form + select + несколько option) обрабатывается без использования кнопки submit. Пример:

HTML код:


<form action="action.php" method="post">
	<select name="page" required="required" onchange="this.form.submit()">
		<option value="" selected="selected" disabled="disabled">Выбрать страницу</option>
		<option value="os\dos.htm">DOS</option>
		<option value="os\linux.htm">Linux</option>
		<option value="os\windows.htm">Windows</option>
	</select>
	<noscript><input type="submit" value="Submit" /></noscript>
</form>

Когда в выпадающем списке выбирается одна из опций, состояние формы изменяется. Так что происходит событие onchange и запускается JavaScript в onchange: процесс обработки формы и передачи данных инициируется скриптом, а не кликом на кнопку submit, которая отсутствует.

Для работы с action формы назначается тот или иной скрипт, выполняемый на сервере. Скрипт принимает то, что отсылает форма и обрабатывает принятое. В данном примере используется PHP скрипт в action.php:

PHP код:


<?php
if (isset($_POST["page"])) {
	header("Location: $_POST[page]");
	exit;
} else {
	echo "No options selected";
}

$_POST представляет собой массив из переменных, передаваемых данному скрипту методом HTTP POST. Так что $_POST[page] содержит значение атрибута value в одном из option внутри select. То есть, URL. Он передается от формы к PHP скрипту, а скрипт перенаправляет браузер на выбранный URL / страницу.

HTML код <noscript><input type="submit" value="Submit" /></noscript> присутствует в форме на случай, если JavaScript отключен. Тогда появится кнопка submit и форма все равно останется пригодной к использованию.

Поддержка в браузерах
Windows
Internet Explorer 4.01+
Firefox 1.0+
Google Chrome
Opera 3.0+
Safari 3.1+
SeaMonkey 1.0+
Mozilla 0.6+
Netscape 3.04+
Linux
Firefox 1.0+
Google Chrome / Chromium
Opera 5.0+
SeaMonkey 1.0+
Mozilla 0.6+
Netscape 3.04+
Ещё