Bootstrap提示消息失效：表单提交跳转至PHP页而非原地显示

Hey there! Let’s get that contact form sorted so your success/error messages show up right in the .messages div on your original page, instead of jumping to contact.php. The core issue here is that your current form uses a standard synchronous submit, which forces a page reload. We’ll fix this with a little vanilla JavaScript (no extra libraries needed) to handle AJAX submission, and make tiny tweaks to your setup.

Step 1: Tweak the Form Tag #

First, update your form’s opening tag to remove the action attribute (our JS will handle sending data to contact.php directly). Keep the id since we’ll target it in our script:

<form id="contact-form" method="post" role="form">

Step 2: Add AJAX Handling JavaScript #

Paste this script right before the closing </body> tag on your request-interpreter.html page (or put it in an external JS file if you prefer):

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('contact-form');
  const messagesContainer = document.querySelector('.messages');

  form.addEventListener('submit', function(e) {
    // Stop the default page reload when submitting the form
    e.preventDefault();

    // Collect all form data
    const formData = new FormData(form);

    // Send data to contact.php via AJAX
    fetch('contact.php', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      // Clear any old messages
      messagesContainer.innerHTML = '';

      // Create a styled message element
      const alertElement = document.createElement('div');
      alertElement.classList.add('alert', data.type === 'success' ? 'alert-success' : 'alert-danger');
      alertElement.textContent = data.message;

      // Add the message to the .messages div
      messagesContainer.appendChild(alertElement);

      // Optional: Reset the form if submission was successful
      if (data.type === 'success') {
        form.reset();
      }
    })
    .catch(error => {
      // Handle network or unexpected errors
      messagesContainer.innerHTML = '<div class="alert alert-danger">Oops, something went wrong. Please try again later.</div>';
      console.error('Submission error:', error);
    });
  });
});

This code waits for the page to load, listens for the form submit event, sends the data to your PHP script in the background, then displays the response message directly in your .messages container. I used Bootstrap-style alert classes here—adjust the class names if your site uses different styling!

Step 3: Verify Your PHP Code #

Great news: Your existing contact.php already has built-in support for AJAX requests! The only thing to double-check is the $sendTo line. Right now it’s set to $_POST['email'], which sends the form submission email to the address the user entered. If you want the email sent to your own address instead, update that line to:

$sendTo = 'your-email@example.com'; // Replace with your actual email

Everything else in the PHP code is good to go.

Step 4: Optional Style for Messages #

If you don’t already have styles for alert messages, add this CSS to make them look clean:

.alert {
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 4px;
  border: 1px solid transparent;
}
.alert-success {
  background-color: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}
.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

That’s all! Now when users submit the form, the page won’t reload, and the success or error message will appear right where you want it.

内容的提问来源于stack exchange，提问作者Christian Luneborg