IE浏览器表单重复提交及请求method为空问题的修复咨询

Hey there, let’s dig into this frustrating IE-only problem—we’ve all been there dealing with old browser quirks! The double call to your reviewpay endpoint (with the first one missing an HTTP method) is almost certainly tied to IE’s weird handling of form events or button defaults. Here’s how to fix it step by step:

First, Understand the Root Causes #

IE has some unique behavior that triggers this:

• Unspecified <button> tags default to type="submit" in IE, which can trigger an extra form submit alongside your custom JS.
• If you’re mixing native form submission with AJAX, IE might fire both at once.
• The empty method on the first call usually means your JS didn’t properly initialize the request before IE tried to send it, often due to missing event prevention.

Step-by-Step Fixes #

1. Lock Down Your Button Types #

This is the most common fix for IE double-submits. If you’re using a button to trigger your form action, always explicitly set its type:

<!-- Bad: IE treats this as a submit button by default -->
<button onclick="submitReviewPay()">Submit</button>

<!-- Good: Tells IE this is a regular button, no auto-submit -->
<button type="button" onclick="submitReviewPay()">Submit</button>

If you want to use the form’s native submit event, bind your logic directly to the form instead of the button—this avoids conflicting click/submit events.

2. Block the Default Form Submit Action #

If you’re using AJAX to call reviewpay, you must prevent the browser’s default form submission—otherwise IE will fire both your AJAX call and the native form post. Here’s how to do it cross-browser:

function submitReviewPay(e) {
  // Grab the event object (IE uses window.event instead of the parameter)
  const event = e || window.event;
  
  // Stop the default form submit
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    // IE 8 and below fallback
    event.returnValue = false;
  }

  // Now run your AJAX call with explicit method
  const formData = new FormData(document.getElementById('your-form-id'));
  fetch('/reviewpay', {
    method: 'POST', // Make sure this is clearly set!
    body: formData
  })
  .then(res => res.json())
  .catch(err => console.error('Request failed:', err));
}

If you’re binding to the form’s submit event instead, apply the same prevention logic there.

3. Check for Duplicate Event Bindings #

Sometimes code accidentally binds the submit logic twice—IE is more sensitive to this than Chrome. To fix it, clean up old bindings before adding new ones:

const form = document.getElementById('your-form-id');

// Unbind existing events (IE uses detachEvent)
if (form.detachEvent) {
  form.detachEvent('onsubmit', submitReviewPay);
} else {
  form.removeEventListener('submit', submitReviewPay);
}

// Rebind the event
if (form.attachEvent) {
  form.attachEvent('onsubmit', submitReviewPay);
} else {
  form.addEventListener('submit', submitReviewPay);
}

4. Ensure Your AJAX Method Is Explicit #

The empty method issue happens when IE tries to send a request before your JS sets the method. If you’re using native XMLHttpRequest instead of fetch, double-check you’re setting the method correctly:

const xhr = new XMLHttpRequest();
// Explicitly set POST method here—don't skip this!
xhr.open('POST', '/reviewpay', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // Handle your response
  }
};
xhr.send(new FormData(document.getElementById('your-form-id')));

5. Disable IE's Form Cache #

IE has a quirky form auto-complete/cache feature that can cause duplicate requests. Add autocomplete="off" to your form to disable it:

<form id="your-form-id" autocomplete="off">
  <!-- Your form fields here -->
</form>

You can also add a Cache-Control: no-cache header to your server response for the reviewpay endpoint to prevent IE from caching the request.

Test It Out! #

After applying these fixes, fire up IE, open the F12 dev tools, and check the Network tab. You should only see one reviewpay call, with the correct HTTP method. If it’s still acting up, double-check that you didn’t miss any button types or event preventions—those are the usual culprits.

内容的提问来源于stack exchange，提问作者Anand Kumar