表单提交后无法触发Sweet Alert弹窗，如何实现弹窗并刷新页面？

Hey there! I see exactly what's going wrong here—your SweetAlert isn't popping up because the form's default submission behavior is immediately refreshing the page before the alert even has a chance to load. Let's fix this step by step.

Why It's Not Working #

When you submit a form with method="POST", the browser automatically sends the form data and reloads the page right away. This happens so fast that your myFunction() tries to run, but the alert gets cut off mid-process by the page refresh.

Solution: Block Default Behavior First, Then Handle Alert & Refresh #

We need to pause the form's default submission, show the alert, and then either submit the form properly or refresh the page once the user interacts with the alert.

Step 1: Fix the Button's Invalid Attribute #

First, correct your button code—you have duplicate type attributes, which is invalid. Change this:

<button type="submit" type ="hidden" value="send">Create my new website now</button>

To this:

<button type="submit" value="send">Create my new website now</button>

Step 2: Modify the Form & JavaScript Function #

Update your form to pass the event object to your function, then use that event to block the default submission. Then, use SweetAlert's callback to trigger form submission or page refresh after the alert is closed.

Here's the full modified code:

<form method="POST" onSubmit="return myFunction(event)">
  <div class="col-md-6"><input type="text" class="validate-required" placeholder="FirstName" name="fname" id="fname" required></div>
  <div class="col-md-6"><input type="text" class="validate-required" placeholder="LastName" name="LNAME" id="LNAME" required></div>
  <div class="col-md-6"><input type="text" class="validate-required" placeholder="Email" name="email" id="email" required></div>
  <div class="col-md-6"><input type="text" class="validate-required" placeholder="phone No." name="PHONE" id="PHONE" required></div>
  <div class="col-md-6"><input type="text" class="validate-required" placeholder="ADDRESS" name="ADDRESS" id="ADDRESS" required></div>
  <div class="col-md-6"><input type="text" class="validate-required" placeholder="Existing site" name="MMERGE3" id="MMERGE3" required></div>
  <div class="col-md-12"><textarea cols="" rows="" name="INSTR" id="INSTR"></textarea></div>
  <div class="col-md-12"><button type="submit" value="send">Create my new website now</button></div>
</form>

<script>
function myFunction(event) {
  // Stop the form from submitting immediately
  event.preventDefault();

  // Show the SweetAlert success message
  swal('Awesome!', 'Form Submitted Successfully!', 'success')
    .then(() => {
      // After the user closes the alert, submit the form to send data (page will refresh naturally)
      document.querySelector('form').submit();
      // If you just want to refresh without submitting form data, use:
      // window.location.reload();
    });

  // Extra safeguard to prevent accidental early submission
  return false;
}
</script>

Key Changes Explained #

• event.preventDefault(): This tells the browser to hold off on its default form submission behavior.
• .then(() => { ... }): SweetAlert is asynchronous, so this callback runs only after the user clicks "OK" on the alert. Inside it, we manually submit the form to send your data, which will trigger the page refresh afterward.
• return false: A backup to ensure the form doesn't submit before the alert is displayed.

If You're Using SweetAlert2 (Modern Version) #

If you've upgraded to the newer SweetAlert2 library, adjust the alert code to this:

Swal.fire({
  title: 'Awesome!',
  text: 'Form Submitted Successfully!',
  icon: 'success'
}).then(() => {
  document.querySelector('form').submit();
});

That should do the trick! Now your alert will show up properly, and once the user closes it, the form will submit and the page will refresh as expected.

内容的提问来源于stack exchange，提问作者Kajal Giri