JS在PHP可以发送email之前删除表单数据

Question

Ran into a small oddity here.

When I submit a form, I have a JS click event listener on the submit button - this is to remove the HTML values and add a thank you message (pretty simple stuff).

Oddly, however, it seems that the JS is acting before the PHP because all emails have blank values until I remove the JS that removes the HTML values.

---

The code is:

pretty simple HTML form (this has been cut down to show what the problem might be)

HTML:

<form method="post" action="contactForm.php" id="contact-form" target="hiddenForm">
<textarea class="form-control input-outline reqItem" rows="6" cols="50" name="message" form="contact-form" placeholder="Message" required></textarea>
<button type="submit" class="btn btn-outline rounded-0 d-block d-md-inline-block submit-button">Submit</button>
</form>

JS (has an event listener on the submit button for click):

if(document.querySelector('.submit-button')){
  
  document.getElementById('contact-form').addEventListener('submit', function(e){
    // Check that form is valid
    if(document.querySelector('form').checkValidity()){
    
      document.querySelectorAll('.checkbox').forEach(e => {
        if(e.classList.contains('checked')){
          e.classList.remove('checked')
        }
      })
    
      // Change messagae to thank you
      e.target.classList.add('submit-hide')
      document.querySelector('.submit-thankyou').classList.add('submit-show')
  
      // remove all field values  <<<<< issue seems to be being caused here

      document.querySelectorAll('.form-control').forEach(e => {
        // this causes the form to lose all data
        e.disabled = true;
      }) 
    }
  })
}

The e.disabled = true; Is going over each form input and making it disabled, I have also used e.value = "" . Both of these stop PHP action in the form of setting variables as the values of the inputs.

So the question is,

1. am I doing something wrong (maybe right.....?)
2. is there a way to allow the PHP to act first getting the values before removing them with the JS?

Feel free to ask any questions here. Any insights are welcome.

Answer 1

The submit event as part of the browser's form submission algorithm, before the browser even looks at the form's fields, so any changes you make as part of that event will be submitted to the server and you'll have access to them from PHP.

In order to change the form without affecting the submission, you'll have to do that at some point after the browser's form submission finishes, but before the page navigates to the form's action:

document.getElementById('contact-form').addEventListener('submit', function(){
    setTimeout(function() {
        // Modify the form here.
    }, 0);
});

Remember that setTimeout(func, msecs) means "run func whenever you have the chance , but no earlier than msec milliseconds". While the browser is running the form submission algorithm, no Javascript code (other than that for the synchronous events submit and formdata ) can run, so the earliest chance for func to run will be after the form is submitted.