我有一個表格供用戶填寫一些資料。在底部有兩個按鈕：“獲取價格”和“立即訂購”。
用戶必須首先單擊“獲取價格”按鈕以獲取價格，然后單擊“立即訂購”按鈕重定向到新頁面。但是，我們無法控制用戶的行為，有些會直接點擊“立即訂購”按鈕。那么對于“立即訂購”按鈕配置，有沒有辦法啟用順序點擊（“獲取價格”->“立即訂購”），即當用戶單擊“立即訂購”按鈕時，程式將首先單擊“獲取價格”按鈕，然后“立即訂購”。
<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>
uj5u.com熱心網友回復：
最簡單的方法是使用 JQuery。IE：
<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 替換獲取價格的邏輯，這些 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/425261.html