Обработка одинаковых форм jquery

Question

Всем привет. Не являюсь профессионалом во фронте. На странице есть 10 абсолютно идентичных форм.

<form class="updateUserForm">
  <p>ID</p>
  <input class="form-control" disabled="disabled" type="text" value="${user.id}">
  <input type="hidden" name="id" value="${user.id}">
  <p>Name</p>
  <input class="form-control" name="name" type="text" value="${user.name}">
  <p>Telephone</p>
  <input class="form-control" name="telephone" type="text" value="${user.telephone}">
  <p>Password</p>
  <input class="form-control" name="password" type="text" value="${user.password}">
  <p>Roles</p>
  <select multiple size="2" class="form-control" name="roles"> multiple size="2" name="roles">
  <option name="admin">Admin</option>
  <option name="user">User</option>
  </select>
 
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <input type="submit" value="Edit" class="btn btn-primary editUser"></form>
 </div>

Требуется получить значение заполненной формы через jquery. В данный момент получается получить только первую форму вне зависимости какую заполняем. Нужно как-то определить какую форму заполнили и передать ее через ajax. Событие вешаю на .editUser

Заранее благодарен за помощь.

Answer 1

Вот так можно реализовать.
Пример смотрите ниже:

$('form[id*=form_] > button')
  .click(function() {
    console.log($(this).parent('form').serialize());
  });

form {
  margin: 10px !important;
  padding: 4px !important;
  display: inline-block !important;
}

form>* {
  margin: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form_1">
  <h2>Form 1</h2><br>
  <input name="username" placeholder="Username"><br>
  <button type="button">Submit</button>
</form>

<form id="form_2">
  <h2>Form 2</h2><br>
  <input name="username" placeholder="Username"><br>
  <button type="button">Submit</button>
</form>

<form id="form_3">
  <h2>Form 3</h2><br>
  <input name="username" placeholder="Username"><br>
  <button type="button">Submit</button>
</form>

БЛОГ НА HUSL

Обработка одинаковых форм jquery

Ответы (1 шт):