templates/adhesion/index.html.twig line 1

Open in your IDE?
  3. {% include 'headerlogin.html.twig' %}
  5. <body>
  6. <div class="container-scroller">
  7. <div class="container-fluid page-body-wrapper full-page-wrapper inscription">
  9. <div class="row flex-grow">
  12. <div class="col-lg-4 mx-auto" style="margin-right: 10%; background: #e8eff4;">
  15. </div>
  17. <div class="col-lg-8 mx-auto" style="margin-right: 10%; background: white;">
  20. <div class="card-body " style="background-color : white; width : 95%; margin-top : 5%; margin-left : 2%;">
  22. <p> <img style="width : 40%; margin-left : 30%;" src="{{asset('images/icones/logo.jpeg')}}"> </p>
  24. <h2 class="font-weight-bold" style="color : #3673bc;"> J'ADHERE AU CNC </h2>
  26. <div class="row" style="font-weight : bold;">
  27. <div class="col-md-12">
  29. <h4 class="font-weight-bold" style="color : #3673bc;"> Choisissez votre Province ; </h4>
  31. <div class="row">
  35. {% for province in provinces %}
  37. <div class="col-md-2" style="margin : 1%;">
  40. <a href="{{ path('adhesion_form', {'id':province.id}) }}" type="button" class="btn btn-inverse-success btn-icon-text font-weight-bold">
  41. <i class="ti-location-pin btn-icon-prepend"></i>
  42. {{province.nom}}
  43. </a>
  45. </div>
  48. {% endfor %}
  53. </div>
  56. </div>
  58. <div class="col-md-6 ml-auto mr-auto">
  59. <div id="worldMap" style="height: 300px;"></div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  65. </div>
  67. </div>
  70. </div>
  71. <!-- content-wrapper ends -->
  74. </div>
  75. <!-- page-body-wrapper ends -->
  78. {#
  79. Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
  80. See https://symfony.com/doc/current/security/remember_me.html
  82. <div class="checkbox mb-3">
  83. <label>
  84. <input type="checkbox" name="_remember_me"> Remember me
  85. </label>
  86. </div>
  87. #}
  93. <script>
  95. window.onload = () => {
  97. let province = document.querySelector("#demande_Province");
  98. let selectCommune = document.querySelector('#demande_commune');
  99. selectCommune.innerHTML = "";
  101. province.addEventListener("change", function(){
  103. let form = this.closest("form");
  104. let data = this.name + "=" + this.value;
  106. fetch(form.action, {
  108. method: form.getAttribute("method"),
  109. body: data,
  110. headers: {
  112. "content-type": "application/x-www-form-urlencoded; charset:UTF-8 "
  114. }
  117. })
  119. .then(response => response.text())
  120. .then(html => {
  122. let content = document.createElement("html");
  124. content.innerHTML = html;
  125. let nouveauSelect = content.querySelector("#demande_ville");
  126. document.querySelector("#demande_ville").replaceWith(nouveauSelect);
  128. let ville = document.querySelector("#demande_ville");
  130. ville.addEventListener("change", function(){
  133. getCommunes(ville.value);
  136. })
  140. })
  143. })
  153. }
  158. </script>
  160. <script>
  161. function getCommunes(idVille){
  163. var communes = "";
  164. const xmlhttp = new XMLHttpRequest();
  166. var params = 'id=' + idVille;
  167. xmlhttp.open("POST", "http://localhost/republic/public/index.php/commune/formdata/", true);
  168. xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  169. xmlhttp.send("id="+idVille);
  171. xmlhttp.onload = function() {
  172. communes = JSON.parse(this.responseText);
  174. let selectCommune = document.querySelector('#demande_commune');
  175. selectCommune.innerHTML = "";
  177. for (let i = 0; i< communes.length; i++){
  180. let newOption = new Option(communes[i].nom, communes[i].id)
  181. selectCommune.add(newOption);
  184. }
  188. }
  190. }
  193. </script>
  197. {% include 'footer.html.twig' %}