HTML form controlled by javascript is sometimes submitting with a GET

Question

I have the following HTML form:

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>

As you can see the form has no "method" attribute. However it sometimes submits with a "GET".

How can I have the form only controlled by the JS above the form?

Answer 1

I did this:

form with no action and where enter does not reload page

you'll want to include action="javascript:void(0);" to your form to prevent page reloads and maintain HTML standard.