django html: click one button for two actions in sequence

Question

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>

What about using JavaScript to disable the Order Now button until the Get Price button is clicked? You can also use AJAX when the user clicks to get the price. — raphael, Feb 04 '22 at 17:36
I prefer "OrderNow" button combining both "GetPrice" and "OrderNow". The user behavior cannot be controlled. They might click "GetPrice" for the first time, then the "OrderNow" button will be activated. Later when user change some input, they might forget to click "GetPrice" frist but click "OrderNow" directly. — Jack, Feb 04 '22 at 17:43
You can also check if the form has changed, each time disabling the OrderNow button. Check out https://stackoverflow.com/a/38125577/10951070, but I'll think of some code that's more specific. — raphael, Feb 04 '22 at 17:50
this is way too complex. I prefer a simpler way, i.e. make a button to click both "GetPrice" and "OrderNow" — Jack, Feb 04 '22 at 17:56

Egor Wexler · Accepted Answer · 2022-02-04T18:59:08.693

1

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>

edited Feb 04 '22 at 18:59

answered Feb 04 '22 at 17:57

Egor Wexler

1,754
6
22

you can remove type ='submit' in 'OrderNow' button. this button just do two things, first click GetPrice button then redirect to the new page onclick="location.href = '/order/'". will this make the whole things simpler? – Jack Feb 04 '22 at 18:16
@Jack, yes. if "get price" is not submit button - you can try doing the first code chunk from my answer – Egor Wexler Feb 04 '22 at 18:18
I tried and it does not redirect to the new page. I guess it's conflicting with my htmx settings. I have added onclick="location.href = '/order/'" in the OrderNow button to force redirect but it shows that GetPrice is not clicked – Jack Feb 04 '22 at 18:22
is it too fast to click the second button? The fact is that you must click the first GetPrice button to get the value of the price, then you click OrderNow to redirect to the new page, where the price will be rendered in the new page. – Jack Feb 04 '22 at 18:29
@Jack, I have added js snippet to my answer which handles these sequential actions. You can adapt it to your needs – Egor Wexler Feb 04 '22 at 18:59
I am a bit confused with this example. I have no idea how to make adjustment. attempts failed – Jack Feb 04 '22 at 19:16
@Jack it is not clear what your buttons are doing (since both have submit event). If you can elaborate more about your logic - I can provide more specific example – Egor Wexler Feb 04 '22 at 19:23
https://stackoverflow.com/questions/70984385/django-how-to-render-and-redirect-page-together-at-same-time this is the full code and the purpose – Jack Feb 04 '22 at 19:27
1

it seems working for your updated javascripts. thank you – Jack Feb 05 '22 at 05:55

django html: click one button for two actions in sequence

1 Answers1