Hola, estoy usando un formulario html que se usa para iniciar sesión en mi sitio web, lo estoy construyendo para que use AJAX (jQuery) pero tengo algunos problemas.

Aquí está el JavaScript:

function validateLoginDetails() {
    $('[name=loginUser]').click(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
    });
}

Aquí está el formulario html:

<form id="formLogin" name="loginUser" method="post">
    Username<br /><input id="username" name="username" type="text" maxlength="30" style="width:160px; border:solid 1px #444444;" /><br /><br />
    Password<br /><input id="password" name="password" type="password" maxlength="50" style="width:160px; border:solid 1px #444444;" /><br /><br />
    <input id="submit" type="submit" value="Play" style="width:100px; background:#FFFFFF; border:solid 1px #444444;" />
</form>

El problema es que, cuando envío el formulario, ejecuta el código pero luego vuelve a ser como era antes, esto puede sonar extraño, pero puedo decirlo porque puedo verlo cambiar el tamaño div y luego, justo después de volver a su tamaño original .

¿Alguna idea?

EDITAR: si ejecuto el código con el siguiente enlace, por ejemplo, entonces funciona bien.

<a href="#" name="loginUser">Clicky</a>
0
Stanni 22 oct. 2009 a las 03:33

4 respuestas

La mejor respuesta

Debe devolver falso desde su controlador para que no realice la publicación del formulario real después de hacer la llamada AJAX.

Esto es lo que haría.

$(function() {
     $('#formLogin').submit( function() {
         $('#mainWrap').css( { width: '600px', height: '200px' });
         $.post( 'modules/web/loginForm.php',
                 $(this).serialize(),
                 function(data) {
                     $('#interfaceScreen').html(data);
                 }
         );
         return false;
     });
});

Tenga en cuenta que estoy usando una publicación para asegurarme de que la URL (incluido el nombre de usuario y la contraseña) no quede expuesta en los registros web. También supongo que la página que contiene el formulario se cargó a través de https y, por lo tanto, la publicación también estará segura.

4
tvanfosson 22 oct. 2009 a las 03:17

Primero, ¿confirmó que su archivo .php está devolviendo contenido y no un error? Si está insertando contenido (con $load), no debe activar los comandos CSS en el div hasta que el contenido esperado (de la carga) haya regresado con éxito, p. usar devolución de llamada. Además, sugeriría usar .submit(), una función específica del formulario, con una referencia directa a la etiqueta del formulario y / o id para acelerar las cosas (no hacer que jquery busque tantas cosas en el DOM).

< style >

.loadReg{ width:[yourBeginWidth]; height:[yourBeginHeight];}

.loadSuccess{ width:600px; height:200px;}

< / style >

function validateLoginDetails() {
  $('#formLogin').submit(function() {
    // using load(url,{data:toPOST},callback(if successful));

    $("#interfaceScreen").load("modules/web/loginForm.php?",
    {"username": encodeURIComponent(username), "password": encodeURIComponent(password)},
    function(){$("#mainWrap").toggleClass('loadSuccess');} 
    );// end load

  });// end submit

  return false;
}

Esto podría ser aún más eficiente y menos molesto, pero quería dejarlo reconocible. Los otros muchachos tienen razón ... si su Div está volviendo a su tamaño original ... es porque se permite que la página se vuelva a cargar ... en cuyo caso el navegador aplica su ancho / alto DIV inicial ... ya que su ancho / alto alternativo solo se aplica mediante jquery onsubmit.

Recordar:

  1. asignar enviar evento al formulario directamente
  2. utilizar la capacidad incorporada $load para pasar los pares de valores es el objeto {name:val}
  3. mover CSS a un estado discreto vs enterrado en código
  4. desencadenar CSS si tiene éxito
  5. detener la página de volver a cargar y restablecer la pantalla
0
Jason Plank 22 nov. 2011 a las 21:42

Si se trata de un envío de formulario, realmente debería optar por el controlador de eventos .form (), en lugar de un controlador de eventos .click (). Con el primero, si el formulario se envía a través de otros métodos, sus comprobaciones seguirán ejecutándose, mientras que el clic depende de que ese único elemento active una acción. También deberá devolver falso o preventDefault () en este evento, por lo que su función realmente se activa correctamente.

La otra cosa (y esto puede ser minúsculo / sin importancia según el muestreo de código que ha proporcionado) es que está vinculando ese controlador de eventos en una función que debe llamarse; ¿por qué no cargarlo en el documento listo? vea abajo)?

Volvería a trabajar su código de esta manera, personalmente:

$(document).ready(function() {
    $('#formLogin').submit(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
        return false;
    });
});
0
Ryan McGrath 22 oct. 2009 a las 04:22

Estoy bastante seguro de que tvanfosson está en el camino correcto. Intente subir el retorno falso a la función de clic o intente cancelar el evento.

$('[name=loginUser]').click(function() {
    //do stuff
    return false;
});

or

$('[name=loginUser]').click(function(e) {
    e.cancel();
});
0
WesleyJohnson 21 oct. 2009 a las 23:50