Форум

Pro100Ferrari · #1 (**permalink**) 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 · #2 (**permalink**) 05.03.2015, 21:20

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

рони · #3 (**permalink**) 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 · #4 (**permalink**) 05.03.2015, 21:43

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

Форум

Справочник

Discord чат

Курсы javascript