Space Base Space Base
+7 928 008-80-89
ru
  • en
  • es
  • Главная
  • Услуги
  • Портфолио
  • Библиотека
  • Контакты
  • Главная
  • Услуги
  • Портфолио
  • Библиотека
  • Контакты
  1. Библиотека
  2. HTML, CSS, jQuery
  3. Перезагрузка и обновление страницы выбором в select
logo

Перезагрузка и обновление страницы выбором в select

05.02.2015

При создании пользовательских форм с настройками, иногда бывает удобно делать автоматическую отправку формы, как только пользователь выберет новое значение у поля. Наглядно это можно продемонстрировать с помощью элемента 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.

Другие материалы:

Переключение radio кнопки и checkbox нажатием на подпись в HTML


Установить, снять галочку, узнать состояние CheckBox в jQuery


Отключение авто-заполнения в текстовых полях формы


Написать комментарий

Комментарии

В комментариях запрещено публиковать рекламные материалы. Все сообщения оправляются на модерацию и будут опубликованы, если не нарушают правил сайта после проверки.


коммент.

Разработка сайтов

Корпоративный сайт
Интернет-магазин
Лендинг - одностраничный сайт
Сайт-визитка
Сайт-портфолио

Проектирование

Прототип, UX-дизайн

Дизайн

UI-дизайн
Логотип

+54 911 2801-4950

info@space-base.net
+7 928 008-80-89

Web-сайты для успешного бизнеса

Web-сайты для успешного бизнеса

Главная Услуги Портфолио События Библиотека Контакты
+7 928 008-80-89 Меню
Политика в отношении обработки персональных данных © Copyright 2014 - | Space-Base

Лучшее время начать свой проект - Сейчас!

Выбраны опции:

Отправить сообщение на:

Telegram WhatsApp

Отправляя сообщение, вы даете свое согласие на
обработку песональных данных