Как создать выбор формы через radio input?

226

04 апреля 2017, 09:46

Всем привет!

Есть три формы: пополнение счета через PayPal, QIWI и Яндекс Деньги. Пользователю предлагается выбрать один из методов через radio input. Проблема в том, что для этих методов оплаты разные form запроса.

Пример формы выбора оплаты:

<form id="check" action="">
 <input type="radio" value="paypal">
 <input type="radio" value="qiwi">
 <input type="radio" value="yandex">
</form>

Пример самих форм оплаты:

<form id="paypal" action="paypal.com">
 <input type="hidden' name=paypal>
</form>
<form id="qiwi" action="qiwi.com">
 <input type="hidden' name=qiwi>
</form>
<form id="yandex" action="yandex.com">
 <input type="hidden' name=yandex>
</form>

Собственно вопрос - как сделать форму для выбора формы?)

Благодарен за любую помощь или направление!

Answer 1

// выбор всех форм 
var forms = document.querySelectorAll('form'); 
var radios = document.querySelectorAll('form#check input[type=radio]'); 
 
// при клике на кнопку, берется её значение, 
// прячутся все остальные формы и показывается конкретная с  
// переданным идентификатором 
forms[0].addEventListener("click",function(e) {   
  if(e.target && e.target.nodeName == "INPUT") { 
    hideFormsButFirst(); 
    setFormVisible(e.target.value);     
	} 
}); 
 
// функция, которая прячет все формы, кроме той, где радио кнопки 
function hideFormsButFirst() { 
  for (var i = 0; i < forms.length; ++i) { 
    forms[i].style.display = 'none'; 
  } 
  forms[0].style.display = 'block'; 
} 
 
// отображает форму по переданному идентификатору 
function setFormVisible(id = "paypal") { 
    var form = document.getElementById(id);          
    form.style.display = 'block';                               
} 
 
// первоначальные заготовки 
function init() { 
    hideFormsButFirst(); 
    setFormVisible(); 
} 
 
init();

<form id="check" action=""> 
 <input type="radio" value="paypal" name="payment" checked=checked> 
 <input type="radio" value="qiwi" name="payment"> 
 <input type="radio" value="yandex" name="payment"> 
</form> 
 
<form id="paypal" action="paypal.com"> 
 <input type="hidden" name=paypal> 
  paypal форма 
</form> 
 
<form id="qiwi" action="qiwi.com"> 
  qiwi форма 
 <input type="hidden" name=qiwi> 
</form> 
<form id="yandex" action="yandex.com"> 
  yandex форма 
 <input type="hidden" name=yandex> 
</form>