Question

我已经决定将localStorage合并到我的WordPress联系页面表单中。我使用下面的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的单独参数。

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

1 个答案: