Всем привет!
Есть три формы: пополнение счета через 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>
Собственно вопрос - как сделать форму для выбора формы?)
Благодарен за любую помощь или направление!
// выбор всех форм
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. Использовать один action и, передавая в него имя/метку вида платежа производить нужные действия.
Вар2. Использовать 2 формы (первая только выбор без отправки) и вторую подгружать js-om с нужными action.
Вар3. Менять непосредственно action по js.
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости