[ERROR] onClick + .submit

kies89 · #1 (**permalink**) 10/09/2012, 05:32

Hola forosdelweb :).
Miren, este código lo que hace es, que si todos los campos (username y password) tienen datos (aunque sea un simple espacio), cuando se presiona el botón "entrar", javascript usa .submit para que se envíe a PHP el form. Todo bien, lo que pasa es que en el evento onClick, al haber luego un return false (que pongo para que si los datos son incorrectos, no envíe el form a PHP), pues nunca envía el form a PHP estén todos los campos rellenados o no.

He probado con onClick="if (condición) return true; else return false;", pero nada...

Agradezco mucho la ayuda que me puedan brindar.
Gracias de antemano.

Código:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  
  <script type="text/javascript">  
  function addContent(divName, content)
  {
    document.getElementById(divName).innerHTML += content;
  }


  function loggear()
  {
    var errorDescription='Faltan datos';

    document.getElementById('usernameError').innerHTML = '';
    document.getElementById('passwordError').innerHTML = '';

    if ( document.getElementById('username').value == '' )
    {
      document.getElementById('usernameError').innerHTML = errorDescription;
	}
    if ( document.getElementById('password').value == '' )
	{
      document.getElementById('passwordError').innerHTML = errorDescription;
	}
	
    if ( (document.getElementById('username').value && document.getElementById('password').value) != '' )
    {
      boton = document.getElementById('entrar');
      padre = boton.parentNode;
      padre.removeChild(boton);
      // Poner una imagen de "cargando" en su lugar
      addContent('midiv', '<img src="/cargando.gif"/><p>Iniciando sesión...</p>');


      document.forms['loggingForm'].submit();
    }
  }
  </script>
</head>
<body>






  <div id="midiv">
      <form name="loggingForm" method="post">
        <input name="user" type="text" id="username" placeholder="Usuario" /><p id="usernameError"></p>
        <input name="pass" type="password" id="password" placeholder="Contraseña" /><p id="passwordError"></p>
	    <button name="entrar" id="entrar" type="submit" onClick="loggear(); return false;">Entrar</button>
      </form> <!-- si quito el return false FUNCIONA a la perfección con el código original, perosi los datos son incorrectos (si no ha introducido usuario o contraseña) te loggea con el PHP igualmente -->
  </div>
</body>
</html>



<?php
if ( isset($_POST['entrar']) ) // Si pulsamos el botón "entrar"
{
  ?><script type="text/javascript">alert('user correcto');</script><?php
}
?>

IsaBelM · #2 (**permalink**) 10/09/2012, 06:22

lo primero que he buscado a sido el atributo action en la etiqueta form y no está. también es llamativo que uses el evento onclick en un botón submit. usa el evento onsubmit en la etiqueta form. un poco de lectura te vendrá bien

kies89 · #3 (**permalink**) 10/09/2012, 07:18

Cita:

Iniciado por IsaBelM

lo primero que he buscado a sido el atributo action en la etiqueta form y no está. también es llamativo que uses el evento onclick en un botón submit. usa el evento onsubmit en la etiqueta form. [URL="http://www.caricatos.net/articulos/formularios.php"]un poco de lectura te vendrá bien[/URL]

Primero que nada, gracias por contestar.
Contestando a tu mensaje:

No está action porque hay dos formas de trabajar con PHP mediante post: una usando action, y otra incluyendo el código PHP en el mismo archivo (por ende, mi método es correcto).

El problema de usar onsubmit es que haya rellenado o no los campos me hace submit, y por tanto me dice "user correcto".

Dradi7 · #4 (**permalink**) 10/09/2012, 09:00

Cita:

Iniciado por kies89

Primero que nada, gracias por contestar.
Contestando a tu mensaje:

No está action porque hay dos formas de trabajar con PHP mediante post: una usando action, y otra incluyendo el código PHP en el mismo archivo (por ende, mi método es correcto).

El problema de usar onsubmit es que haya rellenado o no los campos me hace submit, y por tanto me dice "user correcto".

Pues primero yo no lo vería lógico ni mucho menos lo aplicara usar el action a la misma pagina lo veo una mala practica.

Segundo estas totalmente equivocado diciendo que el submit de todas maneras te envías necesitas primero leer un poco para que entiendas que hace el evento onsubmit si tu no pones correctamente el return entonces te estara realizando de todas maneras el submit

Ejemplo:

Código HTML:

Ver original<form name="frm" action="otherpage.php" onsubmit="return validate();">
....
....
....
</form>

Código Javascript:

Ver originalfunction validate(){
   var frm = document.forms["frm"];
   var OK = true;// al ser true te envía el submit
   if(frm.elements["campo1"].value == ""){
      OK = false;
   }else if(frm.elements["campon"].value == ""){
      OK = false;
   }
   return OK;
}

caricatos · #5 (**permalink**) 10/09/2012, 09:17

Hola:

Cita:

Iniciado por kies89

...No está action porque hay dos formas de trabajar con PHP mediante post: una usando action, y otra incluyendo el código PHP en el mismo archivo (por ende, mi método es correcto).
...

Estás pidiendo ayuda, así que debes considerar lo que te plantean... y lo que le llega al navegador es texto plano (o mejor un html), así que las formas de trabajar con php son válidas en el servidor pero cuando llega al navegador es html...

Lo que me repele es tu afirmación de "mi método es correcto"...

Sin escuchar vas a tener serios problemas que seguro que por ahora no te planteas como accesibilidad, SEO, etc.

La página que referencia IsaBelM la escribí yo, cuando por varios años he afirmado que no era especialista en formularios, y seguramente me falte aún madurar mucho, pero te puedo asegurar que las afirmaciones de nuestra colaboradora deberías considerarlas... si luego sigues con problemas, veríamos las alternativas.

Saludos

kies89 · #6 (**permalink**) 10/09/2012, 09:38

Jeje, vale, perdón.
Graciaas ^^, pero sigue sin decirme "user correcto", no sé porqué :/.

Este es mi código actual:

Cita:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<script type="text/javascript">
function addContent(divName, content)
{
document.getElementById(divName).innerHTML += content;
}

function loggear()
{
var frm = document.forms['loggingForm'];
var OK = true; // al ser true te envía el submit
var errorDescription='Falta dato';

document.getElementById('usernameError').innerHTML = '';
document.getElementById('passwordError').innerHTML = '';

if ( frm.elements['username'].value == "" )
{
document.getElementById('usernameError').innerHTML = errorDescription;
OK = false;
}
if ( frm.elements['password'].value == "" )
{
document.getElementById('passwordError').innerHTML = errorDescription;
OK = false;
}

if ( OK ) // Si vamos a enviar el formulario para que se procese...
{
boton = document.getElementById('entrar');
padre = boton.parentNode;
padre.removeChild(boton);
// Poner una imagen de "cargando" en su lugar
addContent('midiv', '<p>Iniciando sesión...</p>');

document.forms['loggingForm'].submit();
}

return OK; // Enviamos el formulario para que sea procesado
}
</script>
</head>
<body>

<div id="midiv">
<form name="loggingForm" method="post" onsubmit="return loggear();">
<input name="user" type="text" id="username" placeholder="Usuario" /><p id="usernameError"></p>
<input name="pass" type="password" id="password" placeholder="Contraseña" /><p id="passwordError"></p>
<button name="entrar" id="entrar" type="submit">Entrar</button>
</form>
</div>
</body>
</html>

<?php
if ( isset($_POST['entrar']) ) // Si pulsamos el botón "entrar"
{
?><script type="text/javascript">alert('user correcto');</script><?php
}
?>

Otra cosa a comentar es que si quito esto,

Código:

document.forms['loggingForm'].submit();

, pues no me envía el form a PHP.

caricatos · #7 (**permalink**) 10/09/2012, 09:47

Hola:

Si usas la colección forms, los elements debes recogerlos desde sus atributos "name"... los id son otra cosa... así que:

if ( frm.elements['username'].value == "" )

solo tiene sentido con un campo con name="username"... si quieres referenciar el id debes usar otra colección... con el pass[word] parece que tienes el mismo problema.

Saludos

kies89 · #8 (**permalink**) 10/09/2012, 10:04

Ahh, jeje, valee ^^.

Ya lo he modificado con los names, pero sigue sin decirme "user correcto", no sé porqué :(.

Código:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  
  <script type="text/javascript">  
  function addContent(divName, content)
  {
    document.getElementById(divName).innerHTML += content;
  }


  function loggear()
  {
    var frm = document.forms['loggingForm'];
    var OK = true; // al ser true te envía el submit
    var errorDescription='Falta dato';

    document.getElementById('usernameError').innerHTML = '';
    document.getElementById('passwordError').innerHTML = '';


    if ( frm.elements['username'].value == "" )
    {
      document.getElementById('usernameError').innerHTML = errorDescription;
      OK = false;
    }
    if ( frm.elements['password'].value == "" )
    {
      document.getElementById('passwordError').innerHTML = errorDescription;
      OK = false;
    }

	
    if ( OK ) // Si vamos a enviar el formulario para que se procese...
    {
      boton = document.getElementById('entrar');
      padre = boton.parentNode;
      padre.removeChild(boton);
      // Poner una imagen de "cargando" en su lugar
      addContent('midiv', '<p>Iniciando sesión...</p>');


      document.forms['loggingForm'].submit();
    }

    return OK; // Enviamos el formulario para que sea procesado
  }
  </script>
</head>
<body>






  <div id="midiv">
      <form name="loggingForm" method="post" onsubmit="return loggear();">
        <input name="username" type="text" placeholder="Usuario" /><p id="usernameError"></p>
        <input name="password" type="password" placeholder="Contraseña" /><p id="passwordError"></p>
	    <button name="entrar" id="entrar" type="submit">Entrar</button>
      </form>
  </div>
</body>
</html>



<?php
if ( isset($_POST['entrar']) ) // Si pulsamos el botón "entrar"
{
  ?><script type="text/javascript">alert('user correcto');</script><?php
}
?>

caricatos · #9 (**permalink**) 10/09/2012, 10:15

Hola:

Me pierdo con tu código y con eso de hacerlo correcto... cuando fuerzas el submit no estoy seguro de que sirva pinchar en ningún botón... en mi artículo estoy seguro de que explico algo sobre el tema... con un botón submit, no se debería usar el método submit (vaya la rebuznancia)... comenta esa línea para ver los resultados y nos comentas... claro que el problema podría estar en otra parte.

Saludos

kies89 · #10 (**permalink**) 10/09/2012, 12:35

A ver, a mi código si le añado action sí que funciona correctamente, pero yo lo quiero sin action, ese es el problema. Pero yo relleno los inputs y pulso en "entrar", pero me recarga la página y no me dice "user correcto".

Aquí dejo el código más comentado:

Código:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  
  <script type="text/javascript">  
  function addContent(divName, content)
  {
    document.getElementById(divName).innerHTML += content;
  }


  function loggear()
  {
    var frm = document.forms['loggingForm'];
    var OK = true; // al ser true te envía el submit
    var errorDescription='Falta dato';

    // Borra los mensajes de error
    document.getElementById('usernameError').innerHTML = '';
    document.getElementById('passwordError').innerHTML = '';


    if ( frm.elements['username'].value == "" )
    {
      document.getElementById('usernameError').innerHTML = errorDescription;
      OK = false;
    }
    if ( frm.elements['password'].value == "" )
    {
      document.getElementById('passwordError').innerHTML = errorDescription;
      OK = false;
    }

	
    if ( OK ) // Si vamos a enviar el formulario para que se procese...
    {
      // Borramos el botón "entrar"
      boton = document.getElementById('entrar');
      padre = boton.parentNode;
      padre.removeChild(boton);

      // Añadirmos texto al div
      addContent('midiv', '<p>Iniciando sesión...</p>');


      document.forms['loggingForm'].submit(); // Hacemos submit al formulario y nos comunicamos con PHP
    }

    return OK; // Enviamos el formulario para que sea procesado
  }
  </script>
</head>
<body>






  <div id="midiv">
      <form name="loggingForm" method="post" onsubmit="return loggear();">
        <input name="username" type="text" placeholder="Usuario" /><p id="usernameError"></p>
        <input name="password" type="password" placeholder="Contraseña" /><p id="passwordError"></p>
	    <button name="entrar" id="entrar" type="submit">Entrar</button>
      </form>
  </div>
</body>
</html>



<?php
if ( isset($_POST['entrar']) ) // Si pulsamos el botón "entrar"
{
  ?><script type="text/javascript">alert('user correcto');</script><?php
}
?>

kies89 · #11 (**permalink**) 11/09/2012, 11:42

¿Nadie sabe? :(

Dradi7 · #12 (**permalink**) 11/09/2012, 11:53

Pero no solo te bastaria cambiar esto por

<button name="entrar" id="entrar" type="submit">Entrar</button>

un tipo input

<input name="entrar" id="entrar" type="submit" value="Entrar" />

o en otro caso cambiar solo esto

isset($_POST['entrar'])

por esto

isset($_POST['username'])

kies89 · #13 (**permalink**) 11/09/2012, 12:13

Cita:

Iniciado por Dradi7

Pero no solo te bastaria cambiar esto por

<button name="entrar" id="entrar" type="submit">Entrar</button>

un tipo input

<input name="entrar" id="entrar" type="submit" value="Entrar" />

o en otro caso cambiar solo esto

isset($_POST['entrar'])

por esto

isset($_POST['username'])

mm.. Ya he cambiado lo de button y he puesto un input... Y he puesto lo de $_POST['username'], vale, muchísimas gracias, funciona ^^.
Pero tengo una pequeña pregunta (que es lo que intentaba hacer desde el principio): si yo lo que quiero es saber si se ha pulsado el botón (es decir, $_POST['entrar']), si lo pongo en el código tal y como muestro a continuación no funciona, y no me dice "user correcto" (cabe mencionar que el mensaje del alert que he puesto es por poner alguna cosa...).

Código:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  
  <script type="text/javascript">  
  function addContent(divName, content)
  {
    document.getElementById(divName).innerHTML += content;
  }


  function loggear()
  {
    var frm = document.forms['loggingForm'];
    var OK = true; // al ser true te envía el submit
    var errorDescription='Falta dato';

    // Borra los mensajes de error
    document.getElementById('usernameError').innerHTML = '';
    document.getElementById('passwordError').innerHTML = '';


    if ( frm.elements['username'].value == "" )
    {
      document.getElementById('usernameError').innerHTML = errorDescription;
      OK = false;
    }
    if ( frm.elements['password'].value == "" )
    {
      document.getElementById('passwordError').innerHTML = errorDescription;
      OK = false;
    }

	
    if ( OK ) // Si vamos a enviar el formulario para que se procese...
    {
      // Borramos el botón "entrar"
      boton = document.getElementById('entrarID');
      padre = boton.parentNode;
      padre.removeChild(boton);

      // Añadirmos texto al div
      addContent('midiv', '<p>Iniciando sesión...</p>');


      document.forms['loggingForm'].submit(); // Hacemos submit al formulario y nos comunicamos con PHP
    }

    return OK; // Enviamos el formulario para que sea procesado
  }
  </script>
</head>
<body>






  <div id="midiv">
      <form name="loggingForm" method="post" onsubmit="return loggear();">
        <input name="username" type="text" placeholder="Usuario" /><p id="usernameError"></p>
        <input name="password" type="password" placeholder="Contraseña" /><p id="passwordError"></p>
	<input name="entrar" id="entrarID" type="submit" value="Entrar" />
      </form>
  </div>
</body>
</html>



<?php
if ( isset($_POST['entrar']) ) // Si pulsamos el botón "entrar"
{
  ?><script type="text/javascript">alert('user correcto');</script><?php
}
?>

Dradi7 · #14 (**permalink**) 11/09/2012, 13:03

mmm que raro a mi si me funciona poniendolo solamente asi

<input name="entrar" id="entrarID" type="submit" value="Entrar" />

kies89 · #15 (**permalink**) 11/09/2012, 14:08

Cita:

Iniciado por Dradi7

mmm que raro a mi si me funciona poniendolo solamente asi

<input name="entrar" id="entrarID" type="submit" value="Entrar" />

mm... ¿Has copiado tal cual el último código que he publicado? :/.

Dradi7 · #16 (**permalink**) 11/09/2012, 14:55

Parece que el error esta en el ID trata de poner por ejemplo un ID que no tenga que ver con nada referente con entrar por ejemplo ID="procesar"

Saludos

kies89 · #17 (**permalink**) 11/09/2012, 15:56

Cita:

Iniciado por Dradi7

Parece que el error esta en el ID trata de poner por ejemplo un ID que no tenga que ver con nada referente con entrar por ejemplo ID="procesar"

Saludos

mm.. pues sigue sin salirme el alert();
aquí el código:

Código:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  
  <script type="text/javascript">  
  function addContent(divName, content)
  {
    document.getElementById(divName).innerHTML += content;
  }


  function loggear()
  {
    var frm = document.forms['loggingForm'];
    var OK = true; // al ser true te envía el submit
    var errorDescription='Falta dato';

    // Borra los mensajes de error
    document.getElementById('usernameError').innerHTML = '';
    document.getElementById('passwordError').innerHTML = '';


    if ( frm.elements['username'].value == "" )
    {
      document.getElementById('usernameError').innerHTML = errorDescription;
      OK = false;
    }
    if ( frm.elements['password'].value == "" )
    {
      document.getElementById('passwordError').innerHTML = errorDescription;
      OK = false;
    }

	
    if ( OK ) // Si vamos a enviar el formulario para que se procese...
    {
      // Borramos el botón "entrar"
      boton = document.getElementById('buttonLogginID');
      padre = boton.parentNode;
      padre.removeChild(boton);

      // Añadirmos texto al div
      addContent('midiv', '<p>Iniciando sesión...</p>');


      document.forms['loggingForm'].submit(); // Hacemos submit al formulario y nos comunicamos con PHP
    }

    return OK; // Enviamos el formulario para que sea procesado
  }
  </script>
</head>
<body>






  <div id="midiv">
      <form name="loggingForm" method="post" onsubmit="return loggear();">
        <input name="username" type="text" placeholder="Usuario" /><p id="usernameError"></p>
        <input name="password" type="password" placeholder="Contraseña" /><p id="passwordError"></p>
	    <input name="buttonLoggin" id="buttonLogginID" type="submit" value="Entrar" />
      </form>
  </div>
</body>
</html>



<?php
if ( isset($_POST['buttonLoggin']) ) // Si pulsamos el botón "buttonLoggin"
{
  ?><script type="text/javascript">alert('user correcto');</script><?php
}
?>

Dradi7 · #18 (**permalink**) 11/09/2012, 16:13

Cita:

Iniciado por kies89

mm.. pues sigue sin salirme el alert();
aquí el código:

Código:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  
  <script type="text/javascript">  
  function addContent(divName, content)
  {
    document.getElementById(divName).innerHTML += content;
  }


  function loggear()
  {
    var frm = document.forms['loggingForm'];
    var OK = true; // al ser true te envía el submit
    var errorDescription='Falta dato';

    // Borra los mensajes de error
    document.getElementById('usernameError').innerHTML = '';
    document.getElementById('passwordError').innerHTML = '';


    if ( frm.elements['username'].value == "" )
    {
      document.getElementById('usernameError').innerHTML = errorDescription;
      OK = false;
    }
    if ( frm.elements['password'].value == "" )
    {
      document.getElementById('passwordError').innerHTML = errorDescription;
      OK = false;
    }

	
    if ( OK ) // Si vamos a enviar el formulario para que se procese...
    {
      // Borramos el botón "entrar"
      boton = document.getElementById('buttonLogginID');
      padre = boton.parentNode;
      padre.removeChild(boton);

      // Añadirmos texto al div
      addContent('midiv', '<p>Iniciando sesión...</p>');


      document.forms['loggingForm'].submit(); // Hacemos submit al formulario y nos comunicamos con PHP
    }

    return OK; // Enviamos el formulario para que sea procesado
  }
  </script>
</head>
<body>






  <div id="midiv">
      <form name="loggingForm" method="post" onsubmit="return loggear();">
        <input name="username" type="text" placeholder="Usuario" /><p id="usernameError"></p>
        <input name="password" type="password" placeholder="Contraseña" /><p id="passwordError"></p>
	    <input name="buttonLoggin" id="buttonLogginID" type="submit" value="Entrar" />
      </form>
  </div>
</body>
</html>



<?php
if ( isset($_POST['buttonLoggin']) ) // Si pulsamos el botón "buttonLoggin"
{
  ?><script type="text/javascript">alert('user correcto');</script><?php
}
?>

Lo estas haciendo mal a lo que yo me referia es que cambiaras el ID no el name del button para que ambos no se parezcan ejemplo

<input type="submit" name="envio" id="proceso" />

kies89 · #19 (**permalink**) 11/09/2012, 17:11

Sigue sin irme... :S.

Código:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  
  <script type="text/javascript">  
  function addContent(divName, content)
  {
    document.getElementById(divName).innerHTML += content;
  }


  function loggear()
  {
    var frm = document.forms['loggingForm'];
    var OK = true; // al ser true te envía el submit
    var errorDescription='Falta dato';

    // Borra los mensajes de error
    document.getElementById('usernameError').innerHTML = '';
    document.getElementById('passwordError').innerHTML = '';


    if ( frm.elements['username'].value == "" )
    {
      document.getElementById('usernameError').innerHTML = errorDescription;
      OK = false;
    }
    if ( frm.elements['password'].value == "" )
    {
      document.getElementById('passwordError').innerHTML = errorDescription;
      OK = false;
    }

	
    if ( OK ) // Si vamos a enviar el formulario para que se procese...
    {
      // Borramos el botón "entrar"
      boton = document.getElementById('buttonLogginID');
      padre = boton.parentNode;
      padre.removeChild(boton);

      // Añadirmos texto al div
      addContent('midiv', '<p>Iniciando sesión...</p>');


      document.forms['loggingForm'].submit(); // Hacemos submit al formulario y nos comunicamos con PHP
    }

    return OK; // Enviamos el formulario para que sea procesado
  }
  </script>
</head>
<body>






  <div id="midiv">
      <form name="loggingForm" method="post" onsubmit="return loggear();">
        <input name="username" type="text" placeholder="Usuario" /><p id="usernameError"></p>
        <input name="password" type="password" placeholder="Contraseña" /><p id="passwordError"></p>
	    <input name="entrar" id="buttonLogginID" type="submit" value="Entrar" />
      </form>
  </div>
</body>
</html>



<?php
if ( isset($_POST['entrar']) ) // Si pulsamos el botón "buttonLoggin"
{
  ?><script type="text/javascript">alert('user correcto');</script><?php
}
?>