Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.03.2015, 19:35
Новичок на форуме
Отправить личное сообщение для Pro100Ferrari Посмотреть профиль Найти все сообщения от Pro100Ferrari
 
Регистрация: 05.03.2015
Сообщений: 2

Независимая обработка форм
Всем привет. На странице есть две абсолютно одинаковые формы, но находятся они в разных частях страницы.
<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.
Ответить с цитированием
  #2 (permalink)  
Старый 05.03.2015, 20:20
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

А что используется - jQuery или нет?
Ответить с цитированием
  #3 (permalink)  
Старый 05.03.2015, 20:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,024

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>
Ответить с цитированием
  #4 (permalink)  
Старый 05.03.2015, 20:43
Новичок на форуме
Отправить личное сообщение для Pro100Ferrari Посмотреть профиль Найти все сообщения от Pro100Ferrari
 
Регистрация: 05.03.2015
Сообщений: 2

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработка нескольких форм на странице cyber_bober Events/DOM/Window 10 18.11.2014 05:19
Обработка форм в корзине tuzhilkin Работа 1 27.02.2014 19:47
Некорректная обработка двух форм на странице bnr17 Events/DOM/Window 6 11.02.2013 01:50
обработка элементов форм stalker77 Элементы интерфейса 3 26.06.2012 12:44
jQuery, pjax и обработка форм artemeff Общие вопросы Javascript 0 01.02.2012 12:34