由 javascript 控制的 HTML 表单有时使用 GET 提交

Question

我有以下 HTML 表格：

fetch("/pm/con/")
      .then((result) => { return result.json(); })
      .then((data) => {
        // Initialize Stripe.js
        const stripe = Stripe(data.publicKey);
    
    
    document.querySelector("#submitBtn").addEventListener("click", () => {
        // Get Checkout Session ID
        var amount = document.getElementById('donationAmount').value;
        var amount_offset = amount + '00';
        fetch("/pm/create-checkout-session/"+amount_offset)
        .then((result) => { return result.json(); })
        .then((data) => {
          console.log(data);
          // Redirect to Stripe Checkout
          return stripe.redirectToCheckout({sessionId: data.sessionId})
        })
        .then((res) => {
          console.log(res);
        });
      });
    });


<form class="form-inline" id="contactForm" name="contact" >
                                        <div class="form-sec1">
                                            <div class="col-md-12 col-xs-12">
                                                <div class="form-group">
                                                    <label for="name">Amount <b>*</b></label>
                                                    <input type="text" id="donationAmount" name="donationAmount" class="form-control">
                                                </div>
                                            </div>
                                            
                                        <div class="form-sec3">
                                            <div class="col-md-12 col-xs-12">
                                                <button id="submitBtn" class="btn btn-primary hvr-sweep-to-right" name="submitBtn">Donate</button>
                                            </div>
                                        </div>
                                        
                                    </form>

如您所见，表单没有“方法”属性。 然而，它有时会提交一个“GET”。

我怎样才能让表单只由表单上方的 JS 控制？

Answer 1

我这样做了：

没有任何操作的表单，并且 enter 不会重新加载页面

你会想要包括 action="javascript:void(0);" 到您的表单以防止页面重新加载并保持 HTML 标准。