php 脚本可能与 jQuery localStorage 脚本冲突

Question

我决定在我的 WordPress 联系页面表单中加入 localStorage。我正在使用下面的 jQuery 和 PHP 脚本在表单中存储未发送的文本，然后在完成后发送信息。该脚本在大部分情况下都有效，它在未完全完成时会发送并给出错误消息。我遇到的问题是表单字段中的信息正确并且在浏览器刷新后发送的字段没有清除。

我已经尝试修改这行脚本，它应该清除字段，但我没有运气。

//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 脚本：

<?
  //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 脚本：

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

您设置formElements 的调用不正确。应该是：

var formElements = $('#name, #message, #email');

选择器列表应该都在一个字符串中，而不是 jQuery 的单独参数。