Javascript формы обработка: Работа с Формами на JavaScript
Содержание
javascript — Обработка select в форме
Вопрос задан
Изменён
5 лет 7 месяцев назад
Просмотрен
105 раз
Доброго времени суток. Проблема такая, есть форма, в ней пункт «сколько детей». Он реализован через select и в нем 5 option (максимальное количество детей). Изначально value 0. Как реализовать чтобы если выбирался например value со значением 1, то рядом выползал еще один option, с выбором возраста ребенка? И в зависимости от количества детей появляется необходимое количество option с выбором их возраста. Еще как условие, optionы выбора возраста уже написаны и стилизованы, просто с display:none;, та что нужно чтобы появлялся определенный option(пусть привязка будет к классу или айдишнику). Я понимаю что это js, но не силен в нем.
КТо поскажет как сделать.
Вот блок того кода
fieldset.form-fieldset.ui-input.__fifth.form__border-bottom
p.reposing__text Сколько детей?
select#child-amount(name="reposing3").child-amount
option(value="0") 0
option(value="1") 1
option(value="2") 2
option(value="3") 3
option(value="4") 4
option(value="5") 5
.child__old
p.reposing__text-desc Их возраст
select#child-old1(name="childOld1").child-old
option(value="1") 1
option(value="2") 2
option(value="3") 3
option(value="4") 4
option(value="5") 5
option(value="5") 6
option(value="5") 7
option(value="5") 8
option(value="5") 9
option(value="5") 10
option(value="5") 11
option(value="5") 12
option(value="5") 13
option(value="5") 14
option(value="5") 15
option(value="5") 16
option(value="5") 17
select#child-old2(name="childOld2").
child-old
option(value="1") 1
option(value="2") 2
option(value="3") 3
option(value="4") 4
option(value="5") 5
option(value="5") 6
option(value="5") 7
option(value="5") 8
option(value="5") 9
option(value="5") 10
option(value="5") 11
option(value="5") 12
option(value="5") 13
option(value="5") 14
option(value="5") 15
option(value="5") 16
option(value="5") 17
select#child-old3(name="childOld3").child-old
option(value="1") 1
option(value="2") 2
option(value="3") 3
option(value="4") 4
option(value="5") 5
option(value="5") 6
option(value="5") 7
option(value="5") 8
option(value="5") 9
option(value="5") 10
option(value="5") 11
option(value="5") 12
option(value="5") 13
option(value="5") 14
option(value="5") 15
option(value="5") 16
option(value="5") 17
select#child-old4(name="childOld4"). child-old.child-old_right
option(value="1") 1
option(value="2") 2
option(value="3") 3
option(value="4") 4
option(value="5") 5
option(value="5") 6
option(value="5") 7
option(value="5") 8
option(value="5") 9
option(value="5") 10
option(value="5") 11
option(value="5") 12
option(value="5") 13
option(value="5") 14
option(value="5") 15
option(value="5") 16
option(value="5") 17
select#child-old5(name="childOld5").child-old.child-old_right
option(value="1") 1
option(value="2") 2
option(value="3") 3
option(value="4") 4
option(value="5") 5
option(value="5") 6
option(value="5") 7
option(value="5") 8
option(value="5") 9
option(value="5") 10
option(value="5") 11
option(value="5") 12
option(value="5") 13
option(value="5") 14
option(value="5") 15
option(value="5") 16
option(value="5") 17
child-old
option(value="1") 1
option(value="2") 2
option(value="3") 3
option(value="4") 4
option(value="5") 5
option(value="5") 6
option(value="5") 7
option(value="5") 8
option(value="5") 9
option(value="5") 10
option(value="5") 11
option(value="5") 12
option(value="5") 13
option(value="5") 14
option(value="5") 15
option(value="5") 16
option(value="5") 17
select#child-old3(name="childOld3").child-old
option(value="1") 1
option(value="2") 2
option(value="3") 3
option(value="4") 4
option(value="5") 5
option(value="5") 6
option(value="5") 7
option(value="5") 8
option(value="5") 9
option(value="5") 10
option(value="5") 11
option(value="5") 12
option(value="5") 13
option(value="5") 14
option(value="5") 15
option(value="5") 16
option(value="5") 17
select#child-old4(name="childOld4").
child-old.child-old_right
option(value="1") 1
option(value="2") 2
option(value="3") 3
option(value="4") 4
option(value="5") 5
option(value="5") 6
option(value="5") 7
option(value="5") 8
option(value="5") 9
option(value="5") 10
option(value="5") 11
option(value="5") 12
option(value="5") 13
option(value="5") 14
option(value="5") 15
option(value="5") 16
option(value="5") 17
select#child-old5(name="childOld5").child-old.child-old_right
option(value="1") 1
option(value="2") 2
option(value="3") 3
option(value="4") 4
option(value="5") 5
option(value="5") 6
option(value="5") 7
option(value="5") 8
option(value="5") 9
option(value="5") 10
option(value="5") 11
option(value="5") 12
option(value="5") 13
option(value="5") 14
option(value="5") 15
option(value="5") 16
option(value="5") 17
- javascript
- css
- форма
4
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <input> является одним из разносторонних
элементов формы и позволяет создавать разные элементы интерфейса и обеспечить
взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей
и флажков. Хотя элемент <input> не требуется
помещать внутрь контейнера <form>, определяющего
форму, но если введенные пользователем данные должны быть отправлены на сервер,
где их обрабатывает серверная программа, то указывать <form> обязательно.
То же самое обстоит и в случае обработки данных с помощью клиентских
приложений, например, скриптов на языке JavaScript.
Основной атрибут тега <input>, определяющий
вид элемента — type. Он позволяет задавать
следующие элементы формы: текстовое поле (text),
поле с паролем (password), переключатель (radio),
флажок (checkbox), скрытое поле (hidden),
кнопка (button), кнопка для отправки формы (submit),
кнопка для очистки формы (reset), поле для отправки
файла (file) и кнопка с изображением (image).
Для каждого элемента существует свой список атрибутов, которые определяют его
вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.
Синтаксис
| HTML | <input атрибуты> |
| XHTML | <input атрибуты /> |
Атрибуты
- accept
- Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
- accesskey
- Переход к элементу с помощью комбинации клавиш.
- align
- Определяет выравнивание изображения.
- alt
- Альтернативный текст для кнопки с изображением.
- autocomplete
- Включает или отключает автозаполнение.
- autofocus
- Устанавливает фокус в поле формы.
- border
- Толщина рамки вокруг изображения.
- checked
- Предварительно активированный переключатель или флажок.
- disabled
- Блокирует доступ и изменение элемента.
- form
- Связывает поле с формой по её идентификатору.
- formaction
- Определяет адрес обработчика формы.
- formenctype
- Устанавливает способ кодирования данных формы при их отправке на сервер.
- formmethod
- Сообщает браузеру каким методом следует передавать данные формы на сервер.
- formnovalidate
- Отменяет встроенную проверку данных на корректность.
- formtarget
- Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.
- list
- Указывает на список вариантов, которые можно выбирать при вводе текста.
- max
- Верхнее значение для ввода числа или даты.
- maxlength
- Максимальное количество символов разрешенных в тексте.
- min
- Нижнее значение для ввода числа или даты.
- multiple
- Позволяет загрузить несколько файлов одновременно.
- name
- Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
- pattern
- Устанавливает шаблон ввода.
- placeholder
- Выводит подсказывающий текст.
- readonly
- Устанавливает, что поле не может изменяться пользователем.
- required
- Обязательное для заполнения поле.
- size
- Ширина текстового поля.
- src
- Адрес графического файла для поля с изображением.
- step
- Шаг приращения для числовых полей.
- tabindex
- Определяет порядок перехода между элементами с помощью клавиши Tab.
- type
- Сообщает браузеру, к какому типу относится элемент формы.
- value
- Значение элемента.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Не требуется.
Пример
HTML5IECrOpSaFx6
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Тег INPUT</title> </head> <body> <form name="test" method="post" action="input1.php"> <p><b>Ваше имя:</b><br> <input type="text" size="40"> </p> <p><b>Каким браузером в основном пользуетесь:</b><Br> <input type="radio" name="browser" value="ie"> Internet Explorer<Br> <input type="radio" name="browser" value="opera"> Opera<Br> <input type="radio" name="browser" value="firefox"> Firefox<Br> </p> <p>Комментарий<Br> <textarea name="comment" cols="40" rows="3"></textarea></p> <p><input type="submit" value="Отправить"> <input type="reset" value="Очистить"></p> </form> </body> </html>
Результат данного примера показан на рис.
1.
Рис. 1. Вид элементов формы в браузере
Получение данных: Построение форм | Next.js
Веб-форма имеет отношение клиент-сервер . Они используются для отправки данных, обрабатываемых веб-сервером, для обработки и хранения. Сама форма — это клиент, а сервер — это любой механизм хранения, который можно использовать для хранения, извлечения и отправки данных при необходимости.
Это руководство научит вас создавать веб-формы с помощью Next.js.
HTML-формы создаются с использованием тега
Внешний вид выглядит следующим образом:
Тег HTML
Поле формы пароля должно содержать только цифры (от 0 до 9), строчные буквы (от a до z) и должно быть не более 15 символов в длину. Никакие другие символы (#, $, & и т. д.) не допускаются. Правило в RegEx записывается как [a-z0-9]{1,15} .
Чтобы узнать больше о HTML-формах, ознакомьтесь с веб-документами MDN.
В следующем разделе вы будете создавать формы в React с помощью Next.js.
Создайте новое приложение Next.js. Вы можете использовать приложение create-next-app для быстрого старта. В терминале командной строки выполните следующее:
npx create-next-app
Ответьте на вопросы, чтобы создать свой проект, и дайте ему имя, в этом примере используется next-forms . Далее cd в этот каталог и запустите команду npm run dev или yarn dev , чтобы запустить сервер разработки.
Откройте URL-адрес, напечатанный в терминале, чтобы убедиться, что ваше приложение работает успешно.
И клиент, и сервер будут созданы с использованием Next.js. Для серверной части создайте конечную точку API, куда вы будете отправлять данные формы.
Next.js предлагает файловую систему маршрутизации, основанную на концепции страниц.
Любой файл внутри папки pages/api сопоставляется с /api/* и будет рассматриваться как конечная точка API, а не как страница. Эта конечная точка API будет только на стороне сервера.
Перейдите к pages/api , создайте файл с именем form.js и вставьте этот код, написанный в Node.js:
обработчик функции экспорта по умолчанию (req, res) {
// Получить данные, представленные в теле запроса.
константное тело = требуемое тело
// Необязательное ведение журнала для просмотра ответов
// в командной строке, где запущено приложение next.js.
console.log('тело:', тело)
// Предложение Guard проверяет имя и фамилию,
// и возвращает раньше, если они не найдены
если (!body.first || !body.last) {
// Отправляет код ошибки неверного HTTP-запроса
return res.status(400).json({ data: 'Имя или фамилия не найдены' })
}
// Имя найдено.
// Отправляет HTTP-код успеха
res.status(200).json({данные: `${body. first} ${body.last}` })
} 
first} ${body.last}` })
} Эта функция обработчика формы получит запрос req от клиента (т.е. отправленные данные формы). А взамен он отправит ответ res в формате JSON, в котором будет и имя, и фамилия. Вы можете получить доступ к этой конечной точке API по адресу http://localhost:3000/api/form или заменить URL-адрес локального хоста фактическим развертыванием Vercel при развертывании.
Кроме того, вы также можете подключить этот API к базе данных, такой как MongoDB или Google Sheets. Таким образом, отправленные вами данные формы будут надежно сохранены для последующего использования. Для этого руководства база данных не используется. Вместо этого те же данные возвращаются пользователю для демонстрации того, как это делается.
Отправка формы без JavaScript
Теперь вы можете использовать относительную конечную точку /api/form внутри атрибута action формы.
Вы отправляете данные формы на сервер, когда форма отправляется с помощью HTTP-метода POST (который используется для отправки данных).