php script possible conflicting with jQuery localStorage script - php

Question

I have decided I'd like to incorporate localStorage on my WordPress contact page form. I am using the jQuery and PHP script below to store unsent text within the form and then once completed send the information. The script works for the most part it does send and give error messages when not fully completed. The problem I'm encountering is when the information in the form fields are correct and sent the fields are not clearing after the browser refresh.
I've tried modifying this line of script which is suppose to clear the fields but I've had no luck .
//My field id's
var formElements = $('#name, #message, #email');
//on form submit remove item from localstorage
formElements.submit(function(e){
e.preventDefault();
formElements.each(function(){
localStorage.removeItem($(this).attr('id'));
});
});
PHP Script:
<?
//response generation function
$response = "";
//function to generate response
function my_contact_form_generate_response($type, $message){
global $response;
if($type == "success") $response = "<div class='success'>{$message}</div>";
else $response = "<div class='error'>{$message}</div>";
}
//response messages
$not_human = "Human verification incorrect.";
$missing_content = "Please supply all information.";
$email_invalid = "Email Address Invalid.";
$message_unsent = "Message was not sent. Try Again.";
$message_sent = "Thanks! Your message has been sent.";
//user posted variables
$name = $_POST['message_name'];
$email = $_POST['message_email'];
$message = $_POST['message_text'];
$human = $_POST['message_human'];
//php mailer variables
$to = get_option('admin_email');
$subject = "Someone sent a message from ".get_bloginfo('name');
$headers = 'From: '. $email . "\r\n" .
'Reply-To: ' . $email . "\r\n";
if(!$human == 0){
if($human != 2) my_contact_form_generate_response("error", $not_human); //not human!
else {
//validate email
if(!filter_var($email, FILTER_VALIDATE_EMAIL))
my_contact_form_generate_response("error", $email_invalid);
else //email is valid
{
//validate presence of name and message
if(empty($name) || empty($message)){
my_contact_form_generate_response("error", $missing_content);
}
else //ready to go!
{
$sent = wp_mail($to, $subject, strip_tags($message), $headers);
if($sent) my_contact_form_generate_response("success", $message_sent); //message sent!
else my_contact_form_generate_response("error", $message_unsent); //message wasn't sent
}
}
}
}
else if ($_POST['submitted']) my_contact_form_generate_response("error", $missing_content);
?>
jQuery Script :
jQuery(function($) {
var formElements = $('#name, #message, #email');
formElements.on('keyup', function(){
//put value in the localStorage
localStorage.setItem($(this).attr('id'), $(this).val());
});
//on form submit remove item from localstorage
formElements.submit(function(e){
e.preventDefault();
formElements.each(function(){
localStorage.removeItem($(this).attr('id'));
});
});
//if form not submitted and page refreshed get and set the values
formElements.each(function(){
$(this).val(localStorage.getItem($(this).attr('id')));
});
});

Answer 1

Your call to set formElements is not correct. It should be:
var formElements = $('#name, #message, #email');
The list of selectors should all be in one string, not separate arguments to jQuery.