app/Resources/views/top/area.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}拠点選択{% endblock %}
  3. {% block body %}
  4. <div id="">
  5.     <main>
  6.         <div class="main_area">
  7.             <div class="center_box">
  8.             {{ form_start(form) }}
  9.                 <table class="area_table" align="center">
  10.                     <tr>
  11.                         <td colspan="2" class="area_title">
  12.                             <h2>拠点選択</h2>
  13.                         </td>
  14.                     </tr>
  15.                     <tr>
  16.                         <td width="30%">
  17.                             <p class="area_p">地域</p>
  18.                         </td>
  19.                         <td width="70%">
  20.                             <select class="area_select" name="AreaName" id="AreaName">
  21.                                 <option value=""></option>
  22.                                 {% for area in areaList %}
  23.                                     <option value="{{ area.id }}">{{ area.areaname }}</option>
  24.                                 {% endfor %}
  25.                             </select>
  26.                         </td>
  27.                     </tr>
  28.                     <tr>
  29.                         <td>
  30.                             <p class="area_p">拠点</p>
  31.                         </td>
  32.                         <td id="Ajax">
  33.                             <select class="area_select" name="StoreName" id="StoreName">
  34.                                 <option value="">地域を先に選択してください</option>
  35.                             </select>
  36.                         </td>
  37.                     </tr>
  38.                     <tr>
  39.                         <td colspan="2" class="button_area">
  40.                             <button type="submit" id="decisionBtn" name="decisionBtn" onclick="return check();">決定</button>
  41.                         </td>
  42.                     </tr>
  43.                 </table>
  44.                 {{ form_row(form._token) }}
  45.                 {{ form_rest(form) }}
  46.             {{ form_end(form) }}
  47.             </div>
  48.         </div>
  49.     </main>
  50. </div>
  51. {% endblock %}
  52. {% block javascripts %}
  53.     <script>
  54.         $("#AreaName").on('change', function(){
  55.             $.ajax({
  56.                 url:'{{ path('area_change_ajax') }}',
  57.                 type: 'POST',
  58.                 data:{
  59.                     'areaId': $(this).val(),
  60.                 },
  61.             }).done(function(data){
  62.                 $('#StoreName').remove();
  63.                 $("#Ajax").append(data);
  64.             })
  65.         });
  66.     
  67.         function check(){
  68.         
  69.             var area = document.getElementById( "AreaName") ;
  70.             var store = document.getElementById( "StoreName") ;
  72.             if(area.value == ""){
  73.                 alert("地域と拠点を選択してください");
  74.                 return false;
  75.             }
  76.             if(store.value == ""){
  77.                 alert("拠点を選択してください");
  78.                 return false;
  79.             }
  80.         }
  81.     </script>
  82. {% endblock %}