django html: click one button for two actions in sequence-CodePudding

I have a form for user to fill in some data. at the bottom there are two buttons: "Get Price" and "Order Now".

the user must click "Get Price" button in the first to get the price, then click "Order Now" button to redirect to a new page. However, we cannot control user behavior, some will directly click the "Order Now" button. So for "Order Now" button configuration, is there a way to enable sequential clicks ("Get Price" -> "Order Now"), i.e. when user click "Order Now" button, the program will click "Get Price" button first, then "Order Now".

 <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>

CodePudding user response：

The simplest way to do that is to use JQuery. I.e.:

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

And your script will look like this:

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

However, since both of your buttons have type submit - once it's clicked - the page will be reloaded because submit does POST request to the same page which makes it reload.

Thus, it seems that you have an issue with your logic because the page is needed to be submitted twice.

What I suggest to do is to replace the logic of getting price with some API which will be called via AJAX without a need to reload page.

Then - once the user clicks "Get Price" - the price will be loaded dynamically without page reload via AJAX so you will have only one submit button in the form.

UPD Added snippet to demonstrate the idea

$( document ).ready(function() {
    $('#get-price').on('click', function() {
        getPrice()
    })

    $('#order-now').on('click', function() {
        getPrice().then(function() {
            orderNow()
        })
    })
})

async function getPrice() {
    return new Promise((resolve) => {
    //here goes the logic of getting price. Timeout for delay simulation
    setTimeout(() => {
        $('#price').html('999.90')
        resolve(true);
     }, 2000);
    })
}

async function orderNow() {
  // your case: 
  // window.location.href = '/order/'
  // alert for simulation
  alert("ordered")
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="price">0.00</span>
<button id="get-price">Get Price</button>
<button id="order-now">Order Now</button>