Выберите указанную кнопку c в Javascript / AJAX

Question

У меня есть список, в котором пользователь может сохранять различные элементы в приложении Django. Рядом с каждым элементом у меня есть кнопка, с помощью которой можно удалить этот элемент.

Элементы хранятся в базе данных и отображаются в виде для l oop. Проблема в том, какую кнопку я нажимаю, первая выбирается и удаляется.

Я новичок в JavaScript, но я понимаю, что моя проблема исходит от моего var.product селектора, потому что .val() возвращает первый соответствующий элемент ('.substitut'). Я попытался немного подправить $(this), но безуспешно ...

Как выбрать каждый продукт для каждой кнопки в отдельности?

My HTML:

   {% extends 'finder/base.html' %}

{% block content %}

<header class="masthead" id='fav_list'>

  <div class="col-lg-12">
    <hr>
    <h2 class="intro-text text-center" style="color: beige;">Bienvenue sur ton compte {{ user }}</h2>
    <hr class="divider1 my-4" />
    <div class='w-75 mx-auto  row d-flex justify-content-around mb-3'>
      <h3 class="intro-text text-center account_items" style="color: beige;">Produit recherché</h3>
      <h3 class="intro-text text-center account_items" style="color: beige;">Produit de substitut</h3>
    </div>

  </div>

  <div  class="w-75  mx-auto container-fluid" style='background-color: transparent;'>

    {% for saved in saved_list %}

    <div class='row d-flex justify-content-between'>

      <div class="card mb-3" style="width: 49%;">
                          {...}
      </div>

      <div class="card mb-3" style="width: 49%;">
        <div class="row no-gutters">
          <div class="col-md-2 my-auto">
            <img class="mx-auto d-block " style="width:auto; height:auto; max-width:100px; max-height:100px; "
              src="{{ saved.sub_product.picture }}">
          </div>
          <div class="col-md-9">
            <div class="card-body">
              <h5 class="card-title"><a href="{% url 'finder:detail' saved.sub_product.id %}"
                  class="aaccount">{{ saved.sub_product.real_name}}/ {{ saved.sub_product.real_brand }}</a>
              </h5>
              <img src="/static/finder/img/nutriscore-{{ saved.sub_product.nutrition_grade}}.svg"
                style="width:70px;"><br>
            </div>
          </div>
          <div class="col-md-1 my-auto mx-auto">
            <form class="form_id" method='post'>{% csrf_token %}
              <button class=' btn substitut' value='{{ saved.id }}'><i class='fas fa-trash-alt'></i></button>              

            </form>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>


  <div class="pagination">
    <nav aria-label="">
      <ul class="pager mb-1">
        {% if saved_list.has_previous %}
        <span><a href="?page={{ saved_list.previous_page_number }}">previous</a></span>
        {% endif %}
        <span class="current" style='color:white;'>
          Page {{ saved_list.number }} de {{ saved_list.paginator.num_pages }}
        </span>
        {% if saved_list.has_next %}
        <span><a href="?page={{ saved_list.next_page_number }}">next</a></span>
        {% endif %}
      </ul>
    </nav>
  </div>

</header>

{% endblock %}

Мой AJAX:

$(".form_id").on('submit', function(event) {
    event.preventDefault();  
    var product = $('.substitut').val();         
    console.log(product);
    var url = '/register/delete/';   
    $.ajax({        
        url: url,        
        type: "POST",
        data:{
            'product': product,            
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        datatype:'json',
        success: function(data) {
          if (data['success']) 
            console.log(product);
            $("#fav_list").load(location.href + " #fav_list > *");
            location.reload(true);

        }
    }); 
});

Answer 1

Вы можете использовать onclick событие jquery вместо submit, потому что, как я вижу в вашем коде, если вы не отправляете свою форму, а внутри вашего события отправки вы используете ajax, так что это должно работать . Измените код ajax, как показано ниже:

$(".substitut").on('click', function(event) {
    event.preventDefault(); 
    //getting current button value which is clicked
    var product = $(this).val();         
    console.log(product);
    var url = '/register/delete/';   
   //put your ajax code here
});

Демонстрационный код :

$(".substitut").on('click', function(event) {
    event.preventDefault(); 
    //getting current button value which is clicked
    var product = $(this).val();         
    console.log(product);
    var url = '/register/delete/';   
   //put your ajax code here
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='substitut' value='{{ saved.id}}'><i class='fas fa-trash'></i></button>
<button class='substitut' value='{{ saved.id1}}'><i class='fas fa-trash'></i></button>
<button class='substitut' value='{{ saved.id2}}'><i class='fas fa-trash'></i></button>

Обновление 1 : альтернативным решением будет создание события нажатия на кнопку, которое будет хранить текущую ссылку на нажатие кнопки и использовать ее внутри вашего submit событие.

Демонстрационный код :

var $submit = null;
var $button = $('button');

$(".form_id").on('submit', function(event) {
  event.preventDefault();
  //getting value of button clicked
  var product = $submit.value;
  console.log(product);
  var url = '/register/delete/';
  $.ajax({
    url: url,
    type: "POST",
    data: {
      'product': product,
      'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
    },
    datatype: 'json',
    success: function(data) {
      if (data['success'])
        console.log(product);
      $("#fav_list").load(location.href + " #fav_list > *");

    }
  });
});

//when button is clicked
$button.click(function(event) {
  //putting current button clicked reference in variable $submit
  $submit = this;
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form_id" method='post'>{% csrf_token %}{{ saved.id}}
  <button class='substitut' value='{{ saved.id}}'><i class='fas fa-trash'></i></button>
</form>
<form class="form_id" method='post'>{% csrf_token %}{{ saved.id1}}
  <button class='substitut' value='{{ saved.id1}}'><i class='fas fa-trash'></i></button>
</form>