JS 在 PHP 可以发送电子邮件之前删除表单数据答案

【问题标题】：JS removes form data before PHP can send emailJS 在 PHP 可以发送电子邮件之前删除表单数据
【发布时间】：2021-02-19 16:08:36
【问题描述】：

在这里遇到了一个小怪。

当我提交表单时，我在提交按钮上有一个 JS click 事件监听器 - 这是为了删除 HTML 值并添加感谢消息（非常简单的东西）。

然而，奇怪的是，JS 似乎在 PHP 之前起作用，因为在我删除删除 HTML 值的 JS 之前，所有电子邮件都有空白值。

代码是：

非常简单的 HTML 表单（为了显示可能存在的问题，已对其进行了删减）

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（在点击提交按钮上有一个事件监听器）：

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;
      }) 
    }
  })
}

e.disabled = true; 正在检查每个表单输入并将其禁用，我还使用了e.value = ""。这两个都以将变量设置为输入值的形式停止 PHP 操作。

所以问题是，

我是不是做错了什么（也许是对的.....？）
有没有办法让 PHP 在使用 JS 删除它们之前先获取值？

请随时在此处提出任何问题。欢迎任何见解。

【问题讨论】：

“然而，奇怪的是，JS 似乎在 PHP 之前运行” - 这里没有什么奇怪的。这就是应该发生的事情。要么在删除数据之前通过 AJAX 调用发送数据，并阻止浏览器提交数据，要么让浏览器提交数据并在页面刷新时在服务器上进行整理。
感谢您在这里的输入，我不知道JS会在浏览器中运行在PHP之前，这确实有助于消除我的误解。
PHP 不在浏览器中运行。这里发生的是submit 事件在表单实际发送到服务器之前运行，因此您对表单本身所做的任何更改都可以从 PHP 中看到。

标签： javascript php html forms dom-events

【解决方案1】：

submit 事件作为浏览器表单提交算法的一部分，在浏览器甚至查看表单字段之前，因此您在该事件中所做的任何更改都将提交给服务器，您将可以访问它们来自 PHP。

为了在不影响提交的情况下更改表单，您必须在浏览器的表单提交完成后、页面导航到表单操作之前的某个时间点执行此操作：

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

请记住，setTimeout(func, msecs) 的意思是“运行func只要有机会，但不能早于msec 毫秒”。当浏览器运行表单提交算法时，没有Javascript代码（除了同步事件submit和formdata）可以运行，所以func运行的最早机会是在表单提交之后。

【讨论】：