单击按钮提交时如何禁用操作表单？

Question

My html code like this :

<form id="payment-form" method="POST" action="http://myshop.dev/member/shop/payment/process">
    ...
    <button class="btn btn-danger pull-right" type="submit" >
        Checkout
    </button> 
</form

My javascript code like this :

//check if there is exist button forward browser or no
if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
    //disable action form
    $('#payment-form').attr('action', '')
    //call forward button on the browser
    history.go(1);
}
else {
    //display checkout detail
    $('#payment-form').attr('action', '/member/shop/payment/checkout')
    return true
}

I have a checkout button on the cart details of a purchase. If the user clicks the checkout button then it will show checkout details of a purchase

If the user clicks back button in browser, it will return to previous page, that is detail cart. If on that page, the user clicks the checkout button again, I want to : it will call the forward button in the browser

My problem is if the user clicks on the checkout button again, the action form is still working and there is still a refresh page

I want when the user clicks the second checkout button, it just call forward button in the browser and no refresh page

How can I do it?

Answer 1

<form action="javascript:void(0);" > </form>

Answer 2

I'm not sure I understand exactly what are you trying to do or why do it that way, but first, in my opinion, it is a horrible idea to control the flow of your site/web-app through the browser's history. Second, have you tried disabling the default behavior of the form's submit event?

For instance:

$("#payment-form").submit(function(event) {
    // this takes care of disabling the form's submission
    event.preventDefault();

    // the rest of your code...
});

I'm guessing you're going to want to add some condition to that function so that the form's submission is only disabled if the user tries to click the checkout button again (if I understood correctly). Anyway, let me know if this was helpful at all, and if it's not, try to explain a little bit more of why are you trying to do things this way and what exactly is the issue. Hope it helped.