データをLocalstorageに保存して、サブミット後にフィールドにデータを入力するために使用します

Question

私は2ステップのオプティンポップアップを持っています。最初のステップは、電子メールと名前をキャプチャしてユーザーがデータをサブミットするとキャプチャし、より多くの情報を得るためのフィールドが増えたフォーム、電子メールと名前フィールド。

私がしたいのは、自動的に最初のポップアップから電子メールと名前フィールドにデータを入力してdisplay:noneで非表示にして、データを送信した後にユーザーが表示できないようにすることです（すべてがアクティブキャンペーンになります）。

：

二つの形式

は、どのようなデータを保存して作業し、ここで

を必要なときにそれを呼び出していませんが、私は

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を使用していますJSで、うまく動作します

<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

あなたは属性値をラップ引用符を忘れてしまったので、あなたが要素を探して道は、間違っている：

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

は次のようになります。

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

のように...

ところで私はよ"無効なまたは不正な文字列が指定されました"のようなエラーは報告されません。

Answer 2

クリックされた入力は送信ボタンなので、クリックハンドラ内のJSが起動する前にページがナビゲートしている可能性があります。

試してみて、交換すると $('#arlington-field-submit').on('click', function(){

：

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