|
|
@@ -0,0 +1,143 @@
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <style>
|
|
|
+ label{display:block; width:70%; max-width:500px}
|
|
|
+ label input:not([type="checkbox"]) { float:right; clear:both;}
|
|
|
+ label input:after { clear:both; }
|
|
|
+ #parte2,#validar { display: none; }
|
|
|
+ </style>
|
|
|
+ <script>
|
|
|
+ function $(element) {
|
|
|
+ var el = document.querySelectorAll(element);
|
|
|
+ if(el.length==1)
|
|
|
+ return el[0];
|
|
|
+ return el;
|
|
|
+ }
|
|
|
+ function post(url,data,ok,error) {
|
|
|
+ var request = new XMLHttpRequest();
|
|
|
+ request.open('POST', url, true);
|
|
|
+
|
|
|
+ request.onload = function() {
|
|
|
+ if(this.status>=200 && this.status < 400)
|
|
|
+ ok(this.responseText);
|
|
|
+ else
|
|
|
+ error(this.responseText);
|
|
|
+ }
|
|
|
+ request.onerror = error;
|
|
|
+
|
|
|
+ request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
|
|
|
+ if ( typeof data === 'string')
|
|
|
+ request.send(data);
|
|
|
+ else
|
|
|
+ request.send(JSON.stringify(data));
|
|
|
+ }
|
|
|
+ window.onload = function() {
|
|
|
+ $("#validar").onclick = function() {
|
|
|
+ post("mails_code_validator.php",
|
|
|
+ { mail: $("#pedirmail").value, codigo: $("#pedircodigo").value },
|
|
|
+ populateForm,
|
|
|
+ function(data) { alert(data); }
|
|
|
+ );
|
|
|
+ };
|
|
|
+ $("#pedircodigo").onclick = inputUpdated;
|
|
|
+ $("#pedircodigo").onfocus = inputUpdated;
|
|
|
+ $("#pedircodigo").onkeyup = inputUpdated;
|
|
|
+ $("#pedircodigo").onpaste = inputUpdated;
|
|
|
+
|
|
|
+
|
|
|
+ function inputUpdated() {
|
|
|
+ if( $("#pedircodigo").value.length == 0 )
|
|
|
+ $("#pedir").style.display="block";
|
|
|
+ else
|
|
|
+ $("#pedir").style.display="none";
|
|
|
+
|
|
|
+ if( $("#pedircodigo").value.length == 10 )
|
|
|
+ $("#validar").style.display="block";
|
|
|
+ else
|
|
|
+ $("#validar").style.display="none";
|
|
|
+
|
|
|
+ };
|
|
|
+ $("#enviar").onclick = function() {
|
|
|
+ var obj = {};
|
|
|
+ Array.prototype.forEach.call($("#parte2 input"),function(item) {
|
|
|
+ if(item.type=="checkbox")
|
|
|
+ obj[item.id]=item.checked ? 1 : 0;
|
|
|
+ else
|
|
|
+ obj[item.id]=item.value;
|
|
|
+ });
|
|
|
+ obj.codigo=$("#pedircodigo").value; //Lo tomo del form, total ya esta validado
|
|
|
+ post("update_mail_data.php",
|
|
|
+ obj,
|
|
|
+ function(data) { alert(data); },
|
|
|
+ function (data) { alert(data+"err"); }
|
|
|
+ );
|
|
|
+ };
|
|
|
+ function populateForm(obj) {
|
|
|
+ if ( typeof obj === 'string')
|
|
|
+ obj=JSON.parse(obj);
|
|
|
+ $("#email").value=obj.mail;
|
|
|
+ $("#nombre").value=obj.nombre;
|
|
|
+ $("#apellido").value=obj.apellido;
|
|
|
+ $("#zona").value=obj.zona;
|
|
|
+ $("#provincia").value=obj.provincia;
|
|
|
+ $("#pais").value=obj.pais;
|
|
|
+ $("#telefono").value=obj.telefono;
|
|
|
+ $("#baja").checked=obj.baja;
|
|
|
+
|
|
|
+ $("#parte1").style.display="none";
|
|
|
+ $("#parte2").style.display="block";
|
|
|
+ }
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+ </head>
|
|
|
+ <div id="parte1">
|
|
|
+ <label>
|
|
|
+ Email:
|
|
|
+ <input type="email" id="pedirmail" placeholder="Su email" >
|
|
|
+ </label>
|
|
|
+ <label>
|
|
|
+ Codigo:
|
|
|
+ <input id="pedircodigo" type="text" placeholder="Su codigo" maxlength="10">
|
|
|
+ </label>
|
|
|
+ <input type="submit" id="pedir" value="Pedir codigo">
|
|
|
+ <input type="submit" id="validar" value="Validar codigo">
|
|
|
+ <label id="resultCodigo"></label>
|
|
|
+ </div>
|
|
|
+ <div id="parte2">
|
|
|
+ <label value="email">
|
|
|
+ Email:
|
|
|
+ <input id="email" type="email" placeholder="" disabled readonly>
|
|
|
+ </label>
|
|
|
+ <label>
|
|
|
+ Nombre:
|
|
|
+ <input id="nombre" type="text" placeholder="">
|
|
|
+ </label>
|
|
|
+ <label>
|
|
|
+ Apellido:
|
|
|
+ <input id="apellido" type="text">
|
|
|
+ </label>
|
|
|
+ <label>
|
|
|
+ Zona:
|
|
|
+ <input id="zona" type="text">
|
|
|
+ </label>
|
|
|
+ <label>
|
|
|
+ Provincia:
|
|
|
+ <input id="provincia" type="text">
|
|
|
+ </label>
|
|
|
+ <label>
|
|
|
+ Pais:
|
|
|
+ <input id="pais" type="text">
|
|
|
+ </label>
|
|
|
+ <label>
|
|
|
+ Darse de baja:
|
|
|
+ <input id="baja" type="checkbox">
|
|
|
+ </label>
|
|
|
+ <label>
|
|
|
+ Telefono:
|
|
|
+ <input id="telefono" type="text">
|
|
|
+ </label>
|
|
|
+ <input type="submit" value="Enviar" id="enviar">
|
|
|
+ <label id="resultCodigo"></label>
|
|
|
+ <body>
|
|
|
+ </body>
|
|
|
+</html>
|
