Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.08.2020, 18:14
Интересующийся
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 28

Обработка значений из <FORM>
Приветствую!
На странице сайта пользователь вводит несколько значений разного типа. Это INPUT (type="number", type="date"), CHECKBOX и RADIO. Всего 15 различных значений. В коде HTML всё находится внутри одного тега FORM. Передать все значения для обработки в JS одним действием не получается. Не хватает знаний и опыта.
Прошу совета. Заранее благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 06.08.2020, 18:21
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,320

Передайте в скрипт саму форму, а дальше скрипт вытащит из нее нужные поля. Можно даже не передавать форму, а скрипт сам получит её из 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>
Ответить с цитированием
  #3 (permalink)  
Старый 06.08.2020, 18:31
Интересующийся
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 28

Спасибо! Но момент передачи нужен - пользователь после введения всех значений жмет на кнопку "Получить документ" (input type="button"). И после этого этого значения передаются в JS и там обрабатываются.
Ответить с цитированием
  #4 (permalink)  
Старый 06.08.2020, 18:49
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,320

wrbanker, измените тип кнопки с button на submit и слушайте событие формы submit (пример 2).
Ответить с цитированием
  #5 (permalink)  
Старый 30.09.2020, 18:34
Интересующийся
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 28

Приветствую! На несколько недель пришлось отойти от темы, а по возвращению понял, что почти ничего не понял. Прочёл кучу документации, но на практике мало что получается.
Ниже код. Вот как раз из такого мне и надо, по нажатию на кнопку "Обработать", вытащить все значения, присвоить эти значения переменным и дальше с этими переменными работать. Допускаю, что в самом 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>
Ответить с цитированием
  #6 (permalink)  
Старый 30.09.2020, 20:20
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,736

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). А вот если нужно получить значения выбранных флажков, то нужно сначала определить их.

Последний раз редактировалось laimas, 30.09.2020 в 20:55.
Ответить с цитированием
  #7 (permalink)  
Старый 01.10.2020, 10:07
Интересующийся
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 28

Спасибо. Сегодня попробую. А если всё-таки использовать addEventListener?
Ответить с цитированием
  #8 (permalink)  
Старый 01.10.2020, 10:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,736

Сообщение от wrbanker
А если всё-таки использовать addEventListener?
Вам что нужно? Я же в примере не использую никаких обработчиков, просто получаю форму, а у нее ее элементы.
Ответить с цитированием
  #9 (permalink)  
Старый 01.10.2020, 13:22
Интересующийся
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 28

Сообщение от laimas Посмотреть сообщение
Вам что нужно? Я же в примере не использую никаких обработчиков, просто получаю форму, а у нее ее элементы.
Мне нужно, чтобы при клике на input (submit) JS отловил все значения из формы и присвоил эти значения переменным. В адресной строке я вижу пары имя=значение, но все мои неуклюжие попытки их поймать ничем не увенчались...

main-number=50&main-date=2020-01-11&radio-button=r-first&chb-first=on&chb-second=on
Ответить с цитированием
  #10 (permalink)  
Старый 01.10.2020, 13:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,736

Сообщение от wrbanker
Мне нужно, чтобы при клике на input (submit)
А это что не событие? А установка обработчика его это либо addEventListener, либо по иному если JQ.

Это main-number=50&main-date=2020-01-11&radio-button= .... отправляемые данные, чего в них копаться? Вам уже трижды сказали как получить поля и работать с ними.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подключение случайных значений Nyam Общие вопросы Javascript 13 26.04.2014 20:46
Суммирование значений по всем динамически добавленным полям Joliat Общие вопросы Javascript 2 12.02.2014 15:01
как записать <form> с отправкой .. если есть уже <form> с другим обработчиком Arfey Серверные языки и технологии 9 01.06.2010 16:31
Переодическое обновление значений для графика, функция для обновления значений yupa87 Общие вопросы Javascript 0 09.07.2009 14:48
Обработка значений select multiple разум Я не знаю javascript 7 08.06.2009 14:09