Posted on by

phpコードを利用してJQuery（JavaScript）の変数を定義する方法

PHPの配列にもっている値を、JavaScriptで利用する場合のサンプルです。

view plaincopy to clipboardprint?
  1. <!--?php  
  2. $data = array("SampleDetail" =-->  
  3.     array(  
  4.         "1" => array("num" => "10"),  
  5.         "2" => array("num" => "20"),  
  6.         "3" => array("num" => "30"),  
  7.         "4" => array("num" => "40"),  
  8.         "5" => array("num" => "50"),  
  9.         "total" => array("num" => ''),  
  10.     ));  
  11. function h($val, $mode = ENT_QUOTES)  
  12. {  
  13.     return htmlspecialchars($val, $mode);  
  14. }  
  15.   
  16. ?>  
  17.   
  18.   
  19.   
  20.     <!--TemplateBeginIf cond="0" -->  
  21.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  22.     <!--TemplateEndIf -->  
  23.     <meta charset="utf-8">  
  24.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  25.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  26.     <!-- TemplateBeginEditable name="doctitle" -->  
  27.     <title>サンプルシステム</title>  
  28.     <!-- TemplateEndEditable -->  
  29.     <!-- jquery-ui -->  
  30.     <script src="lib/jquery/jquery-1.11.2.min.js"></script>  
  31.   
  32.     <!-- bootstrap -->  
  33.     <script src="lib/bootstrap-3.3.4/js/bootstrap.min.js"></script>  
  34.     <link href="lib/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">  
  35.     <link href="css/bootstrap2_custom.css" rel="stylesheet">  
  36.   
  37.     <!-- TemplateBeginEditable name="head" -->  
  38.     <!-- TemplateEndEditable -->  
  39.   
  40.   
  41. <div class="contents">  
  42.     <!-- InstanceBeginEditable name="contents" -->  
  43.     <form action="./index" name="form" id="IndexForm" method="post" accept-charset="utf-8">  
  44.         <style type="text/css">  
  45.   
  46.             input:disabled,  
  47.             .readOnly {  
  48.                 border: none;  
  49.                 background-color: #FFFFFF !important;  
  50.             }  
  51.   
  52.             .bg-pink input:disabled {  
  53.                 border: none;  
  54.                 background-color: #f2dede !important;  
  55.             }  
  56.         </style>  
  57.         <div style="display:none;"><input type="hidden" name="_method" value="PUT"></div>  
  58.         <div class="w650">  
  59.             <div class="row">  
  60.                 <div class="col-sm-12">  
  61.                     <h1>サンプル画面</h1>  
  62.                 </div>  
  63.             </div>  
  64.   
  65.   
  66.              $val) {  
  67.                     ?>  
  68.                     <table class="table table-bordered th-fill w650">  
  69.                 <tbody><tr>  
  70.                     <th class="w200">商品名</th>  
  71.                     <th class="w80">数量</th>  
  72.                 </tr>  
  73.                 <tr>  
  74.                     <!--?php  
  75.                     $total = $data['SampleDetail']['total'];  
  76.                     unset($data['SampleDetail']['total']);  
  77.                     foreach ($data['SampleDetail'] as $key =--><th>  
  78.                         名称_<!--?php echo h($key); ?--></th>  
  79.                     <td class="right"><input name="data[SampleDetail][<?php echo h($key); ?>][num]" size="9" maxlength="9" class="ime-off right" type="text" value="<?php echo h($val[" num"]);="" ?="">" id="SampleDetail<!--?php echo h($key); ?-->Num"/></td>  
  80.                 </tr>  
  81.                 <tr>  
  82.                     <!--?php  
  83.                     }  
  84.                     ?-->  
  85.                     <th>計</th>  
  86.                     <td class="right"><input name="data[SampleDetail][total][num]" size="9" maxlength="9" class="ime-off right" disabled="disabled" type="text" id="SampleDetailTotalNum"></td>  
  87.                 </tr>  
  88.             </tbody></table>  
  89.   
  90.         </div>  
  91.   
  92.         <div class="hide">  
  93.             <input type="hidden" name="data[DeliveryPlan][id]" value="1" id="DeliveryPlanId"><input type="hidden" name="data[DeliveryPlan][updated]" value="2015-12-14 08:59:59" id="DeliveryPlanUpdated"><input type="hidden" name="data[DeliveryPlan][status]" value="2" id="DeliveryPlanStatus"><input type="hidden" name="data[Order][id]" id="OrderId"><input type="hidden" name="data[OrderA][keiyaku_date]" id="OrderAKeiyakuDate"><input type="hidden" name="data[DeliveryPlan][order_keiyaku_date]" value="2015-11-14" id="DeliveryPlanOrderKeiyakuDate"></div>  
  94.         <script>  
  95.             var detailArr = [];  
  96.             <?php  
  97.             foreach ($data["SampleDetail"] as $key => $val) {  
  98.             ?>  
  99.             detailArr[<?php echo h($key); ?>] = <?php echo h($key); ?>;  
  100.             <?php  
  101.             }  
  102.             ?>  
  103.   
  104.             $(function () {  
  105.   
  106.                 // 数量入力  
  107.                 $("[id$='Num']").change(function () {  
  108.                     // 計算  
  109.                     calcDetail();  
  110.                 });  
  111.   
  112.                 // 計算  
  113.                 calcDetail();  
  114.             });  
  115.             function calcDetail() {  
  116.                 var num_total = 0;  
  117.                 var num = 0;  
  118.   
  119.                 // 全項目の計算  
  120.                 $.each(detailArr, function (key, str) {  
  121.                     if (key != 0) {  
  122.                         num = formatNum($("#SampleDetail" + str + "Num").val());  
  123.                         num_total = num_total + num;  
  124.                     }  
  125.                 });  
  126.   
  127.                 $("#SampleDetailTotalNum").val(num_total);  
  128.   
  129.   
  130.             }  
  131.             // 数値変換  
  132.             function formatNum(val) {  
  133.             if (val == '') {  
  134.                 return parseInt(0);  
  135.             }  
  136.   
  137.             val = String(val);  
  138.             if (!val.match(/^-?[0-9.]+$/)) {  
  139.                 val = 0;  
  140.             }  
  141.             val = parseInt(val);  
  142.             return val;  
  143.         }  
  144.         </script>  
  145.     </form>  
  146.     <!-- contents -->  
  147. </div>  
  148. <!-- InstanceEndEditable -->