Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Независимая обработка форм (https://javascript.ru/forum/events/54151-nezavisimaya-obrabotka-form.html)

Pro100Ferrari 05.03.2015 20:35

Независимая обработка форм
 
Всем привет. На странице есть две абсолютно одинаковые формы, но находятся они в разных частях страницы.
<div class="form-wrapper">
  <div class="input-wrapper">
    <form class="subs-form">
      <input type="text" class="field-name">
      <input type="email" class="field-email">
    </form>
  </div>
  <a href="..." class="button-subs">...</a>
</div>

Задача в следующем. Написать ОДНУ функцию для обработки форм на JQuery.
Т. е. при нажатии на ссылку
class="button-subs"
первой формы обрабатывались поля только первой формы, при нажатии ссылки во второй форме обрабатывались поля только второй формы. А если добавить на страницу еще одну точно такую же форму, чтобы и она обрабатывалась независимо от остальных. Т.е. обрабатывалась бы только текущая форма.

Я пробовал делать через self, но ничего толкого не вышло.

P.S. Я знаю, что в разметке кнопку(ссылку) нужно заталкивать в тег form.

laimas 05.03.2015 21:20

А что используется - jQuery или нет?

рони 05.03.2015 21:22

Pro100Ferrari,
:-?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  a.button-subs{
    background: #FF9933;
    border-radius: 8px ;
    transition:all 1s;
    display: inline-block;

  }
  a.button-subs:hover{
    background: #993300;
  }


  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var button = $(".button-subs");
       button.click(function(event) {
       event.preventDefault()
       var form = $(this).parents('.form-wrapper').find('form');
       alert(form.serialize())
      });
});


  </script>
</head>

<body>  <div class="form-wrapper">
  <div class="input-wrapper">
    <form class="subs-form">
      <input type="text" class="field-name" value="111" name="a">
      <input type="email" class="field-email">
    </form>
  </div>
  <a href="..." class="button-subs">click</a>
</div>
  <div class="form-wrapper">
  <div class="input-wrapper">
    <form class="subs-form">
      <input type="text" class="field-name" value="222" name="a">
      <input type="email" class="field-email">
    </form>
  </div>
  <a href="..." class="button-subs">click</a>
</div>

  <div class="form-wrapper">
  <div class="input-wrapper">
    <form class="subs-form">
      <input type="text" class="field-name" value="333" name="a" >
      <input type="email" class="field-email">
    </form>
  </div>
  <a href="..." class="button-subs">click</a>
</div>


</body>

</html>

Pro100Ferrari 05.03.2015 21:43

laimas, используется JQuery.
Рони, спасибо за помощь, твой код работает. Плюсанул в карму.


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