django html: 依次点击一个按钮执行两个操作

Question

我有一个表格供用户填写一些数据。底部有两个按钮：“获取价格”和“立即订购”。

用户必须首先单击“获取价格”按钮以获取价格，然后单击“立即订购”按钮重定向到新页面。但是，我们无法控制用户行为，有些会直接点击“立即订购”按钮。那么对于“立即订购”按钮配置，有没有一种方法可以启用顺序点击（“获取价格”->“立即订购”），即当用户单击“立即订购”按钮时，程序将首先单击“获取价格”按钮，然后“立即订购”。

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

Answer 1

最简单的方法是使用 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 - 一旦它被点击 - 页面将被重新加载，因为提交 POST 请求相同的页面使其重新加载。

因此，您的逻辑似乎有问题，因为该页面需要提交两次。

我建议做的是用一些 API 替换获取价格的逻辑，它将通过 AJAX 调用而无需重新加载页面。

然后 - 一旦用户点击“获取价格” - 价格将动态加载，无需通过 AJAX 重新加载页面，因此您将在表单中只有一个提交按钮。

UPD 添加了片段来演示这个想法

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

django html: 依次点击一个按钮执行两个操作

django html: click one button for two actions in sequence

html

forms

django

button