formulario.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <!doctype html>
  2. <head>
  3. <meta charset="utf-8">
  4. <!-- <link type="text/css" rel="Stylesheet" href="css/menu.css" /> -->
  5. <link type="text/css" rel="Stylesheet" href="css/normalize.css" />
  6. <link type="text/css" rel="Stylesheet" href="css/skeleton.css" />
  7. <link type="text/css" rel="Stylesheet" href="css/formulario.css" />
  8. <script src="js/rivets.bundled.min.js"></script>
  9. </head>
  10. <body>
  11. <div class="row nav-bar">
  12. <div class="nine columns">
  13. <a class="button" href="#">Volver</a>
  14. </div>
  15. <div class="three columns">
  16. <img src="Images/logo-horizontal.png" class="logo">
  17. </div>
  18. </div>
  19. <div class="section promocion">
  20. <div class="container max-top-space">
  21. <div class="row">
  22. <div class="eight columns xl-top-space">
  23. <h1>Actualizá tus datos</h1>
  24. <p>Estarás participando por un sorteo para ganar un set de productos de ESPECIFICOS Buenos Aires</p>
  25. </div>
  26. <div class="four columns">
  27. <img src="Images/productos/productos.png" class="productos">
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. <div class="section">
  33. <div class="container">
  34. <form>
  35. <div class="row">
  36. <h4>Datos personales</h4>
  37. </div>
  38. <div class="row">
  39. <div class="four columns">
  40. <label for="exampleEmailInput">Nombre</label>
  41. <input id="nombre" class="u-full-width" type="text" rv-value='user.nombre'>
  42. </div>
  43. <div class="four columns">
  44. <label for="exampleEmailInput">Apellido</label>
  45. <input id="ap" class="u-full-width" type="text" rv-value='user.apellido'>
  46. </div>
  47. </div>
  48. <div class="row">
  49. <div class="four columns">
  50. <label for="exampleEmailInput">País</label>
  51. <input class="u-full-width" type="text" rv-value='user.pais'>
  52. </div>
  53. <div class="four columns">
  54. <label for="exampleEmailInput">Provincia/Estado</label>
  55. <input class="u-full-width" type="text" rv-value='user.provincia'>
  56. </div>
  57. <div class="four columns">
  58. <label for="exampleEmailInput">Ciudad</label>
  59. <input class="u-full-width" type="text" rv-value='user.zona'>
  60. </div>
  61. </div>
  62. <div class="row">
  63. <div class=" column">
  64. <label>Cumpleaños <span class="mandatory">*</span></label>
  65. <div class="row">
  66. <input class="two columns" type="number" min="1" max="31" placeholder="Dia (DD)" rv-value='user.dia'>
  67. <input class="two columns" type="number" min="1" max="12" placeholder="Mes (MM)" rv-value='user.mes'>
  68. </div>
  69. <div class="help"> <span class="mandatory">*</span> Durante el mes de tu cumpleaños, recibirás importantes descuentos y beneficios</div>
  70. </div>
  71. </div>
  72. <hr>
  73. <div class="row">
  74. <h4>Contacto</h4>
  75. </div>
  76. <div class="row">
  77. <div class="six columns">
  78. <label for="exampleEmailInput">Email</label>
  79. <input class="u-full-width" placeholder="email@ejemplo.com" type="email" rv-value='user.email'>
  80. </div>
  81. <div class="six columns">
  82. <label for="exampleEmailInput">Teléfono</label>
  83. <div class="row">
  84. <input class="four columns" type="number" placeholder="Cod. Area (ej: 011)" rv-value='user.prefijo'>
  85. <input class="eight columns" type="number" rv-value='user.telefono'>
  86. </div>
  87. </div>
  88. </div>
  89. <hr>
  90. <div class="row">
  91. <label class="example-send-yourself-copy">
  92. <input type="checkbox" rv-checked='user.infocursos'>
  93. <span class="label-body">Quiero recibir información sobre los cursos presenciales y a distancia</span>
  94. </label>
  95. <div class="u-pull-right">
  96. <input class="button-primary" value="Enviar" type="button" id="button">
  97. </div>
  98. </div>
  99. <hr>
  100. </form>
  101. <div class="disclaimer">
  102. <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>
  103. </div>
  104. <div class="u-pull-right">
  105. <a class="button" href="#">No quiero recibir más información sobre ESPECIFICOS Buenos Aires</a>
  106. </div>
  107. </div>
  108. </div>
  109. <script>
  110. var urlparams=window.location.search.replace("?", "").split("&");
  111. var params={};
  112. var xhttp = new XMLHttpRequest();
  113. urlparams.forEach(function(elem,ind,arr) {
  114. var k = elem.split("=")[0];
  115. var v = elem.split("=")[1];
  116. params[k]=v;
  117. });
  118. window.addEventListener('load', function() {
  119. var elems = document.querySelectorAll('input'), i;
  120. document.getElementById("button").onclick = send;
  121. function updateModel(){
  122. for (i = 0; i < elems.length; ++i)
  123. rivets.bind(elems[i], {user: user});
  124. }
  125. function send() {
  126. xhttp.onreadystatechange = function() {
  127. if (xhttp.readyState == 4) {
  128. var data =JSON.parse(xhttp.responseText);
  129. debugger;
  130. }
  131. };
  132. xhttp.open("POST", "back/update.php", true);
  133. // xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  134. xhttp.send(JSON.stringify(user));
  135. };
  136. function get() {
  137. xhttp.onreadystatechange = function() {
  138. if (xhttp.readyState == 4) {
  139. var data =JSON.parse(xhttp.responseText);
  140. switch (xhttp.status) {
  141. case 200:
  142. user = data;
  143. user.hash=params["hash"];
  144. updateModel();
  145. break;
  146. case 401:
  147. alert(data.mensaje);
  148. break;
  149. }
  150. }
  151. };
  152. xhttp.open("GET", "back/update.php?mail="+params["email"]+"&hash="+params["hash"], true);
  153. xhttp.send();
  154. }
  155. get();
  156. }, false);
  157. </script>
  158. </body>