javascript - 将数据保存到本地存储并在提交后使用它来填充字段

Question

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

我想要做的是从第一个弹出窗口自动填充电子邮件和姓名字段，并使用 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('提交', 函数(事件){

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

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