2

Есть следующая форма опроса. Как с помощью 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>

3
  • Попробуйте воспользоваться OnClick.
    – user263096
    3 янв 2018 в 11:11
  • То есть вставить occlick прямо в варианты ответа
    – user263096
    3 янв 2018 в 11:12
  • Вместо "<input id="vote_check0" name="vote_check" type="radio" value="0">" ставим "<input id="vote_check0" name="vote_check" type="radio" value="0" onclick="doVote('0'); return false;">".
    – user263096
    3 янв 2018 в 11:16

2 ответа 2

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

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> 

0
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>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.