Форум

corton · #1 (**permalink**) 31.03.2017, 23:17

Привет.

Есть 2 формы, одна доставку выбирает, вторая оплату.
Задача сделать чтобы для доставки_1 автоматически выбиралась оплата_1, соответственно если выбирается доставка_2 чтобы была выбрана оплата_2

<h2>Доставка</h2>
<form action="">  
<input type="radio" id="deliveri_1" name="deliveri" value="1">
<input type="radio" id="deliveri_2" name="deliveri" value="2">
<input type="radio" id="deliveri_3" name="deliveri" value="3">
<input type="radio" id="deliveri_4" name="deliveri" value="4">
</form>

<h2>Оплата</h2>
<form action="">  
<input type="radio" id="payment_1" name="payment" value="1">
<input type="radio" id="payment_2" name="payment" value="2">
<input type="radio" id="payment_3" name="payment" value="3">
<input type="radio" id="payment_4" name="payment" value="4">
</form>
<script>

Как посоветуете реализовать взаимодействие форм?

рони · #2 (**permalink**) 31.03.2017, 23:50

corton,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<h2>Доставка</h2>
<form action="">
<input type="radio" id="deliveri_1" name="deliveri" value="1">
<input type="radio" id="deliveri_2" name="deliveri" value="2">
<input type="radio" id="deliveri_3" name="deliveri" value="3">
<input type="radio" id="deliveri_4" name="deliveri" value="4">
</form>

<h2>Оплата</h2>
<form action="">
<input type="radio" id="payment_1" name="payment" value="1">
<input type="radio" id="payment_2" name="payment" value="2">
<input type="radio" id="payment_3" name="payment" value="3">
<input type="radio" id="payment_4" name="payment" value="4">
</form>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var form = document.querySelectorAll("form");
    [].forEach.call(form, function(item, i) {
        item.addEventListener("change", function() {
            var inp = item.querySelector('[type="radio"]:checked');
            if (inp) form[+!i].querySelector('[type="radio"][value="' + inp.value + '"]').checked = true
        })
    })
});
  </script>

</body>
</html>

corton · #3 (**permalink**) 01.04.2017, 10:47

рони, спасибо!

А если это в рамках одной формы вот так будет:

<form action="">
<h2>Доставка</h2>
<input type="radio" id="deliveri_1" name="deliveri" value="1">
<input type="radio" id="deliveri_2" name="deliveri" value="2">
<input type="radio" id="deliveri_3" name="deliveri" value="3">
<input type="radio" id="deliveri_4" name="deliveri" value="4">
<h2>Оплата</h2>
<input type="radio" id="payment_1" name="payment" value="1">
<input type="radio" id="payment_2" name="payment" value="2">
<input type="radio" id="payment_3" name="payment" value="3">
<input type="radio" id="payment_4" name="payment" value="4">
</form>
<script>

То так выходит по name нужно проверку делать?

рони · #4 (**permalink**) 01.04.2017, 11:50

corton,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<form action="">
<h2>Доставка</h2>
<input type="radio" id="deliveri_1" name="deliveri" value="1">
<input type="radio" id="deliveri_2" name="deliveri" value="2">
<input type="radio" id="deliveri_3" name="deliveri" value="3">
<input type="radio" id="deliveri_4" name="deliveri" value="4">
<h2>Оплата</h2>
<input type="radio" id="payment_1" name="payment" value="1">
<input type="radio" id="payment_2" name="payment" value="2">
<input type="radio" id="payment_3" name="payment" value="3">
<input type="radio" id="payment_4" name="payment" value="4">
</form>



  <script>
window.addEventListener("DOMContentLoaded", function() {
    var form = document.querySelector("form"), obj = {deliveri : 'payment',payment : 'deliveri'};
        form.addEventListener("change", function(event) {
            var inp = event.target, name = obj[inp.name];
            if (name) form.querySelector('[name="'+name+'"][value="' + inp.value + '"]').checked = true
        })

});
  </script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript