Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Каждую форму обрабатывать отдельно serialize() (https://javascript.ru/forum/jquery/70306-kazhduyu-formu-obrabatyvat-otdelno-serialize.html)

Ramzes94 26.08.2017 08:06

Каждую форму обрабатывать отдельно serialize()
 
Привет Всем.

Подскажите, что вписать в приведенном ниже коде, чтобы каждая форма обрабатывалась отдельно.

А, то сериализится все в общем списке

$(function() {
  var c = $(".sticker .one img").attr("src");
  var e = $(".sticker form input, .sticker form select");
  var b = $(".product-details-block form.property-form");
  e.on("input change", (function() {
    $(".sticker .one img.m").each(function() {
      var a = $(this);
      a.attr("src", c + "?type=" + a.attr("data-type") + "&" + $(".sticker form").serialize())
    });
    $(".sticker .one img.n").attr("src", c + "?" + $(".sticker form").serialize());
    e.each(function() {
      var a = $(this);
      var f = $(':input[name="' + a.attr("name") + '"]', b);
      if (!f.length) {
        return true
      }
      f.val(a.hasClass("form-value-text") ? $('>option[value="' + a.val() + '"]', a).text() : a.val())
    })
  })).first().triggerHandler("change");
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="sticker">
  <div class="one">
    <!-- Форма 1 -->
    <img class="n" src="img/">
    <form action="#">
      <input type="text" name="one">
    </form>
    <!-- Форма 2 -->
    <img class="n" src="img/">
    <form action="#">
      <input type="text" name="two">
    </form>
  </div>
</div>

рони 26.08.2017 09:44

Ramzes94,
сложно понять что вы хотите сделать.
var form = this.form;
        $(".sticker .one img.m").each(function() {
            var a = $(this);
            a.attr("src", c + "?type=" + a.attr("data-type") + "&" + $(form).serialize())
        });
        $(".sticker .one img.n").attr("src", c + "?" + $(form).serialize());

Ramzes94 26.08.2017 10:26

Рони, код отредактировал, поправил.

Нужно чтобы в первую форму, а именно в тег img попадала информация с формы input name="one", а во вторую форму попадала информация input name="two".

Вот не знаю как решить вопрос? Буду признателен:)

рони 26.08.2017 11:13

Ramzes94,
<!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() {
    var forms = $(".sticker form");
    $(".sticker .n").each(function(indx, img) {
        var form = forms.eq(indx);
        var src = img.src;
        form.on("input change", function() {
            img.src = src + "?" + $(form).serialize()
        })
    })
});
  </script>
</head>

<body>

<div class="sticker">
  <div class="one">
    <!-- Форма 1 -->
    <img class="n" src="img/">
    <form action="#">
      <input type="text" name="one">
    </form>
    <!-- Форма 2 -->
    <img class="n" src="img/">
    <form action="#">
      <input type="text" name="two">
    </form>
  </div>
</div>

</body>
</html>


Часовой пояс GMT +3, время: 02:23.