Отправка нескольких форм в Django представление одной кнопкой с помощью Ajax

Question

У меня есть базовая страница c, где пользователь может выполнить действие, используя стандартную форму. Поскольку мне нужно, чтобы моя страница не перезагружалась при отправке формы, вместо использования Django форм для обработки отправки я использую Ajax.

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

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

Вот функция ajax, которую я использую для отправки запроса:

$(document).ready(function () {

  $("#myform").submit(function (event) {
      callAJAX( "/myview/",
       {"X-CSRFToken": getCookie("csrftoken") },
       parameters={
      'item': $('#item').val(), 'amount': $('#amount').val()},

      'post',
       function(data){
        console.log('Request fired.')

       }, null, null );
  return false; 
  });
});

Это будет работать: , следующая форма отправит стандартный запрос в мой Django вид, содержащий элемент и сумму, выбранную пользователем.

<form method='post' id='myform'>
  {% csrf_token %}
  <input type="text" placeholder="Item" id='item'>
  <input type="text" placeholder="Amount" id='amount'>
  <button name="button1" type="submit" class="btn btn-primary btn-sm f-14 mr-1">SUBMIT</button>
</form>

Но что, если я захочу отправить две формы на одной странице?

Я пробовал это:

<form method='post' id='myform'>
  {% csrf_token %}
  <input type="text" placeholder="Item" id='item'>
  <input type="text" placeholder="Amount" id='amount'>
</form>

<form method='post' id='myform'>
  {% csrf_token %}
  <input type="text" placeholder="Item" id='item'>
  <input type="text" placeholder="Amount" id='amount'>
</form>
<button name="button1" type="submit" class="btn btn-primary btn-sm f-14 mr-1">SUBMIT</button>

Это не сработает, потому что кнопка не находится в том же поле, что и любая из двух форм , но желаемым результатом является одновременная отправка следующих двух форм, отправка двух разных запросов, по одному для каждой формы.

Итак, что должно произойти: скажем, ввод Amount one и Item one для первой формы и Amount two и Item two для второй формы, эти значения должны быть отправлены одновременно как два разных запроса в мое представление Django, чтобы я мог иметь что-то вроде этого при отладке:

REQUEST: 'Amount one', 'Item one'
REQUEST: 'Amount two', 'Item two'

Это даже можно сделать? Или я должен просто создать больше форм и больше Ajax функций, по одной для каждой формы? Любой совет приветствуется

Answer 1

Просто измените ваш jQuery триггер с submit() в форме на click() на кнопке. Затем отправьте 2 AJAX запросов на ваш click().

    $("#my_button").click(function (event) {
      event.preventDefault(); // prevent form from being submitted automatically
      callAJAX( "/myview/",
       {"X-CSRFToken": getCookie("csrftoken") },
       parameters={
       'item': $('#item1').val(), 'amount': $('#amount1').val()},

       'post',
       function(data){
        console.log('Request fired.')

       }, null, null );

      // Call ajax again with other items and amounts
      callAJAX( "/myview/",
       {"X-CSRFToken": getCookie("csrftoken") },
       parameters={
       'item': $('#item2').val(), 'amount': $('#amount2').val()},

       'post',
       function(data){
        console.log('Request fired.')

       }, null, null );
    });

    <form method='post' id='myform'>
      {% csrf_token %}
      <input type="text" placeholder="Item" id='item1'>
      <input type="text" placeholder="Amount" id='amount1'>
    </form>

    <form method='post' id='myform'>
      {% csrf_token %}
      <input type="text" placeholder="Item" id='item2'>
      <input type="text" placeholder="Amount" id='amount2'>
    </form>
    <button name="button1" id="my_button" type="submit" class="btn btn-primary btn-sm f-14 mr-1">SUBMIT</button>

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