tati
/
especificosweb


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
							<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>