（HTML/JavaScript）データを別のHTMLページにシリアル化する表示

Question

シリアル化データをテーブル入力から別のHTMLページに表示しようとしています。私が現在持っているのは、JavaScriptからアラートにデータをシリアライズすることです。

HTMLファイルのコードブロック

<form id="form"> 
<div class="table-responsive"> 
    <table class="table table-bordered table-striped table-highlight"> 
     <thead class="thead-inverse"> 
      <tr> 
       <th>Race</th> 
       <th>Equity Partners</th> 
       <th>Non-Equity Partners</th> 
       <th>Associates</th> 
       <th>Counsel</th> 
       <th>Other Lawyers</th> 
       <th>Totals</th> 
      </tr> 
     </thead> 
     <tbody> 


      <tr> 

       <td><label>American Indian/Alaska Native</label></td> 

       <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_EP" value="" placeholder="Enter Value Here" /></td> 

       <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_NEP" value="" placeholder="Enter Value Here" /></td> 

       <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_A" value="" placeholder="Enter Value Here" /></td> 

       <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian1_C" value="" placeholder="Enter Value Here" /></td> 

       <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_OL" value="" placeholder="Enter Value Here" /></td> 

       <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_T" value="" placeholder="Enter Value Here" /></td> 

      </tr> 

のJavaScriptファイルのコードブロック

$("#btn-ser1").click(function(){ 
    data_array = $("#form").serialize(); 

    alert(data_array); 

Answer 1

さてあなたは、サーバーベースのスクリプトへのアクセス権を持っている場合は、投稿するPHP/ASPまたは別のサーバーサイドのスクリプト言語を使用することができますし、 data_arrayを印刷します。

PHPの例：

ページ2

<script> 
data = <? if (isset($_POST['data_page1'])){ echo $_POST['data_page1'];}else{echo "null";}>?; 
</script> 

ない場合、私はこのためlocalstorageをお勧めします。 JSONに変換し、serializeを使用しない。

スニペットはのlocalStorageでエラーがスローされますので、ここで働くフィドルです：https://jsfiddle.net/gutw9o6s/

//page 1 
 
$("#btn-ser1").click(function() { 
 
    data_array = $("#form >input").filter(function() { 
 
    return $(this).val(); 
 
    }); 
 

 

 
    localStorage.setItem('data_page1', JSON.stringify(data_array)); 
 
}); 
 

 
//page 2 
 
$("#btn-ser2").click(function() { 
 
    if (localStorage.key('data_page1')) { 
 
    data = JSON.parse(localStorage.getItem('data_page1')); 
 
    console.log(data); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form"> 
 
    <div class="table-responsive"> 
 
    <table class="table table-bordered table-striped table-highlight"> 
 
     <thead class="thead-inverse"> 
 
     <tr> 
 
      <th>Race</th> 
 
      <th>Equity Partners</th> 
 
      <th>Non-Equity Partners</th> 
 
      <th>Associates</th> 
 
      <th>Counsel</th> 
 
      <th>Other Lawyers</th> 
 
      <th>Totals</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 

 

 
     <tr> 
 

 
      <td><label>American Indian/Alaska Native</label></td> 
 

 
      <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_EP" value="" placeholder="Enter Value Here" /></td> 
 

 
      <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_NEP" value="" placeholder="Enter Value Here" /></td> 
 

 
      <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_A" value="" placeholder="Enter Value Here" /></td> 
 

 
      <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian1_C" value="" placeholder="Enter Value Here" /></td> 
 

 
      <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_OL" value="" placeholder="Enter Value Here" /></td> 
 

 
      <td><input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="form-control" name="AmericanIndian_T" value="" placeholder="Enter Value Here" /></td> 
 

 
     </tr> 
 

 
     </tbody> 
 
    </table> 
 
    </div> 
 
</form> 
 
<button id="btn-ser1">Set page 1</button> 
 
<button id="btn-ser2">Get page 2</button>

は、誰かが成功して2ページ目に来た後のlocalStorageを削除することを忘れないでください、それ以外の場合はlocalStorageが値を保持するためです。