javascript y ajax

jordixip2 · #1 (**permalink**) 05/08/2010, 11:04

Hola, tengo un formulario tipico de datos personales con dni, tanto para altas, como para añadir informacion; el tema esta en que en principio siempre se tendria que poner el nombre, apellidos, dni, etc,etc.. y me gustaria para hacerlo correctamente, que a pesar de que fuera visible todo el formulario, al ponerse el dni, se buscara en la bbdd, y si se encuentra pues que aparecieran los datos personales. En fin, al final el usuario solo tendria que poner el dni y el campo de texto para añadir informacion.

Posteriormente lo que hago es que dado un 'paciente' pues puedo ver todas las fechas y horas, es decir, todas las citas del mismo junto con el informe medico.

PD: El tema seria detectar que se ha puesto un dni valido (x caracteres en el textbox correspondiente), detectarlo con javascript y luego a traves de ajax lanzar la consulta para que me rellene los campos.

El problema es que no se ajax, y no se como hacer la parte de javascript. ¿Algun ejemplito?

Gracias mil

lair · #2 (**permalink**) 05/08/2010, 15:39

Hola.

prueba con este:
http://www.maestrosdelweb.com/editorial/ajaxpaso/

suerte

jordixip2 · #3 (**permalink**) 07/08/2010, 06:42

He probado algo como esto, pero cuando aprieto una tecla no parece que vaya a la funcion ya que no intenta llamar al php (no muestra un error de pagina no encontrada, ya que aun no lo he creado). ¿Alguna sugerencia?

<body>
<script type="text/javascript">
function ajaxobj() {
try {
_ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
_ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
_ajaxobj = false;
}
}

if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {
_ajaxobj = new XMLHttpRequest();
}

return _ajaxobj;
}

function holaMundo () {
// Instanciamos el objecto XMLHttpRequest
ajax = ajaxobj();
// Abrimos la conexión al script
ajax.open("GET", "holamundo.php", true);
// Indicamos que función vigila el cambio de estado
ajax.onreadystatechange=function() {
if (ajax.readyState == 4) {
// Mostramos resultado
alert(ajax.responseText);
}
}
// Enviamos algo para que funcione el proceso
ajax.send(null);
}
</script>
......

<label>
<input type="text" name="doc_id" onkeypress="holaMundo()" />
</label>

yense · #4 (**permalink**) 07/08/2010, 07:03

Código Javascript:

Ver originalfunction holaMundo () {
ajax = ajaxobj();
ajax.open("GET", "holamundo.php", true);
ajax.onreadystatechange=function() {
if (ajax.readyState == 4) {
alert(ajax.responseText);
}
}
ajax.send(null);
}
</script>

Bueno en caso que estes mandando datos a tu archivo PHP "holamundo.php" debes de mandar tambien el dni ahi mismo para que age la consulta a la base de datos despues todavia enviarias el mensaje que corresponde a tu consulta si lo encontro el DNI en tu BD o no
ya que ahí solo estas enviando a tu archivo php pero no el dni

jordixip2 · #5 (**permalink**) 07/08/2010, 09:54

Te entiendo, pero no comprendo porque no salta a esa funcion, cada vez que pulso una tecla. Me imaginaba que esa era justamente la funcion del onkeypress.

jordixip2 · #6 (**permalink**) 10/08/2010, 13:42

Mmmm ahora si que 'salta'. Sera impaciencia mia que no me esperaba.
Gracias

jordixip2 · #7 (**permalink**) 10/08/2010, 13:44

Recuperando de nuevo ese codigo, cuando hago el holamundo.php, a que variables puedo acceder? Quiero decir, si esa funcion salta cada vez que pulso una tecla, que se produce dentro de un textbox, la funcionalidad deseada seria poder acceder a la cadena de texto que hay en cada momento... ¿alguna sugerencia? Como accedo a ella?

Gracias

Adler · #8 (**permalink**) 10/08/2010, 14:57

Hola

El evento onkeypress no parece el mas conveniente en este caso, por harás 6 envios y habrá 6 respuesta que no se servirán para nada. Como solucionarlo? o usas el evento onclik o mantienes onkeyup.
En caso que quieras manter el evento tendrás que hacer una condicional en la función holaMundo() para así evitar lo que te comentaba anteriormente

Cita:

if (valor.length <= 6) {
// no hace nada
}else {
// hace la petión
}

Por otro lado, pasale a la función valor que tiene el campo. En resumen todo esto quedaría algo como esto

Código Javascript:

Ver originalfunction holaMundo (valor) {
if (valor.length <= 6) {
}else {
// hace la petión
// Instanciamos el objecto XMLHttpRequest
ajax = ajaxobj();
// Abrimos la conexión al script
ajax.open("GET", "holamundo.php?val"+valor, true);
 
....
 
}
 
<input type="text" name="doc_id" onkeypress="holaMundo(this.value)" />

En el php recoges la variable

Código PHP:

Ver original$dni = $_GET['val'];
// haces la consulta
// si ha traido algún registro envias la respuesta
echo 'Adler';
.......

Edito: También estaría bien que validar el dni

Código Javascript:

Ver original<script language="text/javascript">
function letraDNI(num) {
letras = 'TRWAGMYFPDXBNJZSQVHLCKE';
if (num.length == 8 && isNaN(num) == false)
document.formDNI.txtDNI.value = num + "-" + letras.charAt(parseInt(num) &#37; 23);
else
document.formDNI.txtDNI.value = num;
}
</script>
</head>
<body>
<form name="formDNI">
<input name="txtDNI" maxlength="9" onkeyup="letraDNI(formDNI.txtDNI.value)" /> 
</form>

Suerte

jordixip2 · #9 (**permalink**) 11/08/2010, 09:16

Muchas gracias!! Con esto aprendo mucho.