inconveniente con submit()

function · #1 (**permalink**) 11/06/2011, 17:17

Amigos tego esto:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.1.6.1.min.js"></script>
<script language="javascript" type="text/javascript">
// declaro que el documento se encuentra listo
$.(document).ready(function() {
    //remarco que se trata del id primero (mostrando los datos del primer fomrulario)
    $('#primero').submit(function() {
        //si los campos no se encuentran vacios
        if($('#n').val() != '' && $.('#l').val() != '') {
            //hago que el loader empiece a funcionar
            $('.response').html('<img src="loading.gif" align="absmiddle">');
        } else {
            //si os campos no estan vacios le digo que deben rellenarlos
            $('.response').text('Debe rellenar los campos').fadeIn(1000);
        }
    });
});
</script>
</head>
 
<body>
<form id="primero">
Name: <input id="n" type="text" name="name" /> Lastname: <input id="l" type="text" name="lname" /> &nbsp; <input type="submit" name="Admitir" value="ir a paso 2" />
<div class="response"></div>
</form>
</body>
</html>

Y al parecer algo esty haciendo mal porque no me esta funcionando. lo que quiero hacer es:
si los campos input no estan rellenados aparecera el texto debe rellenar, de lo contrario mostrará la imagen cargando, lo pongo asi porque despues de mostrar la imagen cargando quiero hacer un ajax hacia un script php para validarlos datos con la bd, pero de momento solo quiero conseguir la primera parte, alguien sabe porque no me funciona??

Porfa, estoy desesperado, necesito ayuda en esto, tengo poca experianca en jquery, pero algo entiendo.

Gracias

Naahuel · #2 (**permalink**) 11/06/2011, 18:16

Es $(document).ready() no $.(document).ready() (tenés el mismo error en las líneas 9 y 13).
Debés hacer que tu función devuelva false si hay un error para que el envío del formulario se cancele (agregá "return false" luego de mostrar el mensaje "Debe rellenar los campos" o el formulario se enviará de todas formas.)

function · #3 (**permalink**) 11/06/2011, 18:29

Cita:

Iniciado por Naahuel

Es $(document).ready() no $.(document).ready() (tenés el mismo error en las líneas 9 y 13).
Debés hacer que tu función devuelva false si hay un error para que el envío del formulario se cancele (agregá "return false" luego de mostrar el mensaje "Debe rellenar los campos" o el formulario se enviará de todas formas.)

Te lo agradezco muchisimo Naahuel

Ahora mira lo que hice, pero el div con la clase no se mantiene, porque?

Código Javascript:

Ver original// declaro que el documento se encuentra listo
$(document).ready(function() {
    //remarco que se trata del id primero (mostrando los datos del primer fomrulario)
    $('#primero').submit(function() {
        //declaro las variable para cada value
        var n = $('#n').val();
        var l = $('#l').val();
        //si los campos no se encuentran vacios
        if(n <= 1 && l <= 1) {
            //hago que el loader empiece a funcionar
            $('.response').html('<img src="loading.gif" align="absmiddle">');
            //llamo al ajax
        } else {
            //si os campos no estan vacios le digo que deben rellenarlos
            $('.response').text('Debe rellenar los campos');
        }
    });
});

Código HTML:

Ver original<form id="primero">
Name: <input id="n" type="text" name="name" /> Lastname: <input id="l" type="text" name="lname" /> &nbsp; <input type="submit" name="Admitir" value="Verificar" />
<div class="response"></div>
</form>

Naahuel · #4 (**permalink**) 11/06/2011, 18:40

Cita:

Iniciado por function

Ahora mira lo que hice, pero el div con la clase no se mantiene, porque?

Cita:

Iniciado por Naahuel

Debés hacer que tu función devuelva false si hay un error para que el envío del formulario se cancele (agregá "return false" luego de mostrar el mensaje "Debe rellenar los campos" o el formulario se enviará de todas formas.)

function · #5 (**permalink**) 11/06/2011, 18:50

Cita:

Iniciado por Naahuel

UUPPPPSSSS!!!!!

Me siento

se acostumbra uno tanto a leer entre lineas y rapido que se me olvida poner atención a los expertos. Te agradezco tu ayuda. Mira como lo hice

Código Javascript:

Ver original// declaro que el documento se encuentra listo
$(document).ready(function() {
    //remarco que se trata del id primero (mostrando los datos del primer fomrulario)
    $('#primero').submit(function() {
        //declaro las variable para cada value
        var n = $('#n').val();
        var l = $('#l').val();
        //si los campos no se encuentran vacios
        if(n != 0 && l != 0) {
            //hago que el loader empiece a funcionar
            $('.response').html('<img src="loading.gif" align="absmiddle">');
            return false;
            //llamo al ajax
        } else {
            //si os campos no estan vacios le digo que deben rellenarlos
            $('.response').html('Debe rellenar los campos');
            return false;
        }
    });
});

Código HTML:

Ver original<form id="primero" method="post">
Name: <input id="n" type="text" name="name" /> Lastname: <input id="l" type="text" name="lname" /> &nbsp; <input type="submit" name="Admitir" value="Verificar" />
<div class="response"></div>
</form>

Agradezco mucho tu ayuda

Naahuel · #6 (**permalink**) 11/06/2011, 21:32

está perfecto :) Pero tené en cuenta que "return" implica que la función debe terminar y veo que lo has puesto donde deberías hacer tu pedido con ajax. Ahí no debe ir, pues no se ejecutará lo que continúa luego del return.

espero esté claro :)

function · #7 (**permalink**) 12/06/2011, 12:07

Cita:

Iniciado por Naahuel

está perfecto :) Pero tené en cuenta que "return" implica que la función debe terminar y veo que lo has puesto donde deberías hacer tu pedido con ajax. Ahí no debe ir, pues no se ejecutará lo que continúa luego del return.

espero esté claro :)

Si te entiendo
pero aun no hago el ajax, asi que deberé poner return false para que el formulario no se ejecute, como dijiste, cierto?, es mas me esta funcionando de maravilla. Voy a poner el ajax y te cuento, gracias nuevamente

tredio · #8 (**permalink**) 12/06/2011, 18:57

lo que te dicen es que lo que coloques debajo del "return false" no se va a ejecutar, creo que como de igual manera cancelas el submit del formulario hagas algo asi:

Código Javascript:

Ver original$('#primero').submit(function(ev) {
        ev.preventDefault();//cancelo el envio del formulario
        //declaro las variable para cada value
        var n = $('#n').val();
        var l = $('#l').val();
        //si los campos no se encuentran vacios
        if(n != 0 && l != 0) {
            //hago que el loader empiece a funcionar
            $('.response').html('<img src="loading.gif" align="absmiddle">');
            //llamo al ajax
        } else {
            //si os campos no estan vacios le digo que deben rellenarlos
            $('.response').html('Debe rellenar los campos');
        }
    });