如何使用PHP提交表单后留在当前页面并更新按钮文本？

Got it, the problem with your current setup is that standard form submissions force a page redirect to your PHP file. To keep users on the same page and update the button text once submission succeeds, you’ll need to use AJAX to send the form data asynchronously in the background. Here’s how to implement this smoothly:

Step 1: Update Your HTML Form #

First, add IDs to your form and submit button so JavaScript can easily target them. We’ll keep the core form structure intact:

<form id="subscribe-form" method="POST">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <button type="submit" id="submit-button">Subscribe</button>
</form>

Step 2: Add JavaScript for AJAX Submission #

This code will listen for the form’s submit event, block the default page reload, send data to your PHP file, and update the button based on the result:

// Grab elements from the DOM
const form = document.getElementById('subscribe-form');
const submitBtn = document.getElementById('submit-button');

// Listen for form submission
form.addEventListener('submit', function(e) {
  // Prevent the default page reload behavior
  e.preventDefault();

  // Disable button and update text to show submission is in progress
  submitBtn.disabled = true;
  submitBtn.textContent = 'Submitting...';

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

  // Send AJAX request to your PHP file
  fetch('your-php-file.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json()) // Parse PHP's JSON response
  .then(data => {
    if (data.success) {
      // Success: Update button text and reset the form (optional)
      submitBtn.textContent = 'Submitted';
      form.reset();
    } else {
      // Error: Re-enable button and show feedback
      submitBtn.textContent = 'Try Again';
      submitBtn.disabled = false;
      alert(`Oops! ${data.error}`);
    }
  })
  .catch(error => {
    // Handle network errors
    submitBtn.textContent = 'Try Again';
    submitBtn.disabled = false;
    alert(`Request failed: ${error.message}`);
  });
});

Step 3: Modify Your PHP to Return JSON Responses #

Your existing PHP sends the email, but we need it to return a JSON status so JavaScript knows if the submission worked. Update your PHP file like this:

<?php
// Initialize response array
$response = ['success' => false, 'error' => ''];

if (isset($_POST['email'])) {
  $email_to = "myemailaddress@test.com";
  $email_subject = "New Subscriber";
  $name = $_POST['name'];
  $email = $_POST['email'];

  function clean_string($string) {
    $bad = array("content-type","bcc:","to:","cc:","href");
    return str_replace($bad, "", $string);
  }

  $email_message = "Name: ".clean_string($name)."\n";
  $email_message .= "Email: ".clean_string($email)."\n";

  // Set email headers
  $headers = 'From: '.$email."\r\n".
             'Reply-To: '.$email."\r\n" .
             'X-Mailer: PHP/' . phpversion();

  // Attempt to send email and update response
  if (mail($email_to, $email_subject, $email_message, $headers)) {
    $response['success'] = true;
  } else {
    $response['error'] = 'Failed to send your subscription request.';
  }
} else {
  $response['error'] = 'Please provide a valid email address.';
}

// Send JSON response back to JavaScript
header('Content-Type: application/json');
echo json_encode($response);
exit;
?>

Key Notes: #

• Prevent Duplicate Submissions: We disable the button during submission so users can’t click multiple times accidentally.
• Clear User Feedback: The button text updates to "Submitting..." to signal progress, then switches to "Submitted" once successful.
• Error Handling: We cover both email sending failures and network issues, so users get clear feedback if something goes wrong.

内容的提问来源于stack exchange，提问作者Jordan Wood