Форум

Anushki · #11 (**permalink**) 04.12.2017, 00:36

Сообщение от laimas

Свяжите так:

<input type="text" name="name" placeholder="Ваше ФИО"><br><br>
<input type="text" name="phone" placeholder="Телефон">
.....

<p>Заказчик: <span id="name"></span></p>
<p>Телефон: <span id="phone"></span></p>
.....

В обработчике выполните такой код:

$.each(this.elements, function(i, e) {
            console.log($('#'+e.name))
});

Видны в консоли ваши SPAN? Какая проблема?

Проблема возникнет с флажками, если как выше говорилось, а значит их именовать надо как например pack[], а в связывании убирать из имени. Если связать по имени класса, то по крайней мере этого бы не требовалось. Чем имя класса хуже ID?

можешь теперь написать дальше как сравнить их и передать значение по id ?

рони · #12 (**permalink**) 04.12.2017, 01:12

Anushki,
привязка по классу

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $("form").on("input change", function() {
        var data = $(this).serializeArray(), obj ={};
        $.each(data, function(i, el) {
            var cls = "."+el.name, val = el.value;
            if(/\[\]/.test(cls)) {
               cls = cls.slice(0,-2);
               obj[cls] !== undefined ? obj[cls].push(val) : (obj[cls] = [val]);
               val = obj[cls].join(",");
            }
            $(cls).html(val);
        });
    })
});
  </script>
</head>

<body>  <p>Заказчик: <span class="name"></span></p>
        <p>Заказчик: <span class="name"></span></p>
        <p>Заказчик: <span class="name"></span></p>
<div class="content"><h2>Договор</h2>
<p>Заказчик: <span class="name"></span></p>
<p>Телефон: <span class="phone"></span></p>
<p>Заказал: <span class="category"></span></p>
<p>Тариф: <span class="tarif"></span></p>
<p>Пакет: <span class="pack"></span></p></div>
<form action="" method="post">
<input type="text" name="name" placeholder="Ваше ФИО"><br><br>
<input type="text" name="phone" placeholder="Телефон"><br><br>
<select name="category">
<option selected disabled>Тип сайта</option>
<option>Визитка</option>
<option>Лендинг</option>
</select><br><br>
<input type="radio" name="tarif"  value="Тариф 1"> Тариф 1
<input type="radio" name="tarif"  value="Тариф 2"> Тариф 2<br><br>
<input type="checkbox" name="pack[]"  value="Пакет 1"> Пакет
<input type="checkbox" name="pack[]"  value="Пакет 2"> Пакет
</form>

<h2>Договор</h2>
<p>Заказчик: <span class="name"></span></p>
<p>Телефон: <span class="phone"></span></p>
<p>Заказал: <span class="category"></span></p>
<p>Тариф: <span class="tarif"></span></p>
<p>Пакет: <span class="pack"></span></p>
</body>
</html>

laimas · #13 (**permalink**) 04.12.2017, 01:21

Сообщение от Anushki

как сравнить их и передать значение по id

Что значит по ID? Здесь имя поля формы равно ID закрепленного за ним SPAN. Сравнивать ничего не надо. Сериализация возвращает объект, именами свойств которого как раз и будут имена полей формы.

$(function() {
    $("form").on("input", function() {
        var o = $('span').empty();
        $.each($(this).serializeArray(), function() {
            var a = o.filter('#'+this.name.replace(/\[\]/,'')), v = a.text();
            a.text(v + (v ? ', ' : '') + this.value); //флажков может быть несколько
        });
    })
});

Anushki · #14 (**permalink**) 04.12.2017, 01:24

Сообщение от рони

Anushki,
привязка по классу

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $("form").on("input change", function() {
        var data = $(this).serializeArray(), obj ={};
        $.each(data, function(i, el) {
            var cls = "."+el.name, val = el.value;
            if(/\[\]/.test(cls)) {
               cls = cls.slice(0,-2);
               obj[cls] !== undefined ? obj[cls].push(val) : (obj[cls] = [val]);
               val = obj[cls].join(",");
            }
            $(cls).html(val);
        });
    })
});
  </script>
</head>

<body>  <p>Заказчик: <span class="name"></span></p>
        <p>Заказчик: <span class="name"></span></p>
        <p>Заказчик: <span class="name"></span></p>
<div class="content"><h2>Договор</h2>
<p>Заказчик: <span class="name"></span></p>
<p>Телефон: <span class="phone"></span></p>
<p>Заказал: <span class="category"></span></p>
<p>Тариф: <span class="tarif"></span></p>
<p>Пакет: <span class="pack"></span></p></div>
<form action="" method="post">
<input type="text" name="name" placeholder="Ваше ФИО"><br><br>
<input type="text" name="phone" placeholder="Телефон"><br><br>
<select name="category">
<option selected disabled>Тип сайта</option>
<option>Визитка</option>
<option>Лендинг</option>
</select><br><br>
<input type="radio" name="tarif"  value="Тариф 1"> Тариф 1
<input type="radio" name="tarif"  value="Тариф 2"> Тариф 2<br><br>
<input type="checkbox" name="pack[]"  value="Пакет 1"> Пакет
<input type="checkbox" name="pack[]"  value="Пакет 2"> Пакет
</form>

<h2>Договор</h2>
<p>Заказчик: <span class="name"></span></p>
<p>Телефон: <span class="phone"></span></p>
<p>Заказал: <span class="category"></span></p>
<p>Тариф: <span class="tarif"></span></p>
<p>Пакет: <span class="pack"></span></p>
</body>
</html>

Рони ты бог

Мамой клянусь я такого спеца первый раз вижу ) миллиард раз спасибо !! )

Anushki · #15 (**permalink**) 04.12.2017, 01:26

Загрузил на http://jsfiddle.net/4gZAT/1388 идеальный вариант от РОНИ ! Спасибо ещё раз.

laimas · #16 (**permalink**) 04.12.2017, 01:29

Сообщение от Anushki

идеальный вариант от РОНИ

Чем? С разницей что у него классы, чего и надо было, нет "заказчик" уперся в ID. ) И данные ранее полученные нужно очищать, а значит span пусты, проверив это можно просто добавлять к строке через запятую.

Разберитесь, два кода делают одно и тоже.

Форум

Справочник

Discord чат

Курсы javascript