表单提交成功后永久隐藏/禁用及提交状态保留显示方案咨询

Hey Paul, great question! Since you already have form data stored in MySQL, we can build on that to implement either of your two requirements. Let's walk through each approach step by step:

This approach keeps the UI clean once the user has completed their submission:

• Step 1: Check submission status on login
  When a user logs in, run a database query to check if they've already submitted the form. Make sure to use parameterized queries to avoid SQL injection:

  SELECT id FROM form_submissions WHERE user_id = ? LIMIT 1;
  

  Replace user_id with the unique identifier for your logged-in user (like their account ID) and form_submissions with your table name.

• Step 2: Pass status to the frontend
  From your backend (e.g., PHP, Node.js, Python), send a boolean flag (like hasSubmittedForm) to the frontend. Then conditionally render the form or the success message:
  Example with PHP & plain HTML:

  <?php
  // Assume $hasSubmittedForm is true if the query returned a record
  if ($hasSubmittedForm): ?>
    <div class="alert alert-success">Form submitted</div>
  <?php else: ?>
    <!-- Your full form HTML here -->
    <form action="/submit-form" method="post">
      <!-- Form fields -->
    </form>
  <?php endif; ?>
  

  Example with Vue.js:

  <template>
    <div v-if="hasSubmitted">
      <p class="success-text">Form submitted</p>
    </div>
    <form v-else @submit.prevent="handleSubmit">
      <!-- Form fields with v-model bindings -->
    </form>
  </template>
  
  <script>
  export default {
    data() {
      return { hasSubmitted: false };
    },
    async mounted() {
      // Fetch submission status from your API endpoint
      const response = await fetch('/api/check-submission-status');
      this.hasSubmitted = await response.json();
    },
    methods: {
      async handleSubmit() {
        // Handle form submission logic, then update hasSubmitted to true
      }
    }
  };
  </script>
  

• Step 3: Lock down backend validation
  Don't rely solely on frontend hiding—add a check in your form submission endpoint. If the user tries to resubmit, return an error response (e.g., 409 Conflict) and show a message like "You've already submitted this form."

This lets users review their submitted information without making changes:

• Step 1: Fetch saved form data on login
  Query the database to retrieve the user's existing submission:

  SELECT * FROM form_submissions WHERE user_id = ? LIMIT 1;
  

  Fetch all the fields you need (name, email, etc.) to populate the form.

• Step 2: Populate and disable the form
  Fill the form fields with the saved data and add the disabled attribute to each input (or the entire form) to prevent edits:
  Example with plain HTML & PHP:

  <form>
    <div class="form-group">
      <label>Name:</label>
      <input type="text" value="<?php echo htmlspecialchars($savedData['name']); ?>" disabled>
    </div>
    <div class="form-group">
      <label>Email:</label>
      <input type="email" value="<?php echo htmlspecialchars($savedData['email']); ?>" disabled>
    </div>
    <!-- Repeat for all form fields -->
    <p class="note">Your form has been submitted. You can view your details above.</p>
  </form>
  

  Example with React:

  import { useEffect, useState } from 'react';
  
  function ViewSubmittedForm() {
    const [savedData, setSavedData] = useState(null);
  
    useEffect(() => {
      fetch('/api/get-saved-form-data')
        .then(res => res.json())
        .then(data => setSavedData(data))
        .catch(err => console.error('Error fetching data:', err));
    }, []);
  
    if (!savedData) return <div>Loading your submission...</div>;
  
    return (
      <div>
        <h3>Your Submitted Details</h3>
        <form>
          <input type="text" value={savedData.name} disabled />
          <input type="email" value={savedData.email} disabled />
          {/* Add all other fields */}
        </form>
        <p className="info-text">This form is disabled as you've already submitted it.</p>
      </div>
    );
  }
  
  export default ViewSubmittedForm;
  

• Optional: Add an edit workflow
  If you want to let users update their submission later, add an "Edit" button that removes the disabled attributes. Make sure to update the database with the new values when they resubmit, and re-disable the form after save.

Key Notes for Both Approaches #

• Always validate submission status on the backend—frontend checks can be bypassed by savvy users.
• Use htmlspecialchars() (or equivalent in your language) when rendering saved data to prevent XSS attacks.
• Ensure your user_id mapping is correct so each user only sees their own submission status/data.

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