Foros del Web » Creando para Internet » HTML »

Botón tipo imagen en formulario

Estas en el tema de Botón tipo imagen en formulario en el foro de HTML en Foros del Web. Amigos, Tengo un formulario con un botón convencional y cuando trato de cambiarlo por tipo image, me da un problema. El botón es el siguiente: ...
  #1 (permalink)  
Antiguo 23/04/2007, 06:59
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 866
Antigüedad: 14 años
Puntos: 6
Botón tipo imagen en formulario

Amigos,

Tengo un formulario con un botón convencional y cuando trato de cambiarlo por tipo image, me da un problema.

El botón es el siguiente:

Código:
<input type="button" name="Button" class="Button" value="Enviar"   onClick="checkForm('viaje','x_peso:Peso:number:2','x_volumen:Volumen:number:1')">
En el evento onClick se ejecuta una función Javascript para la validación del formulario. Si hay un error, despliega un Alert y luego espera que corrija los datos en el formulario. Alli todo perfecto.

Cuando cambio el tipo de botón a "image", entonces igual realiza la validación, pero una vez que le doy aceptar en el alert de la función, se pasa a la siguiente página del formulario, es decir, avisa del error, pero se pasa a la siguiente página.

Código:
<input name="Button" type="image" class="Button"   onClick="checkForm('viaje','x_peso:Peso:number:2','x_volumen:Volumen:number:1')" value="Enviar" src="imagenes/enviar.gif">
Que estoy haciendo mal??

No se pueden llamar a eventos onClick cuando se usan imagenes en los botones??

Saludos y muchas gracias,
Luis Vásquez
  #2 (permalink)  
Antiguo 24/04/2007, 00:55
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Botón tipo imagen en formulario

Hola:

Los input type="image"... son elementos especiales "input" o entrada.
La característica de este botón es que son también del tipo submit, y envía las coordenadas de la imagen donde se pinchó.

Si pinchas ese input, se envía el formulario salvo que canceles el envío en la validación, pero ejecutará la función validadora, así que tal vez te convenga alguna alternativa... una de ellas sería usar una etiqueta button (¡no entiendo porqué se usa tan poco!), con la imagen en el interior (esta etiqueta debe cerrarse) y si se quiere darle otro aspecto con estilos, por ejemplo sin color de fondo ni bordes...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 24/04/2007, 01:22
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 866
Antigüedad: 14 años
Puntos: 6
Re: Botón tipo imagen en formulario

Gracias...!

Voy a probar lo que me dices y te aviso...

Saludos, Luis
  #4 (permalink)  
Antiguo 24/04/2007, 19:33
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 866
Antigüedad: 14 años
Puntos: 6
Re: Botón tipo imagen en formulario

Cita:
Iniciado por caricatos Ver Mensaje

... una de ellas sería usar una etiqueta button (¡no entiendo porqué se usa tan poco!), con la imagen en el interior ...
Hola Amigo Caricatos,

Estoy probando lo que dijiste y hay una parte (gran parte) que no entiendo...

Puse la etiqueta button asi:

<button class="Button" name="regresar" type="button" value="Regresar"></button>

Y solo me sale un botón en blanco (class="button" es un estilo CSS que le asigno a los botones de los formularios)

Cuando dices "con la imagen en el interior" te refieres a que debo poner un botón gráfico dentro de la etiqueta button? Me parece que eso no tiene sentido...no necesito usar la etiqueta para eso..no es asi?

Sino pongo un botón gráfico, entonces ...donde pongo la URL a donde quiero ir? Esta URL es la página anterior, pero debe llevar valores en el querystring, asi pagina_anterior.asp?valor1=val1

Saludos, y gracias,
Luis
  #5 (permalink)  
Antiguo 24/04/2007, 20:18
Avatar de demiurgo_daemon  
Fecha de Ingreso: diciembre-2006
Ubicación: Querétaro
Mensajes: 184
Antigüedad: 11 años
Puntos: 2
Re: Botón tipo imagen en formulario

Hola luisvasquez,

creo que lo que caricatos dice es que uses CSS para decorar el botón a tu gusto. Por ejemplo, si ya hiciste una imagen con forma de botón de 100x50 px llamada imagen.png:

Código:
button.Button{
color: black;
background: white url('imagen.png') no-repeat top left;
width: 100px;
height: 50px;
}
Y el botón quedaría casi como ya lo tenías:
Código HTML:
<button class="Button" name="regresar" type="button" value="Regresar">Regresar</button> 
Por cierto, hay un error en Explorer (por eso lo amamos tanto ) gracias al cual necesitas que el valor de value sea exactamente lo mismo que el interior de la etiqueta.

Ahora, tal vez esté fuera de tema, pero te recomiendo ampliamente que cambies el botón a type='submit' y que uses el evento onsubmit de la forma en vez de onclick del botón.

Saludos
  #6 (permalink)  
Antiguo 25/04/2007, 00:49
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Botón tipo imagen en formulario

Hola:

Lo que quise decir es lo siguiente:

<button type="button" class="Button" onClick="checkForm('viaje','x_peso:Peso:number:2', 'x_volumen:Volumen:number:1')"><img src="imagenes/enviar.gif" alt="enviar" /></button>

Y la css:
.Button {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
}

Me parece que darle name y value a un botón tiene muy poco sentido, salvo que se quiera discriminar en destino...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 25/04/2007, 06:39
Avatar de luisvasquez  
Fecha de Ingreso: diciembre-2003
Ubicación: Venezuela
Mensajes: 866
Antigüedad: 14 años
Puntos: 6
Re: Botón tipo imagen en formulario

Gracias amigos..

Tal vez sea que no estoy entendiendo lo que dicen o tal vez no me expliqué bien..

Voy de nuevo:

Ya tengo un botón tipo Button con el cual envío el formulario. Este botón realiza la validación usando el javascript Checkform. Eso funciona bien.

Lo que necesito es un botón para regresar a la página anterior con valores en el querysrting.

Para completar la información, el usuario debe completar 4 formularios y en el 4to se graban los datos. Lo que quiero es que, a partir del formulario 2, se pueda regresar a corregir datos del anterior.

El botón que tengo para el submit es asi:

<input type="button" name="Button" value="Paso 3 --->" class="Button" onClick="checkForm('viaje','x_origen:Población Origen::3','x_destino:Poblacion Destino::3')">

El que necesito para regresar sería asi, si uso una imágen:

<a href="publicar_viaje_paso_1.asp?valor1=variable1&v alor2=variable2>
<img src="imagenes/Español_regresar.gif" border="0">
</a>

El problema es que si uso una imágen entonces cada vez que haga un cambio en la Class Button del archivo CSS tengo que crear una nueva imágen que sea igual para reemplazar la actual.

Es por eso que necesito un botón que se modifique cuando cambie el CSS y al cual pueda asignarle una URL..

Espero haberme explicado bien...

Agradezco su paciencia y su colaboración,

Luis
  #8 (permalink)  
Antiguo 13/05/2007, 23:08
 
Fecha de Ingreso: octubre-2006
Mensajes: 31
Antigüedad: 11 años, 1 mes
Puntos: 0
Re: Botón tipo imagen en formulario

hola

podriasutilizar algo asi,

<input name="{lang_login}" type="image" value="submit" src="templates/tu_templates/images/bot_entrar.gif" width="40" height="18" alt="entrar">

sino te puede servir de referencia

Última edición por masterred; 13/05/2007 a las 23:13
  #9 (permalink)  
Antiguo 01/08/2008, 16:31
 
Fecha de Ingreso: junio-2007
Mensajes: 5
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Botón tipo imagen en formulario

Saludos,

Esto no responde la inquietud pero creo que puede dar ideas.

<a href="foro.com"><button><img src='b_drop.png' border='0'></button></a>

En lo personal me funciono.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:09.