如何在成功提交后使用php PDO清除表单

Question

i have this php code in my form. I used pdo to get into mysql database and insert data. A simple form where use enters his name, email, comments, and a checkbox. I use this in jquery mobile environment.

<?php
    $hostname = 'localhost';
    $username = 'root';
    $password = '';
    $dbName = 'database';

try
    {
        $dbh = new PDO("mysql:host=$hostname;dbname=$dbName", $username, $password);
        $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $dbh->exec('SET NAMES "utf8"');
    }
        catch(PDOException $e) 
    {
        echo "Sorry, you are experiencing server Error: ".$e->getMessage();
        exit(); 
    }     

if(isset($_POST['sendEmail'])) 
{
  try
  {
      $senderName   = $_POST['sendName'];
      $senderEmail  = $_POST['sendEmail'];
      $comments     = $_POST['comments'];
      if (isset($_POST['offer'])) {
           $offer = 1;   
      } else {
           $offer = 0;   
      }
      $dateTimeSent = date('Y-m-d H:i:s');

      $q= "INSERT INTO comments(sendName, sendEmail, comments, offer, dateTimeSent) VALUES (:sendName, :sendEmail, :comments, :offer, :dateTimeSent);";
      $query    = $dbh  ->prepare($q);
      $results  = $query->execute(array(
          ":senderName"=>$sendName,
          ":senderEmail"=>$sendEmail,
          ":comments"=>$comments,
          ":dateTimeSent"=>$dateTimeSent,
          ":offer"=>$offer,
      ));
  }
    catch (PDOException $e)
  {
    $error = 'Error adding elements to database: ' . $e->getMessage();
    include 'error.html.php';
    exit();
  }

  exit();
}

?>

This is the form I use:

<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST" name="comments" id="comments">  

<div data-role="fieldcontain">
    <label for="sendName">From: </label>
    <input type="text" name="sendName" class="validate[required"] id="sendName" data-clear-btn="true" placeholder="Enter name" required >
</div>

<div data-role="fieldcontain">
    <label for="sendEmail">Email: </label>
    <input type="email" name="sendEmail" id="sendEmail" class="validate[required,custom[email]]"  data-clear-btn="true" placeholder="[e-mail]" required >
</div>

<label for="comments"></label>
    <textarea name="comments" id="comments" value="comments"></textarea> 
<label for="offer">

<label for="offer">
    <input name="offer" type="checkbox" id="offercheckbox">Please check</label>
</label>

<input type="button" name="Send Email" value="Submit" id="suggestSubmit" onclick="submitForm()"> 

</form>

My problem is I am trying to figure out how to clear the form fields after a successful submission. I found an option of using Jquery onclick function. I inserted this code before the end of form tag:

<script>
  function submitForm() {
    $('form[name="comments"]').submit();
    $('input[type="email"], textarea').val('');
    $('input[type="text"], textarea').val('');
  }
</script>

However, if the form was submitted but failed in the jquery validation, all the fields will been cleared even if the submission failed due to but not limited to form validation. So the user when fixing his errors has to reenter all data in all the form fields again. Not good.

I checked the other answers here and other online sources, but i cant seem to make it work.

What`s is the best approach in clearing form fields after a successful submission, if I use PHP-PDO in jquery mobile?

PS. I am a newbie. Thanks.

Answer 1

After a successful submission do http redirect to the form page using header function, this is a pretty new request which should view forms elements in the page with empty status, just like the user is visiting this page for the first time.

It would also be nice to view a success message for the user when opening this page in order to get the sense that his previous request has been processed successfully.