2017-05-06 1 views
2

私はこれに固執しています。私はjqueryを値userに応じて実行し、同じページに結果を表示するページで実行しました。それはうまく動作しますが、私はそれを次のページに表示したくありません。
どうすればいいですか?
私はajaxコールを通して、私はPHPに結果を与えることができると聞いてきましたが、そこに保存することができますが、私はそれを行う方法を知らないか、それとも簡単な方法があれば分かりますか?jQuery関数の結果を保存して他のページに表示する方法

<form method="post"> 
    <div class="form-group row"> 
     <label for="age" class="col-sm-7">&bull; What is the age of the oldest person applying? </label> 
     <div class="col-sm-10"> 
      <select type="age" class="form-control form-control-sm" id="age" name="age"> 
       <option value="" selected="" disabled="">Please Select</option> 
       <option value="Under 35">Under 35</option> 
       <option value=">35 - 44">35 - 44</option> 
       <option value=">45 - 54">45 - 54</option> 
       <option value=">55 - 59">55 - 59</option> 
       <option value=">60 - 64">60 - 64</option> 
       <option value=">65 - 69">65 - 69</option> 
       <option value=">70 - 74">70 - 74</option> 
       <option value=">75 - 79">75 - 79</option> 
       <option value="80 +">80 +</option> 
      </select> 
     </div> 
    </div> 

    <div class="form-group row"> 
     <label for="dependant" class="col-sm-7">&bull; How many additional dependants will be covered?</label> 
     <div class="col-sm-10"> 
      <select type="person" class="form-control form-control-sm" id="person" name="person"> 
       <option value="0" selected disabled>Please Select</option> 
       <option value="00">00</option> 
       <option value="01">01</option> 
       <option value="02">02</option> 
       <option value="03">03</option> 
       <option value="04">04</option> 
       <option value="05">05</option> 
       <option value="06">06</option> 
       <option value="07">07</option> 
       <option value="08">08</option> 
       <option value="09">09</option> 
       <option value="10">10</option> 
       <option value="11">11</option> 
       <option value="12">12</option> 
       <option value="13">13</option> 
       <option value="14">14</option> 
       <option value="15">15</option> 
      </select> 
     </div> 
    </div> 
    <input type="button" id="next" name="next" value="Next"> 
</form> 

<div class="alli"> $0</div> 


<script type="text/javascript"> 

    $("#next").click(function update_pricing() { 

     //pricing data for pricing table 
     var pricing_data = { 

      single: { 
       "0"  : [0, 0, 0], 
       "Under 35": [46.75, 124.25, 152.25], 
       ">35 - 44": [51.75, 138.25, 168.50], 
       ">45 - 54": [59.00, 152.25, 195.50], 
       ">55 - 59": [63.25, 160.00, 209.00], 
       ">60 - 64": [71.00, 170.50, 220.50], 
       ">65 - 69": [58.50, 144.25, 187.00], 
       ">70 - 74": [71.25, 187.50, 229.00], 
       ">75 - 79": [77.50, 225.00, 303.75], 
       "80 +" : [97.25, 275.75, 366.00] 
      }, 
      couple: { 
       "0"  : [0, 0, 0], 
       "Under 35": [88.75, 236.75, 288.50], 
       ">35 - 44": [99.00, 262.75, 320.75], 
       ">45 - 54": [112.00, 288.50, 371.25], 
       ">55 - 59": [120.25, 303.75, 397.50], 
       ">60 - 64": [134.75, 323.75, 419.25], 
       ">65 - 69": [111.25, 275.25, 355.50], 
       ">70 - 74": [135.25, 356.50, 435.25], 
       ">75 - 79": [147.75, 427.75, 577.00], 
       "80 +" : [184.50, 523.50, 696.00] 
      }, 
      family: { 
       "0"  : [0, 0, 0], 
       "Under 35": [116.50, 310.50, 379.00], 
       ">35 - 44": [129.50, 345.25, 421.00], 
       ">45 - 54": [147.25, 379.00, 488.25], 
       ">55 - 59": [157.50, 399.00, 522.25], 
       ">60 - 64": [177.00, 425.25, 551.50], 
       ">65 - 69": [146.25, 361.25, 467.25], 
       ">70 - 74": [177.50, 468.75, 572.50], 
       ">75 - 79": [194.00, 562.25, 759.00], 
       "80 +" : [242.50, 688.50, 914.75] 
      } 
     } 

     var age_order = { 
      "0"  : 0, 
      "Under 35": 1, 
      ">35 - 44": 2, 
      ">45 - 54": 3, 
      ">55 - 59": 4, 
      ">60 - 64": 5, 
      ">65 - 69": 6, 
      ">70 - 74": 7, 
      ">75 - 79": 8, 
      "80 +" : 9 
     } 

     var age_fields = $('select[id^="dep_age_"], #age'); 

     var family_size = parseInt($('#person').val()); 

     var max_age = "0"; 

     function do_update() { 

      var pricing_set; 

      //grab appropriate pricing set from pricing data 
      if (family_size == 0) { 
       pricing_set = pricing_data.single[max_age]; 
      } else if (family_size === 1) { 
       pricing_set = pricing_data.couple[max_age]; 
      } else if (family_size > 1) { 
       pricing_set = pricing_data.family[max_age]; 
      } 

      var price_carrier = $('.alli'); //put price values here in pricing tables 

      //if appropriate pricing set is grabbed (not true when either one of age or family size not selected) 
      if (pricing_set) { 

       //put price values in all pricing tables 
       price_carrier.each(function (i, el) { 

        //if family members are more than 6, increase prices by 30% 
        if (family_size > 6) { 
         $(el).text('$' + (pricing_set[i] + pricing_set[i] * 0.3).toFixed(2)); 
        } else { 
         $(el).text('$' + pricing_set[i].toFixed(2)); 
        } 
       }); 
      } 
     }; 

     age_fields.each(function() { 
      if (age_order[$(this).val()] > age_order[max_age]) { 
       max_age = $(this).val(); 
      } 
     }); 
     do_update(); 
    }) 
</script> 

答えて

2

あなたはAJAX/PHPを使用したくない場合はHTML5で導入されたとして、あなたはのように、ブラウザののlocalStorageやのsessionStorageを使用することができます。あなたの結果は、その後id= "results" を持つ要素に格納されている場合

あなたはとしてlocaStorageに格納することができます。

localStorage.setItem('titles', $('#results').text()); 

と他のページの使用上のアイテムを取得するために:

var myItem = localStorage.getItem('titles'); 

ここでローカルとセッションストレージについての詳細:
Local Storage
Session Storage

+0

それは、すべてのWebブラウザ上で動作しますか? –

+1

@FaheemFerozi https://developer.mozilla.org/en/docs/Web/API/Window/localStorageには、サポートされるプラットフォームのリストがあります。 – ADyson

+0

はい、ブラウザがHTML5をサポートしている限りです。ローカルストレージとセッションストレージはHTML5の機能です。 –

関連する問題