Question

我有两个步骤的optin弹出窗口，第一步是捕获电子邮件和名称，当用户点击提交时捕获数据，然后出现另一个弹出窗口，新弹出窗口有一个包含更多字段的表单以获取更多信息，另外还有电子邮件和名称字段。

我想要做的是自动填充第一个弹出窗口中的电子邮件和名称字段并使用display:none隐藏它们，以便用户无法看到它们，提交后再次捕获数据（全部转到activecampaign）。

这两种形式工作得很好，不起作用的是保存数据并在需要时调用它

这是我使用

的js

jQuery(function($){
  // PART I: Saving user details locally

    $('#arlington-field-submit').on('click', function(){

    // check if the user's browser has localStorage support
    if (typeof(Storage) !== "undefined") {
        // Code for localStorage/sessionStorage.
        // store the full name in localStorage
        var fullname = document.querySelector("input[name=arlington-name]");
        localStorage.user_name = fullname.value;

        // save the email in localStorage
        var email = document.querySelector("input[name=arlington-email]");
          $("input[name=fullname]").val(localStorage.getItem("server"));
        localStorage.user_email = email.value;

    }
  });

  // PART II: Pre-filling forms forms with locally saved values
  if (typeof(Storage) !== "undefined") {

    // check if the user has a name field stored 
    if (localStorage.user_name) {
      name_field = document.querySelector("._form input[name=fullname]");
      name_field.value = localStorage.user_name;
    }

    // check if the user has an email field stored
    if (localStorage.user_email) {
      email_field = document.querySelector("._form input[name=email]");
      email_field.value = localStorage.user_email;
    }

    }
});

首先形成html：

    <div id="arlington-element-form" class="arlington-element-form arlington-element" data-element="form">
<div id="arlington-form" class="arlington-form arlington-has-name-email arlington-has-buttons">
   <div class="arlington-form-wrap"><input id="arlington-field-comments" name="arlington-comments" type="text" data-selectable="true" data-target="#builder-setting-comments_value" class="arlington-field-comments" placeholder="" value="" style="" autocomplete="off"><input id="arlington-field-name" name="arlington-name" type="text" data-selectable="true" data-target="#builder-setting-name_value" class="arlington-field-name" placeholder="Enter your name here..." value="">
   <input id="arlington-field-email" name="arlington-email" type="email" data-selectable="true" data-target="#builder-setting-email_value" class="arlington-field-email" placeholder="Enter your email address here..." value="" >
 <input id="arlington-field-submit" name="arlington-submit" type="submit" data-selectable="true" data-target="#builder-setting-submit_value" class="arlington-field-submit" value="JOIN NOW" >
   </div>
   <div class="arlington-yesno-wrap">
   <button id="arlington-button-yes" type="button" name="arlington-yes" data-selectable="true" data-target="#builder-setting-yes_value" data-action="form" data-type="yes" class="arlington-button-yes arlington-button-yesno">Submit!</button>
   </div></div></div>

第二种形式html：

<form method="POST" action="xxxxxx" id="_form_8_" class="_form _form_8 _inline-form _dark" novalidate> <input type="hidden" name="u" value="8" /> <input type="hidden" name="f" value="8" /> <input type="hidden" name="s" /> <input type="hidden" name="c" value="0" /> <input type="hidden" name="m" value="0" /> <input type="hidden" name="act" value="sub" />    <input type="hidden" name="v" value="2" />
    <div class="_form-content">
        <div class="_form_element _x72304349 _full_width "> <label class="_form-label"> Full Name </label>
            <div class="_field-wrapper"> <input type="text" name="fullname" placeholder="Type your name" /> </div>
        </div>
        <div class="_form_element _x10201592 _full_width "> <label class="_form-label"> Email* </label>
            <div class="_field-wrapper"> <input type="text" name="email" placeholder="Type your email" required/> </div>
        </div>
        <div class="_form_element _x29901314 _full_width "> <label class="_form-label"> Phone </label>
            <div class="_field-wrapper"> <input type="text" name="phone" placeholder="Type your phone number" /> </div>
        </div>
        <div class="_button-wrapper _full_width"> <button id="_form_8_submit" class="_submit" type="submit"> Submit </button> </div>
        <div class="_clear-element"> </div>
    </div>
</form>

Answer 1

由于正在点击的输入是提交按钮，因此在点击处理程序中的JS有机会触发之前，页面可能会导航。

尝试并替换 $('#arlington-field-submit').on('click', function(){

使用：

$('#_form_8_').on('submit', function(event){

然后，您可以阻止表单实际提交，以便您的JS可以运行：

$('#_form_8_').on('submit', function(event){
  event.preventDefault();
  // Do localStorage stuff
  $(this).submit(); // submit the form normally after localStorage is saved
});

Answer 2

查找元素的方式是错误的，因为您忘记了包装属性值的引号：

var fullname = document.querySelector("input[name=arlington-name]");

应该是：

var fullname = document.querySelector('input[name="arlington-name"]');

等等......

顺便说一句，我很惊讶您没有报告错误，例如＆＃34;指定了无效或非法字符串＆＃34;。

将数据保存到Localstorage并使用它在提交后填充字段

2 个答案: