Могу ли я использовать одно имя класса для нескольких вызовов Ajax

Question

Я написал код, который обновляет score1, score2 в базе данных, используя jQuery.

Мой код jQuery / AJAX:

$(document).ready(function() {
  $('#SampleForm').submit(
    function(event) {
      var id = $('.id').val();
      var score1 = $('.score1').val();
      var score2 = $('.score2').val();
      var data = 'score1=' + score1 + '&score2=' + score2 + '&id=' + id;
      $.ajax({
        url: $("#SampleForm").attr("action"),
        data: data,
        type: "GET",

        success: function(response) {
          alert(response);
        },
        error: function(xhr, status, error) {
          alert(xhr.responseText);
        }
      });
      return false;
      location.reload(true)
    });
});

Код JSP

<c:forEach var="item" items="${userinuser}">
  <form action="/mark/update" method="get" id="SampleForm">
    <input type="hidden" value="${item.userScores.ID}" name="id" class="id" />
    <input type="text" value="${item.userScores.score1}" name="score1" class="score1" size="2">
    <input type="text" value="${item.userScores.score2}" name="score2" class="score2" size="2">
    <input type="submit" value="update" class="btn btn-primary" />
  </form>
</c:forEach>

И предположим, что ${userinuser} равно 6, тогда на этой странице JSP будут динамически генерироваться 6 форм.
Все 6 форм используют одно и то же имя класса для Score1 как score1 и Score2 как score2.

Мой вызов AJAX работает впервые (первая динамически генерируемая форма), но не работает для оставшихся 5 вызовов AJAX.

Я знаю, что этот способ кодирования не подходит для применения

Может кто-нибудь предложить мне хорошую идею?

Answer 1

Вы создаете 6 форм с одинаковым идентификатором #SampleForm. Когда есть несколько узлов с одинаковым идентификатором, первый всегда будет появляться.

Вместо этого вы можете использовать className для вашей формы:

<form class="SampleForm">

А затем прослушайте отправку по любому из них:

$('.SampleForm').submit(...)

Однако у вас все еще есть вторая проблема. Вы пытаетесь получить данные, используя имена классов входных элементов и атрибут действия первой формы. Вы могли бы вместо этого сделать:

 $('.SampleForm').submit(function(event) {
   var data = $(this).serialize(),
       url = $(this).attr('action');

   $.ajax({
       url : url,
       data : data,
       type : "GET",
       ....
   });

   return false;
   location.reload(true)
})

Answer 2

Событие .submit присоединяет форму, отправленную на this. Вы можете использовать это, чтобы указать, в какой форме jQuery должен искать класс.

$('.SampleForm').submit(function(event) {
  var score1 = $('.score1', this).val();
  var score2 = $('.score2', this).val();

  console.log('score1', score1);
  console.log('score2', score2);

  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/mark/update" method="get" class="SampleForm">
  <input type="hidden" value="${item.userScores.ID}" name="id" class="id" />
  <input type="text" value="1" name="score1" class="score1" size="2">
  <input type="text" value="2" name="score2" class="score2" size="2">
  <input type="submit" value="update" class="btn btn-primary" />
</form>

<form action="/mark/update" method="get" class="SampleForm">
  <input type="hidden" value="${item.userScores.ID}" name="id" class="id" />
  <input type="text" value="3" name="score1" class="score1" size="2">
  <input type="text" value="4" name="score2" class="score2" size="2">
  <input type="submit" value="update" class="btn btn-primary" />
</form>

Обратите внимание, что вы можете использовать id только один раз в своем документе. Ваш SampleForm недействителен, потому что он используется для всех форм.