Django-Ajax Получение одинакового значения кнопки для автогенерируемых кнопок

У меня есть веб-страница, которая содержит несколько кнопок, созданных с помощью django. Используя ajax, когда я нажимаю на кнопку, значение отправляется на сервер только для первой кнопки. Значение кнопки устанавливается в соответствии со значением, переданным через контекст из django. Вот код:

<form method="POST" id='form'>
    {% csrf_token %}
  <div class="shadow p-3 mb-5 bg-body rounded" style="height: fit-content;">
    <h5 class="card">Choose A Day!</h5>
    <p class="card-text">Booking Can be made for Next 15 Days.</p>
    <div class="btn-group" role="group" aria-label="Basic example">
      <div class="row row-cols-3 row-cols-md-5 g-4">
      {% for d,y in dates.items %}
        <div class="col">
          <div class="card">
            <button id='dt' name="date" type="submit" value={{d}} class="btn btn-success card-body shadow" style="font-size: 15px; width: fit-content;">
              <div style=" margin-top: -15px; width: 100%; margin-bottom: 5px;">
                <p style="font-weight: bolder;" class="card-text">{{y}}</p>
              </div>
              <div>
                <p class="card-text">{{d}}</p>
              </div>
              
            </button>
          </div>
       </div>
      {% endfor %}
    </div>
  </div>
</div>
</form>

Ajax Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
</script>
<script>
     $('#form').on('submit', function(e){
         
     e.preventDefault();
     
       $.ajax({
            type : "POST", 
            url: "",
            data: {
             date : $('#dt').val(),
             csrfmiddlewaretoken:'{{ csrf_token }}',
            },
            
            success: function(data){
             /* response message */
            },
     
            failure: function() {
                
            }
     
     
        });
     
     
             });    
  </script>

Когда я пытаюсь вывести request.POST в views.py, он показывает одно и то же значение для каждой кнопки. Заранее спасибо

Вы можете сделать что-то вроде этого для выполнения работы

<button type="submit" value={{d}} onclick="sendData(event)">
  <p>{{y}}</p>
  <p class="card-text">{{d}}</p>
</button>

Я удалил некоторый код, чтобы выглядеть чистым, вы можете добавить его позже

function sendData(event){
  $.ajax({
    type : "POST", 
    url: "",
    data: {
      date : event.target.value,
      csrfmiddlewaretoken:'{{ csrf_token }}',
    },
    
    success: function(data){
      
    },
    failure: function() {
      
    }
    
  });
}

Я предлагаю не использовать id внутри цикла, потому что он повторяет один и тот же id несколько раз

Атрибут id задает уникальный идентификатор (ID) элемента. Значение значение должно быть уникальным среди всех идентификаторов элемента. для получения дополнительной информации проверьте this

.
Вернуться на верх