Обработка значений из <FORM>
Приветствую!
На странице сайта пользователь вводит несколько значений разного типа. Это INPUT (type="number", type="date"), CHECKBOX и RADIO. Всего 15 различных значений. В коде HTML всё находится внутри одного тега FORM. Передать все значения для обработки в JS одним действием не получается. Не хватает знаний и опыта. Прошу совета. Заранее благодарен. |
Передайте в скрипт саму форму, а дальше скрипт вытащит из нее нужные поля. Можно даже не передавать форму, а скрипт сам получит её из DOM.
Пример 1: <form onsubmit="callFunction(this);"> <!-- some fields --> </form> <script>function callFunction(form) { const titleField = form.querySelector('[name="title"]'); }</script> Пример 2: <form id="special-form"> <!-- some fields --> </form> <script> const form = document.querySelector('#special-form'); form.addEventListener('submit', function (event) { const titleField = this.querySelector('[name="title"]'); }); </script> |
Спасибо! Но момент передачи нужен - пользователь после введения всех значений жмет на кнопку "Получить документ" (input type="button"). И после этого этого значения передаются в JS и там обрабатываются.
|
wrbanker, измените тип кнопки с button на submit и слушайте событие формы submit (пример 2).
|
Приветствую! На несколько недель пришлось отойти от темы, а по возвращению понял, что почти ничего не понял. Прочёл кучу документации, но на практике мало что получается.
Ниже код. Вот как раз из такого мне и надо, по нажатию на кнопку "Обработать", вытащить все значения, присвоить эти значения переменным и дальше с этими переменными работать. Допускаю, что в самом HTML-коде чего-то не хватает. Я в начале пути... <form class="main-form" id="main-form"> Число: <input class="input-number" type="number" name="main-number" id="main-number"> Дата: <input class="input-date" type="date" name="main-date" id="main-date"> <ul> <li><input type="radio" name="radio-button" value="r-first" id="radio-first" class="radio-button"> Радио 1</li> <li><input type="radio" name="radio-button" value="r-second" id="radio-second" class="radio-button"> Радио 2</li> </ul> <ul> <li><input type="checkbox" name="chb-first" id="checkbox-first"> Чекбокс 1</li> <li><input type="checkbox" name="chb-second" id="checkbox-second"> Чекбокс 2</li> </ul> <input type="submit" value="Обработать"> </form> |
form.elements - вернет коллекцию всех элементов формы, обратиться конкретно каждому элементу в ней можно по индексу или по имени.
<form> <input name="text" value="text" /> <input type="radio" name="radio" value="1" /> <input type="radio" name="radio" value="2" checked="" /> <input type="radio" name="radio" value="3" /> <input type="checkbox" name="checkbox1" value="1" /> <input type="checkbox" name="checkbox2" value="2" checked="" /> </form> <script> var elm = document.querySelector('form').elements; alert(elm.text.value + '\n' + elm.radio.value + '\n' + elm.checkbox1.value) </script> Здесь получаются значения элементов формы, как обращение к ним по имени, причем значение группы кнопок (radio) будет равно значению выбранной кнопки, то есть можно получить сразу (radioNodeList.value). А вот если нужно получить значения выбранных флажков, то нужно сначала определить их. |
Спасибо. Сегодня попробую. А если всё-таки использовать addEventListener?
|
Цитата:
|
Цитата:
main-number=50&main-date=2020-01-11&radio-button=r-first&chb-first=on&chb-second=on |
Цитата:
Это main-number=50&main-date=2020-01-11&radio-button= .... отправляемые данные, чего в них копаться? Вам уже трижды сказали как получить поля и работать с ними. |
Часовой пояс GMT +3, время: 18:44. |