Imagen con evento onblur

[gspablo]

Buenas, me gustaria hacer un formulario donde al rellenar un campo del formulario y pasar a otro campo ( evento onblur) se mostrase una imagen segun si el contenido es correcto o no

Mi duda es si esto es posible o necesitaria mas cosas (ajax..)

PD: Si no es el sitio correcto pido disculpas y pido que lo muevan a su lugar

Gracias

[GatorV]

Tema movido desde PHP a Javascript

[linternazo]

En principio con onblur bastaria.

En onblur llamas a una funcion que compruebe si el contenido es correcto y muestre la imagen.

[gspablo]

Lo he hecho en un pequeño ejemplo, mi problema es que no se recoger lo que devuelve la funcion en javascript, os pongo el código:

Código HTML:

<td> <input onblur=compruebafecha() id="idfecha" name="nfecha" type="text" /> </td>
<?php
if (return==1) // ESTO SERA LO QUE DEVUELVA EL JAVASCRIPT DEL INPUT ANTERIOR
  echo "<td><img src=mal.jpg /><td>";
else
  echo "<td><img src=bien.jpg /><td>";
?>
 

Esto es en la cabecera

Código Javascript:

<script languaje="JavaScript">
function compruebaFecha(valor)
{
if (strlen(valor)==10) //Solo un ejemplo
    return 0;  //Fecha mal introducida, tambien puede reenviar la dirección de la imagen si sirve de algo
else
    return 1;  // Fecha bien introducida
}
</script>
 

[gspablo]

una pista aunque sea..

[linternazo]

Perdona, no había visto tu respuesta. A ver, lo que tienes que hacer es darle un id al input y despues recoger su valor con getElementById.

Te pongo un ejemplo que comprueba una fecha. Luego ya tu lo editas a tu gusto.

Código Javascript:

function compruebafecha()
    {
    valor = document.getElementById("idfecha").value;
 
    if (valor=="20/05/84")
        {
        alert("Es mi cumpleaños!");
        }
    }
 

[gspablo]

Eso mas o menos lo sabia, mi problema es como vuelvo a enviar la información al código, para saber si la fecha es correcta poner una imagen u otra

seria algo asi

Código HTML:

<td> <input onblur=compruebafecha() id="idfecha" name="nfecha" type="text" /> </td>
<?php
if (return==1) // ESTO SERA LO QUE DEVUELVA EL JAVASCRIPT DEL INPUT ANTERIOR
  echo "<td><img src=mal.jpg /><td>";
else
  echo "<td><img src=bien.jpg /><td>";
?>
 

Esto es en la cabecera

Código Javascript:

<script languaje="JavaScript">
function compruebaFecha()
{
valor = document.getElementById("idfecha").value;
if (strlen(valor)==10) //Solo un ejemplo
    return 0;  //Fecha mal introducida, tambien puede reenviar la dirección de la imagen si sirve de algo
else
    return 1;  // Fecha bien introducida
}
</script>
 

[linternazo]

A ver muchacho, todo esto va de la movida DOM.
Échale un ojo a este manual
http://librosweb.es/javascript/capitulo5.html

Te dejo un ejemplo de como puedes cambiar el src de una imagen si se cumple una condición:

Código Javascript:

function compruebafecha()
    {
    valor = document.getElementById("idfecha").value;
 
    if (valor=="20/05/84")
        {
        imagen = document.getElementById("idimagen");
        imagen.src = "bien.jpg";
        }
    }
 

[gspablo]

pefecto, lo probaré

Muuuuchas gracias ;)

[gspablo]

te pongo mi codigo ya modificado a ver como lo veis, lo he simplicado para que de momento funcione, ya luego lo hare como yo quiero, pero en principio de momento no funciona, vamos que no hace nada de nada

Código HTML:

<td>
<input onblur=compruebafecha() id="idfecha" name="nfecha" type="text"  value="" />
</td>   
<td>
<img id="idimagen" name="nimagen"></img>
</td>
 

Código Javascript:

<script languaje="text/JavaScript">
function compruebaFecha()
{
    imagen = document.getElementById("idimagen");
    imagen.src = "img/bien.gif";  
}
</script>
 

[JavierB]

Hola gspablo

Atento a las mayúsculas/minúsculas.

onblur=compruebafecha()
function compruebaFecha()

Saludos,

[gspablo]

perfecto!! era eso. Muchas gracias