从 PHP 调用时，Javascript 表单 reset() 不起作用

Question

我有一个简单的 HTML 联系表单和一些同样简单的 PHP 来发送电子邮件。发送电子邮件的 PHP 工作正常，但我想在发送电子邮件后重置（或清除）联系表单。但是，似乎没有任何技巧组合起作用。我的代码在下面。

<div class="col-sm-6 col-md-8">
   <form action="" id="contactForm" method="POST" autocomplete="off" enctype="multipart/form-data" target="stay_iframe">
      <input type="hidden" name="action" value="submit">
      <input type="text" style="display:none;" name="company" class="cinput" autocomplete="off" tabindex="-1">
      <div class="col-md-6"> <input name="yourName" id="yourName" value="" class="form-control" placeholder="Name" type="text" required> </div>
      <div class="col-md-6"> <input name="emailAddress" class="form-control" placeholder="Your email address" type="email" required> </div>
      <div class="col-md-12"> <input name="subject" class="form-control" placeholder="Subject" type="text" required> </div>
      <div class="col-md-12"> <textarea name="message" class="form-control" rows="6" placeholder="Message" type="text" required></textarea>
      </div>
      <div class="col-md-12"> <input value="SEND MESSAGE" class="form-control" type="submit"> </div>
      <div class="col-md-12"> <input value="RESET FORM" id="resetButton" class="form-control" type="reset"> </div>
   </form>

   <!-- Target iframe to prevent redirection -->
   <iframe name="stay_iframe" width="1" height="1" style="border:none; display:none;"></iframe>

    <script>
      function thanksAndReset()
      {
         const nameElement = document.getElementById("yourName");
         console.log(nameElement.name);
         console.log(nameElement.value);

         document.getElementById("contactForm").reset();

         document.getElementsByName("yourName").value = "";
         document.getElementsByName("emailAddress").value = "";
         document.getElementsByName("subject").value = "";
         document.getElementsByName("message").value = "";
         //alert("Thank you for your message.");
      }
   </script>

   <?php
   if (isset($_REQUEST['emailAddress']))
       {
         $yourName=$_REQUEST['yourName'];
         $emailAddress=$_REQUEST['emailAddress'];
         $subject=$_REQUEST['subject'];
         $message=$_REQUEST['message'];      
         $from="From: $yourName<$emailAddress>\r\nReturn-path: $emailAddress";
         mail("[email protected]", $subject, $message, $from);

         ?> <script> thanksAndReset(); </script> <?PHP
       }  
   ?>

 <button onClick="thanksAndReset();">Test</button>
</div>

ID 为“resetButton”的重置按钮有效。底部带有“测试”的按钮也可以使用。

但是，当从 PHP 内部调用

thanksAndReset()

函数时，

.reset()

和

.value = ""

行都没有任何作用。

alert()

行和

document.getElementById("yourName")

的第一位一样有效，除了当我尝试将其值写入控制台时它会写入

<empty string>

。至少我知道

thanksAndReset()

函数正在被调用。

如果我使用

echo '<script type="text/JavaScript">thanksAndReset();</script>';

调用该函数，我会得到相同的行为。

我做了很多搜索，我发现的几乎所有内容都与使重置按钮起作用有关。我不想要重置按钮，我想要自动重置（部分是为了整洁，部分是为了防止意外重复提交）。

那么，如何让它在点击提交按钮后发送邮件后重置或清除表单呢？

Answer 1

你不需要javascript来做你想做的事。只需提交表单，php 就会执行，然后它应该用空白表单呈现页面。

PHP只在服务器端执行，无法被javascript直接调用