Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как повесить слушателя на сабмит (https://javascript.ru/forum/dom-window/81435-kak-povesit-slushatelya-na-sabmit.html)

grafillo 25.11.2020 16:40

Как повесить слушателя на сабмит
 
Нужно повесить слушателя на сабмит кнопку которая впринципе и не форма, как к ней обратиться чтобы получить данные этих трёх полей?


<div>
				<span class="wpcf7-form-control-wrap text-179"><input type="text" name="text-179" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Ваше Имя" /></span>
			</div>
<div>
				<span class="wpcf7-form-control-wrap tel-770"><input type="tel" name="tel-770" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="Ваш телефон" /></span>
			</div>
<div>
				<span class="wpcf7-form-control-wrap text-428"><input type="text" name="text-428" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="E-mail" /></span>
			</div>
<div>
				<input type="submit" value="Отправить" /></p></div>

voraa 25.11.2020 16:57

Можно задать атрибуты id каждому полю и кнопке
и обращаться document.getElementById('...')
К полям можно обращаться document.getElementsByName('...')[0] если больше нет элементов с такими именами.
А если это не форма, то type="submit" совсем не обязателен, Можно
<button type="button" id='but'>Отправить</button>
и вешать событие 'click'
document.getElementById('but').addEventListener('c lick', (ev) => {....})

grafillo 25.11.2020 17:27

просто я не могу менять код сайта, надо в данном коде както прослушать сабмит,
getElementsByName('text-179')[0].value - то есть получить значение поля текс будет выглядеть так правильно?

laimas 25.11.2020 17:34

grafillo,
уверены что это не форма?

voraa 25.11.2020 17:35

Да.
А на кнопку тогда вешать обработчик
document.querySelector('input[type=submit]').addEventListener(....)
Если на странице нет других <input type="submit">

А что и куда посылает этот submit, если это не форма?

grafillo 25.11.2020 17:38

я не вкусре что она отсылает и куда, но я вам код скинул же там нет тега форм, это сайт на вордпрессе

voraa 25.11.2020 17:41

Это код всей страницы?

grafillo 26.11.2020 09:45

нашёл див с классом в котором находится этот сабмит
<div class="form_free_block__wrap">

как обратиться к сабмиту через класс дива?

voraa 26.11.2020 10:33

document.querySelector('.form_free_block__wrap [type=submit]')

Для всех подобных ссылок на элементы, кроме
getElementById и getElementsByName
есть более универсальные
querySelector и querySelectorAll

Изучайте
https://developer.mozilla.org/ru/doc.../querySelector
https://developer.mozilla.org/ru/doc...erySelectorAll
https://developer.mozilla.org/ru/doc.../querySelector
https://developer.mozilla.org/ru/doc...erySelectorAll


Часовой пояс GMT +3, время: 00:47.