formulario.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <!doctype html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <!-- <link type="text/css" rel="Stylesheet" href="css/menu.css" /> -->
  6. <link type="text/css" rel="Stylesheet" href="css/spinner.css" />
  7. <link type="text/css" rel="Stylesheet" href="css/normalize.css" />
  8. <link type="text/css" rel="Stylesheet" href="css/skeleton.css" />
  9. <link type="text/css" rel="Stylesheet" href="css/formulario.css" />
  10. <link type="text/css" rel="Stylesheet" href="css/themes/original.css" />
  11. <script src="js/rivets.bundled.min.js"></script>
  12. <script src="js/humane.min.js"></script>
  13. </head>
  14. <body>
  15. <div class="row nav-bar">
  16. <div class="left">
  17. <a class="button" href="#">Volver</a>
  18. </div>
  19. <div class="right">
  20. <a href="http://especificosba.com.ar"><img src="Images/logo-horizontal.png" class="logo"></a>
  21. </div>
  22. </div>
  23. <div class="section promocion">
  24. <div class="container max-top-space">
  25. <div class="row">
  26. <div class="eight columns xl-top-space">
  27. <h1>Actualizá tus datos</h1>
  28. <p>Estarás participando por un sorteo para ganar un set de productos de ESPECIFICOS Buenos Aires</p>
  29. </div>
  30. <div class="four columns">
  31. <img src="Images/productos/productos.png" class="productos">
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <div class="section">
  37. <div class="container">
  38. <div id="spinner" class="loading">Loading&#8230;</div>
  39. <form>
  40. <div class="row">
  41. <h4>Datos personales</h4>
  42. </div>
  43. <div class="row">
  44. <div class="four columns">
  45. <label for="exampleEmailInput">Nombre</label>
  46. <input id="nombre" class="u-full-width" type="text" rv-value='user.nombre'>
  47. </div>
  48. <div class="four columns">
  49. <label for="exampleEmailInput">Apellido</label>
  50. <input id="ap" class="u-full-width" type="text" rv-value='user.apellido'>
  51. </div>
  52. </div>
  53. <div class="row">
  54. <div class="four columns">
  55. <label for="exampleEmailInput">País</label>
  56. <input class="u-full-width" type="text" rv-value='user.pais'>
  57. </div>
  58. <div class="four columns">
  59. <label for="exampleEmailInput">Provincia/Estado</label>
  60. <input class="u-full-width" type="text" rv-value='user.provincia'>
  61. </div>
  62. <div class="four columns">
  63. <label for="exampleEmailInput">Ciudad</label>
  64. <input class="u-full-width" type="text" rv-value='user.zona'>
  65. </div>
  66. </div>
  67. <div class="row">
  68. <div class=" column">
  69. <label>Cumpleaños <span class="mandatory">*</span></label>
  70. <div class="row">
  71. <input class="two columns" type="number" min="1" max="31" placeholder="Dia (DD)" rv-value='user.dia'>
  72. <input class="two columns" type="number" min="1" max="12" placeholder="Mes (MM)" rv-value='user.mes'>
  73. </div>
  74. <div class="help"> <span class="mandatory">*</span> Durante el mes de tu cumpleaños, recibirás importantes descuentos y beneficios</div>
  75. </div>
  76. </div>
  77. <hr>
  78. <div class="row">
  79. <h4>Contacto</h4>
  80. </div>
  81. <div class="row">
  82. <div class="six columns">
  83. <label for="exampleEmailInput">Email</label>
  84. <input class="u-full-width" placeholder="email@ejemplo.com" type="email" rv-value='user.email'>
  85. </div>
  86. <div class="six columns">
  87. <label for="exampleEmailInput">Teléfono</label>
  88. <div class="row">
  89. <input class="four columns" type="number" placeholder="Cod. Area (ej: 011)" rv-value='user.prefijo'>
  90. <input class="eight columns" type="number" rv-value='user.telefono'>
  91. </div>
  92. </div>
  93. </div>
  94. <hr>
  95. <div class="row">
  96. <label class="example-send-yourself-copy">
  97. <input type="checkbox" rv-checked='user.infocursos'>
  98. <span class="label-body">Quiero recibir información sobre los cursos presenciales y a distancia</span>
  99. </label>
  100. <div class="u-pull-right">
  101. <input class="button-primary" value="Enviar" type="button" id="button">
  102. </div>
  103. </div>
  104. <hr>
  105. </form>
  106. <div class="disclaimer">
  107. <p>En cumplimiento de la Ley 25.326 (Protección de Datos Personales) - Art 27. inc 3 y del Decreto 1558/2001 (cuyas partes pertinentes se transcriben a continuación)le informamos que si deseara no recibir más información publicitaria, tiene el derecho de solicitar el retiro o bloqueo total o parcial de su nombre en nuestras bases de datos seleccionando la opción que se encuentra al final de este anuncio. Ley 25.326 (Protección de Datos Personales), Artículo 27, inciso 3: El titular podrá en cualquier momento solicitar el retiro o bloqueo de su nombre de los bancos de datos a los que se refiere el presente artículo. Decreto 1558/2001, Anexo I, artículo 27, párrafo tercero: En toda comunicación con fines de publicidad que se realice por correo, teléfono, correo electrónico, Internet u otro medio a distancia a conocer, se deberá indicar, en forma expresa y destacada, la posibilidad del titular del dato de solicitar el retiro o bloqueo, total o parcial, de su nombre de la base de datos. A pedido del interesado, se deberá informar el nombre del responsable o usuario del banco de datos que proveyó la información.</p>
  108. </div>
  109. <div class="u-pull-right">
  110. <a class="button" href="#">No quiero recibir más información</a>
  111. </div>
  112. </div>
  113. </div>
  114. <script>
  115. var urlparams=window.location.search.replace("?", "").split("&");
  116. var params={};
  117. var xhttp = new XMLHttpRequest();
  118. urlparams.forEach(function(elem,ind,arr) {
  119. var k = elem.split("=")[0];
  120. var v = elem.split("=")[1];
  121. params[k]=v;
  122. });
  123. window.addEventListener('load', function() {
  124. var elems = document.querySelectorAll('input'), i;
  125. var spinner = document.getElementById("spinner");
  126. var bigbox = humane.create({baseCls: 'humane-original', timeout: 150})
  127. var button = document.getElementById("button");
  128. button.style.display="none";
  129. button.onclick = send;
  130. bigbox.error = bigbox.spawn({addnCls: 'humane-bigbox-error'})
  131. function updateModel(){
  132. for (i = 0; i < elems.length; ++i)
  133. rivets.bind(elems[i], {user: user});
  134. }
  135. function send() {
  136. spinner.style.display="block";
  137. xhttp.onreadystatechange = function() {
  138. if (xhttp.readyState == 4) {
  139. var data =JSON.parse(xhttp.responseText);
  140. spinner.style.display="none";
  141. switch (xhttp.status) {
  142. case 200:
  143. bigbox.log(data.mensaje, { timeout: 5000, clickToClose: true });
  144. break;
  145. case 401:
  146. bigbox.error(data.mensaje, { timeout: 5000, clickToClose: true });
  147. break;
  148. }
  149. }
  150. };
  151. xhttp.open("POST", "back/update.php", true);
  152. // xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  153. xhttp.send(JSON.stringify(user));
  154. };
  155. function get() {
  156. xhttp.onreadystatechange = function() {
  157. if (xhttp.readyState == 4) {
  158. var data =JSON.parse(xhttp.responseText);
  159. spinner.style.display="none";
  160. switch (xhttp.status) {
  161. case 200:
  162. user = data;
  163. user.hash=params["hash"];
  164. updateModel();
  165. button.style.display="block";
  166. break;
  167. case 401:
  168. bigbox.error(data.mensaje, { timeout: 5000, clickToClose: true });
  169. break;
  170. }
  171. }
  172. };
  173. xhttp.open("GET", "back/update.php?mail="+params["email"]+"&hash="+params["hash"], true);
  174. xhttp.send();
  175. }
  176. get();
  177. }, false);
  178. </script>
  179. </body>