При создании пользовательских форм с настройками, иногда бывает удобно делать автоматическую отправку формы, как только пользователь выберет новое значение у поля. Наглядно это можно продемонстрировать с помощью элемента select. Для примера воспользуемся простейшей формой с полем со списком:
<form method="get" id="MyForm">
Значение
<select name="val">
<option value="1">Значение 1</option>
<option value="2">Значение 2</option>
<option value="3">Значение 3</option>
</select>
</form>На странице это будет выглядеть так:
Понятно, что для стандартной работы такой формы не хватает кнопки submit, по нажатию на которую и должна выполнятся отправка формы на сервер. Но, нам ведь и нужно выполнить эту процедуру без дополнительных кнопок, только по выбору значения в поле со списком. И на помощь нам приходит JavaScript.
У любых компонентов на форме есть различные события, в ответ на которые мы можем ставить свои скриптовые обработчики. В данном случае нам нужно событие обновления значения в поле со списком onchange. На это событие у нас должен выполняться код отправки формы:
document.getElementById('MyForm').submit()Здесь, document.getElementById('MyForm') – позволяет выбрать объект (форму) по ее ID.
submit() – команда, отправляющая форму аналогично кнопке submit на форме.
В итоге, для решения задачи, собираем все вместе:
<form method="get" id="MyForm">
Значение
<select name="val" onchange="document.getElementById('MyForm').submit()">
<option value="1">Значение 1</option>
<option value="2">Значение 2</option>
<option value="3">Значение 3</option>
</select>
</form>И получаем форму, которая будет отправляться выбором в поле со списком значения:
Так как выбран метод отправки формы GET адресной строке браузера можно видеть как при этом меняется url.
В комментариях запрещено публиковать рекламные материалы. Все сообщения оправляются на модерацию и будут опубликованы, если не нарушают правил сайта после проверки.