Django html: нажмите одну кнопку для двух последовательных действий

У меня есть форма для заполнения пользователем некоторых данных. внизу есть две кнопки: "Получить цену" и "Заказать сейчас".

пользователь должен сначала нажать кнопку "Получить цену", чтобы узнать цену, затем нажать кнопку "Заказать сейчас" для перенаправления на новую страницу. Однако мы не можем контролировать поведение пользователя, некоторые будут напрямую нажимать кнопку "Заказать сейчас". Поэтому для конфигурации кнопки "Заказать сейчас", есть ли способ включить последовательные клики ("Получить цену" -> "Заказать сейчас"), т.е. когда пользователь нажимает кнопку "Заказать сейчас", программа сначала нажмет кнопку "Получить цену", затем "Заказать сейчас".

 <form method="POST" hx-post="{% url 'OnlinePricing' %}" hx-target="#pickup_address"
          hx-target="#delivery_address" hx-target="#distance" hx-target="#charge" @submit.prevent>
        {% csrf_token %}

    <div>
      <label for="s1">pickup_address:</label>
      <input type="text" name="pickup_address" value="" required="required" />
    <br /><br />
    </div>

    <div>
      <label for='s1'>delivery_address:</label>
      <input type="text" name="delivery_address" value="" required="required" />
    <br /><br />
    </div>

...

    <div>
        <span id="pickup_address"> {{ pickup_address }} </span>
    </div>

    <div>
        <span id="delivery_address"> {{ delivery_address }} </span>
    </div>

    <div>
        <span id="distance"> {{ distance }} </span>
    </div>

    <div>
        <span id="charge" > {{ charge }} </span>
    </div>
            <button type="submit">Get Price</button>  <button type="submit" style="margin-left:10px;" onclick="location.href = '/order/'">Order Now</button>
  </form>

Самый простой способ сделать это - использовать JQuery. Т.е.:

<button id="get-price" type="submit">Get Price</button>  
<button id="order-now" type="submit" style="margin-left:10px;">Order Now</button>

И ваш сценарий будет выглядеть следующим образом:

<script>
    $( document ).ready(function() {
        $("#order-now").on('click', function() {
            $("#get-price").click()            // trigger get-price click
            window.location.href = '/order/' 
        })
    })
</script>

Однако, поскольку обе ваши кнопки имеют тип submit - после нажатия на них страница будет перезагружена, поскольку submit делает POST запрос к той же самой странице, что заставляет ее перезагружаться.

Так, похоже, что у вас проблемы с логикой, потому что страницу нужно отправить дважды.

Что я предлагаю сделать, так это заменить логику получения цены на некий API, который будет вызываться через AJAX без необходимости перезагрузки страницы.

Затем - как только пользователь нажмет кнопку "Получить цену" - цена будет загружена динамически без перезагрузки страницы через AJAX, так что у вас будет только одна кнопка отправки в форме.

Но, если вы действительно хотите иметь два сабмита один за другим - тогда вы можете "взломать" это следующим способом (хотя, не рекомендуется, так как это странный обходной путь))

<script>
    $( document ).ready(function() {
        $("#get-price").on('click', function() {
            localStorage.set("got-price", 1)    // means that user clicked it
        })

        $("#order-now").on('click', function() {
            const gotPrice = localStorage.get("got-price")
            if (gotPrice !== 1) {
                localStorage.set("got-price", 2)  // means that user didn't click get price
                $("#get-price").click() 
            }
                       
        })
        
        const gotPrice = localStorage.get("got-price")
        if(gotPrice === 2) {          // means that current reload is from "get price" - so trigger Order Now event
            window.location.href = '/order/'
        }

    })
</script>
Вернуться на верх