Как изменить механизм формы опроса?

314

05 января 2018, 01:06

Есть следующая форма опроса. Как с помощью javascript сделать, чтобы при выборе/клике нужного ответа срабатывала кнопка "ответить" без ее нажатия?

<h1>Какой год наступил?</h1> 
<form method="post" name="vote"> 
 
<input id="vote_check0" name="vote_check" type="radio" value="0"> 
<label for="vote_check0"> 2018</label> 
 
<input id="vote_check1" name="vote_check" type="radio" value="1"> 
<label for="vote_check1"> 2019</label> 
 
<input id="vote_check2" name="vote_check" type="radio" value="2"> 
<label for="vote_check2"> 2020</label> 
 
<input type="hidden" name="vote_action" value="vote"> 
<button type="submit" onclick="doVote('vote'); return false;">Ответить</button> 
 
</form>

Answer 1

Находим нашу форму.
Находим все инпуты внутри нашей формы.
При изменении состояния инпутов - сабмитим форму.

const form = document.querySelector('form'); 
const inputs = document.querySelectorAll('input'); 
 
[...inputs].forEach(input =>  
	input.onchange = () => { 
		form.submit() 
	} 
)

<h1>Какой год наступил?</h1> 
<form method="post" name="vote"> 
 
<input id="vote_check0" name="vote_check" type="radio" value="0"> 
<label for="vote_check0"> 2018</label> 
 
<input id="vote_check1" name="vote_check" type="radio" value="1"> 
<label for="vote_check1"> 2019</label> 
 
<input id="vote_check2" name="vote_check" type="radio" value="2"> 
<label for="vote_check2"> 2020</label> 
 
<input type="hidden" name="vote_action" value="vote"> 
<button type="submit" onclick="doVote('vote'); return false;">Ответить</button> 
 
</form>

Answer 2

Можно сделать так :

Чистый JS:

Array.from(document.querySelectorAll('input[type="radio"]')).forEach(function(e) { 
  e.addEventListener('click', function() { 
    this.parentElement.querySelector('button[type="submit"]').click(); 
  }); 
});

<h1>Какой год наступил?</h1> 
<form method="post" name="vote"> 
 
  <input id="vote_check0" name="vote_check" type="radio" value="0"> 
  <label for="vote_check0"> 2018</label> 
 
  <input id="vote_check1" name="vote_check" type="radio" value="1"> 
  <label for="vote_check1"> 2019</label> 
 
  <input id="vote_check2" name="vote_check" type="radio" value="2"> 
  <label for="vote_check2"> 2020</label> 
 
  <input type="hidden" name="vote_action" value="vote"> 
  <button type="submit" onclick="console.log('here goes something'); return false;">Ответить</button> 
 
</form>

JQuery :

$('input[type="radio"]').on('click', function() { 
  $(this).parent().find('button[type="submit"]')[0].click(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h1>Какой год наступил?</h1> 
<form method="post" name="vote"> 
 
  <input id="vote_check0" name="vote_check" type="radio" value="0"> 
  <label for="vote_check0"> 2018</label> 
 
  <input id="vote_check1" name="vote_check" type="radio" value="1"> 
  <label for="vote_check1"> 2019</label> 
 
  <input id="vote_check2" name="vote_check" type="radio" value="2"> 
  <label for="vote_check2"> 2020</label> 
 
  <input type="hidden" name="vote_action" value="vote"> 
  <button type="submit" onclick="console.log('here goes something'); return false;">Ответить</button> 
 
</form>

Создание интернет-магазина кофе и чая в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Циклы, работа с массивами объектами?

214

javascript

Фильтрация массива?

256

javascript

react-dates закрыть календарь

Кто в курсе как можно в любой удобный момент закрыть DateRangePicker, к примеру после клика по добавленной кнопке внутрь календаря "Reset Dates" которая...

223

javascript

Сравнить 2 массива и вывести несовпадающие значения

есть 2 массива типа:

274