0

Всем привет!

Есть три формы: пополнение счета через 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>

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

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

3
  • 1
    А зачем разные формы, если можно просто подменять атрибут action у одной формы? и имя у hidden поля тоже 2 апр 2017 в 17:02
  • значение input и их количество разное для всех форм. Формы привел для примера 2 апр 2017 в 17:04
  • Типа таб-выбора. Ставьте на радио-кнопку событие и по нему меняйте содержиоме формы
    – DNS
    2 апр 2017 в 17:11

2 ответа 2

2

// выбор всех форм
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>

1

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

Вар1. Использовать один action и, передавая в него имя/метку вида платежа производить нужные действия.

Вар2. Использовать 2 формы (первая только выбор без отправки) и вторую подгружать js-om с нужными action.

Вар3. Менять непосредственно action по js.

Ваш ответ

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

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