Botón tipo imagen en formulario

[luisvasquez]

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

[caricatos]

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

[luisvasquez]

Gracias...!

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

Saludos, Luis

[luisvasquez]

Iniciado por caricatos

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

[demiurgo_daemon]

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

[caricatos]

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

[luisvasquez]

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

[masterred]

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

[ayaxalva]

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.