Javascript form reset() doesn't work when called from PHP

Question

I have a simple HTML contact form with some equally simply PHP to send the email. The PHP to send the email works fine, but I want to reset (or clear) the contact form after the email has been sent. However, no combination of tricks seems to work. My code is below.

<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("info@redacted.com", $subject, $message, $from);

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

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

The reset button with ID 'resetButton' works. The button at the bottom with 'Test' on it also works.

However, when calling the thanksAndReset() function from inside the PHP, neither the .reset() nor .value = "" lines do anything.

The alert() line works, as does the first bit with document.getElementById("yourName"), except for the fact that when I try to write its value to the console it writes <empty string>. At least I know the thanksAndReset() function is being called.

I get the same behaviour if I call that function using echo '<script type="text/JavaScript">thanksAndReset();</script>';.

I've done a lot of searching and pretty much everything I find relates to making a reset button work. I don't want a reset button, I want to reset automatically (partly for tidiness and partly to safeguard against accidental double submission).

So, how can I make it reset or clear the form after sending the email after clicking the submit button?

Edit: I meant to mention the target i-frame which I use as a trick to stop it reloading the entire page when you click the submit button. This is rather jarring for the user and should be avoided. This is, however, what leads to the need to reset the form.

Answer 1

You don't need the javascript to do what you are looking to do. Just submit the form and the php will execute and then it should render the page with the blank form.

The PHP is only executed on the server and so cannot be called by the javascript directly.