Ploblemas con "imagen boton" de formulario

da2 · #1 (**permalink**) 16/06/2003, 11:36

Hola,
primero decir que no entiendo mucho de javascript.
He creado un formulario que me valida los campos y funciona perfectamente. En el momento que substituyo el boton del formulario por una imagen deja de funcionar correctamente y pasa a enviar el formulario sin validar. Es decir te da la alerta y luego lo manda de todas formas!

Alguien tiene idea de pq?

Un saludo.

Kaopectate · #2 (**permalink**) 16/06/2003, 11:56

Creo que deberías poner aca el código de la validación e incluso el código HTML del botón en si para poder ayudarte.

Saludos.

da2 · #3 (**permalink**) 17/06/2003, 12:48

Gracias por tu interes Kaopectate.
El código de validación es:

Código:

	<SCRIPT LANGUAGE="javascript">
	<!--


	   function CheckField(form)
	   {
	   var retour = 1;

	     //******* Initialisation
		 form.Nom.style.backgroundColor="#FFFFFF";
		 form.Cognom.style.backgroundColor="#FFFFFF";
		 form.Email.style.backgroundColor="#FFFFFF";
	     form.Tel.style.backgroundColor="#FFFFFF";
	     form.Pregunta.style.backgroundColor="#FFFFFF";


	     //********* Test
	     if ( form.Nom.value == "")
	     {
	     	form.Nom.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
	     if ( form.Cognom.value == "")
	     {
	     	form.Cognom.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
	     if ( form.Email.value == "")
	     {
	     	form.Email.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
	     if ( form.Tel.value == "")
	     {
	     	form.Tel.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
	     if ( form.Pregunta.value == "")
	     {
	     	form.Pregunta.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
if (form.Email.value.indexOf('@', 0) == -1 ||
form.Email.value.indexOf('.', 0) == -1) {
alert("Dirección de e-mail inválida");
form.Email.focus();
return false;
}
	     return retour;


	   }

	   function NextPage()
	   {
	     document.form.submit();
	   }

	   function Check(form)
	   {
	      	if ( CheckField(form)=='0')
		{
			window.alert("Ha d’omplir els camps, si us plau !");
		}
		else
		{
		   NextPage();
		}

	   }


	-->
</script>

Y el codigo del boton es:

Código:

<input type="image" src="../imagenes/cal.jpg" value="OK" onClick="Check(this.form);">

Creo que es todo.

Un saludo

S.O.S

Por favor

Kaopectate · #4 (**permalink**) 17/06/2003, 13:13

Creo que lo que te sucede es sencillo de solucionar, te explico:

Un formulario <form> es en si una agrupación de elementos con los que se interactúa con el usuario, es decir, textos <input type="text">, combos <select>, botones <input type="button">, etc.

Todos estos elementos de "interacción" tienen entre sus propiedades a form, la cual dice a que <form> pertenecen.

Eso no pasa con los tags <img>, no tienen form asociado, de ahi que la llamada a la validación con this.form te funciona desde un botón pero no desde una imagen.

Cambia el this.form por algo como:

onClick="Check(document.nombreDeMiTagForm)"

Es decir, pon explícitamente lo que tengas como propiedad name de tu tag form y te debe funcionar.

Saludos.

da2 · #5 (**permalink**) 17/06/2003, 13:32

Gracias por tu respueta pero sigue haciendo lo mismo.
He puesto <input type="image" src="../imagenes/cal.jpg" value="OK" onClick="Check(document.pro);">

y el el formulario
<form action="/cgi-bin/formail.pl" method="POST" NAME="pro">

incluso he cambiado
function CheckField(pro)

pero sigue sin funcionar

Kaopectate · #6 (**permalink**) 17/06/2003, 13:39

Prueba por un momento quitando el parámetro, es decir, haciendo la llamada a Check() y recibiendo en la declaración como:

function Check()

Y poniendo dentro de todo lo que tienes como form.algo cambiado a document.pro.algo

Haz el cambio y dime que sucede, mientras tanto yo reviso la función.

Saludos.

---------- NOTA POSTERIOR ---------------

No creo que sea bueno que tu parametro se llame precisamente form, eso debe enloquecer al interprete.

Prueba cambiando el parametro form por algo como frm o miForm

Saludos.

da2 · #7 (**permalink**) 17/06/2003, 13:40

Hace lo mismo.

tunait · #8 (**permalink**) 17/06/2003, 13:42

Imagino que antes de poner la imagen te funcionaba porque debías de tener un boton de tipo button, en vez de submit.

Un type="button" no hace nada, sólo lo que le diga el evento onclick.

En cambio un type="submit" lo primero que hace es enviar el formulario.

El tag input type="image" es el equivalente a input type="submit" con lo que se comporta igual y cuando pinchas en la imagen te envía el formulario.

Dado que el submit lo estás haciendo desde tu función javascript puedes omitir botón alguno de formulario y usar una imagen normal que llame a tu función.

Mi sugerencia es que cambies tu

<input type="image" src="../imagenes/cal.jpg" value="OK" onClick="Check(this.form);">

por

<img src="../imagenes/cal.jpg" onClick="Check(document.forms[0]);">

puedes cambiar forms[0] por el nombre de tu formulario

document.nombreFormulario

Kaopectate · #9 (**permalink**) 17/06/2003, 13:46

------------------------------------ Posterior ------------------------------------
Prueba asi:

Código PHP:

      <SCRIPT LANGUAGE="javascript">

    <!--

 
 
       function CheckField(frm)

       {

       var retour = 1;

 
         //******* Initialisation

         frm.Nom.style.backgroundColor="#FFFFFF";

         frm.Cognom.style.backgroundColor="#FFFFFF";

         frm.Email.style.backgroundColor="#FFFFFF";

         frm.Tel.style.backgroundColor="#FFFFFF";

         frm.Pregunta.style.backgroundColor="#FFFFFF";

 
 
         //********* Test

         if ( frm.Nom.value == "")

         {

             frm.Nom.style.backgroundColor="#FFB6C1";

             retour=0;

         }

         if ( frm.Cognom.value == "")

         {

             frm.Cognom.style.backgroundColor="#FFB6C1";

             retour=0;

         }

         if ( frm.Email.value == "")

         {

             frm.Email.style.backgroundColor="#FFB6C1";

             retour=0;

         }

         if ( frm.Tel.value == "")

         {

             frm.Tel.style.backgroundColor="#FFB6C1";

             retour=0;

         }

         if ( frm.Pregunta.value == "")

         {

             frm.Pregunta.style.backgroundColor="#FFB6C1";

             retour=0;

         }

if (frm.Email.value.indexOf('@', 0) == -1 ||

frm.Email.value.indexOf('.', 0) == -1) {

alert("Dirección de e-mail inválida");

frm.Email.focus();

return false;

}

         return retour;

 
 
       }

 
       function NextPage()

       {

         document.form.submit();

       }

 
       function Check(frm)

       {

              if ( CheckField(frm)=='0')

        {

            window.alert("Ha d’omplir els camps, si us plau !");

        }

        else

        {

           NextPage();

        }

 
       }

 
 
    -->

</script>

Y deja la llamada a la función como te dije en un principio:

Check(document.pro)

Dime si funciona.

Saludos.

------------------------------------ Posterior ------------------------------------
Olvida mis pruebas, haz lo que te dice tunait.

Saludos.

da2 · #10 (**permalink**) 17/06/2003, 13:58

Tunait
con esto ni mira la validacion. Pasa directament a mandar el formulario.

Un saludo

Kaopectate
lo que haces cambiar los form de la funcion por frm?

Un saludo

Este es el codigo de todo el formulario por si alguien tiene una solución.

Código:

<HTML>
<HEAD>
<TITLE>Contactar Pa d'Àngel</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
	<SCRIPT LANGUAGE="javascript">
	<!--


	   function CheckField(frm)
	   {
	   var retour = 1;

	     //******* Initialisation
		 frm.Nom.style.backgroundColor="#FFFFFF";
		 frm.Cognom.style.backgroundColor="#FFFFFF";
		 frm.Email.style.backgroundColor="#FFFFFF";
	     frm.Tel.style.backgroundColor="#FFFFFF";
	     frm.Pregunta.style.backgroundColor="#FFFFFF";


	     //********* Test
	     if ( frm.Nom.value == "")
	     {
	     	frm.Nom.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
	     if ( frm.Cognom.value == "")
	     {
	     	frm.Cognom.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
	     if ( frm.Email.value == "")
	     {
	     	frm.Email.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
	     if ( frm.Tel.value == "")
	     {
	     	frm.Tel.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
	     if ( frm.Pregunta.value == "")
	     {
	     	frm.Pregunta.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
if (frm.Email.value.indexOf('@', 0) == -1 ||
frm.Email.value.indexOf('.', 0) == -1) {
alert("Dirección de e-mail inválida");
frm.Email.focus();
return false;
}
	     return retour;


	   }

	   function NextPage()
	   {
	     document.form.submit();
	   }

	   function Check(frm)
	   {
	      	if ( CheckField(frm)=='0')
		{
			window.alert("Ha d’omplir els camps, si us plau !");
		}
		else
		{
		   NextPage();
		}

	   }


	-->
</script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 background="fotos/backs.jpg">
<table border="0" width="800" background="fotos/back.gif" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="100%">
                    <form action="/cgi-bin/formail.pl" method="POST" NAME="pro">
					  <input type=hidden name="recipient" value="[email protected]">
					  <input type=hidden name="sort" value="order:Nom,Cognom,Email,Telefon,Pregunta">
					  <input type=hidden name="subject" value="Consulta">
                      <table border="0" width="100%" cellpadding="0">
                        <tr>
                          <td width="30%" align="right" valign="top" bgcolor="#796342"><font color="#FFFFFF" size="2" face="Arial">Nom:</font></td>
                          <td width="70%" bgcolor="#796342"><input type="text" name="Nom" size="30"></td>
                        </tr>
                        <tr>
                          <td width="30%" align="right" valign="top" bgcolor="#796342"><font color="#FFFFFF" size="2" face="Arial">Cognom:</font></td>
                          <td width="70%" bgcolor="#796342"><input type="text" name="Cognom" size="30"></td>
                        </tr>
                        <tr>
                          <td width="30%" align="right" valign="top" bgcolor="#796342"><font color="#FFFFFF" size="2" face="Arial">E-mail:</font></td>
                          <td width="70%" bgcolor="#796342"><input type="text" name="Email" size="30"></td>
                        </tr>
                        <tr>
                          <td width="30%" align="right" valign="top" bgcolor="#796342"><font color="#FFFFFF" size="2" face="Arial">Telèfon:</font></td>
                          <td width="70%" bgcolor="#796342"><input type="text" name="Tel" size="12"></td>
                        </tr>
                        <tr>
                          <td width="30%" align="right" valign="top" bgcolor="#796342"><font color="#FFFFFF" size="2" face="Arial">Pregunta:</font></td>
                          <td width="70%" bgcolor="#796342"><textarea rows="3" name="Pregunta" cols="27"></textarea></td>
                        </tr>
                      </table>
					  <font face="Arial" size="2">
					  <p align="center"><input type="image" src="../imagenes/cal.jpg" value="OK" onClick="Check(document.pro);">
					  </font>

                    </form>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>

Un saludo a todos y gracias por vuestro esfuerzo.

tunait · #11 (**permalink**) 17/06/2003, 14:03

Cita:

con esto ni mira la validacion. Pasa directament a mandar el formulario.

Me estás diciendo que una imagen normal y corriente te está enviando el formulario sin hacer validación, cuando lo que está enviando el formulario es la función javascript

No tiene sentido. Si el formulario ha sido enviado es porque la función javascript lo ha enviado.

saludos

da2 · #12 (**permalink**) 17/06/2003, 14:13

Como minimo va a buscar el formail

Mira lo tu mismo. Te mando el codigo como yo lo he modificado.

Código:

<HTML>
<HEAD>
<TITLE>Contactar Pa d'Àngel</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE>a:link       { text-decoration: none; color: #000000 }
a:visited    { text-decoration: none; color: #000000 }
a:hover      { color: #006600 }
a:active     { text-decoration: none }
</STYLE>
	<SCRIPT LANGUAGE="javascript">
	<!--


	   function CheckField(form)
	   {
	   var retour = 1;

	     //******* Initialisation
		 form.Nom.style.backgroundColor="#FFFFFF";
		 form.Cognom.style.backgroundColor="#FFFFFF";
		 form.Email.style.backgroundColor="#FFFFFF";
	     form.Tel.style.backgroundColor="#FFFFFF";
	     form.Pregunta.style.backgroundColor="#FFFFFF";


	     //********* Test
	     if ( form.Nom.value == "")
	     {
	     	form.Nom.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
	     if ( form.Cognom.value == "")
	     {
	     	form.Cognom.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
	     if ( form.Email.value == "")
	     {
	     	form.Email.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
	     if ( form.Tel.value == "")
	     {
	     	form.Tel.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
	     if ( form.Pregunta.value == "")
	     {
	     	form.Pregunta.style.backgroundColor="#FFB6C1";
	     	retour=0;
	     }
if (form.Email.value.indexOf('@', 0) == -1 ||
form.Email.value.indexOf('.', 0) == -1) {
alert("Dirección de e-mail inválida");
form.Email.focus();
return false;
}
	     return retour;


	   }

	   function NextPage()
	   {
	     document.form.submit();
	   }

	   function Check(form)
	   {
	      	if ( CheckField(form)=='0')
		{
			window.alert("Ha d’omplir els camps, si us plau !");
		}
		else
		{
		   NextPage();
		}

	   }


	-->
</script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 background="fotos/backs.jpg">
<TABLE WIDTH=800 BORDER=0 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=2>
			<IMG SRC="images/capcelera_01.jpg" WIDTH=800 HEIGHT=133 ALT=""></TD>
	</TR>
	<TR>
		<TD width="618" height="22" background="images/capcelera_02.jpg">
</TD>
		<TD ROWSPAN=2 background="images/contacte.jpg" width="182" height="32">
            &nbsp;</TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="images/capcelera_04.jpg" WIDTH=618 HEIGHT=10 ALT=""></TD>
	</TR>
</TABLE>
<table border="0" width="800" background="fotos/back.gif" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%">
      <p align="center">&nbsp;</p>
      <div align="center">
        <center>
        <table border="0" width="362" cellpadding="0">
          <tr>
            <td width="356">
              <table border="0" width="100%" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="100%" bgcolor="#666633" height="20"><font size="2" face="Arial" color="#FFFFFF"><b>&nbsp;Preguntes
                    i sugeriments</b></font></td>
                </tr>
                <tr>
                  <td width="100%">
                    <form action="/cgi-bin/formail.pl" method="POST" NAME="form">
					  <input type=hidden name="recipient" value="[email protected]">
					  <input type=hidden name="sort" value="order:Nom,Cognom,Email,Telefon,Pregunta">
					  <input type=hidden name="subject" value="Consulta">
                      <table border="0" width="100%" cellpadding="0">
                        <tr>
                          <td width="30%" align="right" valign="top" bgcolor="#796342"><font color="#FFFFFF" size="2" face="Arial">Nom:</font></td>
                          <td width="70%" bgcolor="#796342"><input type="text" name="Nom" size="30"></td>
                        </tr>
                        <tr>
                          <td width="30%" align="right" valign="top" bgcolor="#796342"><font color="#FFFFFF" size="2" face="Arial">Cognom:</font></td>
                          <td width="70%" bgcolor="#796342"><input type="text" name="Cognom" size="30"></td>
                        </tr>
                        <tr>
                          <td width="30%" align="right" valign="top" bgcolor="#796342"><font color="#FFFFFF" size="2" face="Arial">E-mail:</font></td>
                          <td width="70%" bgcolor="#796342"><input type="text" name="Email" size="30"></td>
                        </tr>
                        <tr>
                          <td width="30%" align="right" valign="top" bgcolor="#796342"><font color="#FFFFFF" size="2" face="Arial">Telèfon:</font></td>
                          <td width="70%" bgcolor="#796342"><input type="text" name="Tel" size="12"></td>
                        </tr>
                        <tr>
                          <td width="30%" align="right" valign="top" bgcolor="#796342"><font color="#FFFFFF" size="2" face="Arial">Pregunta:</font></td>
                          <td width="70%" bgcolor="#796342"><textarea rows="3" name="Pregunta" cols="27"></textarea></td>
                        </tr>
                      </table>
					  <font face="Arial" size="2">
					  <p align="center"><input type="image" src="../imagenes/cal.png" value="OK" onClick="Check(document.form[0]);">
					  </font>

                    </form>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        </center>
      </div>
      <p align="center"><font face="Verdana" color="#ffffff" size="2"><b>C/ Puig
      de la Verneda s/n<br>
      17137 - Viladamat (Girona)</b></font></p>
      <p align="center"><b><font face="Verdana" color="#ffffff" size="2">Tel.
      972 78 86 11<br>
      Fax: 972 78 86 53<br>
      Mòbil: 607873868<br>
      Email: </font><a href="mailto:[email protected]"><font face="Verdana" color="#ffffff" size="2">[email protected]</font></a></b></p>
      <p>&nbsp;</td>
  </tr>
</table>
</BODY>
</HTML>

tunait · #13 (**permalink**) 17/06/2003, 14:31

Cita:

Sigues teniendo una imagen que hace un submit.

Observa las diferencias (en negritas lo que no copiaste bien)

Código:

<input type="image" src="../imagenes/cal.png" value="OK" onClick="Check(document.form[0]);">

<img src="../imagenes/cal.jpg" onClick="Check(document.forms[0]);">

da2 · #14 (**permalink**) 17/06/2003, 14:57

tunait me da un error en tiempo de ejucucion.
A ti te funcionó?

Un saludo

tunait · #15 (**permalink**) 17/06/2003, 15:06

Pues no, no lo había probado, pero acabo de hacerlo y me funcionó perfecto.

Te lo cuelgo para que lo pruebes ??

Necesitaría el nombre del dominio donde se encuentre el cgi del action

da2 · #16 (**permalink**) 17/06/2003, 15:10

RETIRO LO DICHO!!!!!!!!!!!!

Funciona.

No me funcionaba pq modifique el nombre del formulario por forms.
Si le dejo el nombre original y solo modifico la linia de la imagen funciona perfectamente.
<img src="../imagenes/cal.jpg" onClick="Check(document.forms[0]);">

Muchisimas gracias

tunait · #17 (**permalink**) 17/06/2003, 15:16

Ah, que bueno, me alegro

Sabes, es que si antes te funcionaba bien y dejó de validar al cambiar el botón por la imagen el problema debía estar ahí.

Cuando le pedimos forms[0] se refiere a "el formulario declarado en primer lugar en esta página" (osea, el que tiene la posición 0, que es a partir de donde empieza a contar siempre javascript).

Te lo puse así porque desconocía el nombre que tenía tu formulario.

Lo dicho, me alegra que lo solucionaras.

Bona nit

da2 · #18 (**permalink**) 17/06/2003, 15:19

es decir que con forms[] podria tener varios formularios en la misma página y ejecutar uno o otro en funcion del indice que le indique?

Un saludo

tunait · #19 (**permalink**) 17/06/2003, 15:31

Exacto. Aunque también podrías ejecutar o verificar uno u otro llamándo a cada uno por su nombre.

Pero si tuvieras 3 formularios en la misma página el primero que hubieras definido sería el document.forms[0] o bien document.nombreDeEseFormulario, el segundo definido sería el document.forms[1] o document.nombreDelForm y el tercero document.forms[2] o lo document.nombreDeEste.

Se crea una lista (array o matriz) automáticamente con los formularios de una misma página. Si sólo hay uno, pues se crea una lista de 1 elemento con la posición 0 (que es la primera)

Yá dentro de cada formulario también se crea automáticamente otra lista (array o matriz) con los elementos que tiene ese form.

Por ejemplo, en tu formulario tienes un array de 8 elementos (3 campos ocultos más 5 visibles).

Si quisieras acceder a tu campo oculto de nombre "subject" podrías referenciarlo mediante

document.forms[0].elements[2]

o bien, en tu caso

document.form.elements[2]

Prueba a pedirle a body lo siguiente

<body onload="alert(document.forms[0].elements[2].name)">

Verás como te devuelve el nombre de tu tercer campo oculto (subject)

Y todo va maomeno así

da2 · #20 (**permalink**) 17/06/2003, 15:37

Entendido a la perfeccion. Cada dia se aprende algo nuevo.

Muchimas gracias por todo.

Saludos