2

Estoy haciendo un login para poder administrar usuarios junto con una base de datos con PHP, HTML, CSS. En un principio, pensé en mandar el botón de submit del formulario a un archivo php que hiciera todo el proceso pero, me gustaría que todo se hiciera de manera asíncrona.

He estado buscando algunos tutoriales por internet y, por lo que veo, hay muchos tutoriales usando Ajax y jQuery, ya que soy principiante en estas dos tecnologías. Mi idea es la siguiente:

Desde index.php, el formulario no tendría action, si no que jQuery llamaría al archivo php (aún no realizado) encargado de poder administrar el proceso.

Código index.php:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <!-- CSS imports -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/main.css" />
    <!-- JQuery include -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/loginForm.js"></script>
    <meta charset="utf-8">
    <title>Login</title>
  </head>
  <body>
    <!-- Navigation Bar content -->
    <nav class="navBar">
      <ul>
        <li><a class="hover" href="index.php">Index</a></li>
      </ul>
    </nav>
    <!-- Body content -->
    <div class="bodyContainer">
      <!-- Form -->
      <div class="formContainer">
        <p class="formTitle">Login form</p>
        <form id="loginForm" method="post">
          <div class="formDataContainer">
            <div id="error"><!-- Error will be shown here ! --></div>
            <label for="uname"><b>Username</b></label>
            <input type="text" placeholder="Enter Username" name="uname" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
            <label for="psw"><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
            <button type="submit" id="btnLogin">Sing in</button>
            <button type="button" id="registerBtn" onclick="location.href='models/registerForm.php';">Register</button>
          </div>
        </form>
      </div>
    </div>
  </body>
</html>

Esa función que usa jQuery y Ajax a su vez, cambiará el botón de "login (submit)" poniendo entrando... e iniciando sesión si la petición por Ajax (POST) ha sido correcta.

Código Ajax -- jQuery (basado en un tutorial)

$('document').ready(function() {
  /* login submit */
  function submitForm() {
    var data = $("#loginForm").serialize();

    $.ajax({

      type: 'POST',
      url: 'php/loginProcess.php',
      data: data,
      beforeSend: function() {
        $("#error").fadeOut();
        $("#btnLogin").html('Sending ...');
      },
      success: function(response) {
        if (response == "ok") {

          $("#btnLogin").html('Signing In ...');
          setTimeout(' window.location.href = "home.php"; ', 4000);
        } else {

          $("#error").fadeIn(1000, function() {
            $("#error").html(response);
            $("#btnLogin").html('Sign In');
          });
        }
      }
    });
    return false;
  }
  /* login submit */
});

El caso es que, al pulsar el botón de submit, no pasa nada. Simplemente no te hace la petición y, he probado a hacer el archivo php para que mostrara algo de ejemplo, sin resultado.

¿Sabéis cómo podría arreglarlo?

PD:

La ruta de las carpetas son:

DirProyecto
  php
    archivos.php
  js
    jQueryScript.js
  css
  index.php

2 respuestas 2

2

Modificaciones:

Quitar el onclickdel botón de envío de modo que el botón se quede así:

<button type="submit" id="btnLogin">Sing in</button>

Llamar a la unción mediante un selector jQuery de este modo:

$('form[id=\'loginForm\']').on('submit', function(e){

Hacer que el iddel formulario coincida con el del selector jQuery

Aquí tienes el código funcionando

 <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
        <!-- CSS imports -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/main.css"/>
        <!-- JQuery include -->
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <meta charset="utf-8">
        <title>Login</title>
    </head>
    <body>
    <!-- Navigation Bar content -->
    <nav class="navBar">
        <ul>
            <li><a class="hover" href="index.php">Index</a></li>
        </ul>
    </nav>
    <!-- Body content -->
    <div class="bodyContainer">
        <!-- Form -->
        <div class="formContainer">
            <p class="formTitle">Login form</p>
            <form id="loginForm" method="post">
                <div class="formDataContainer">
                    <div id="error"><!-- Error will be shown here ! --></div>
                    <label for="uname"><b>Username</b></label>
                    <input type="text" placeholder="Enter Username" name="uname" autocomplete="off" autocorrect="off"
                           autocapitalize="off" spellcheck="false">
                    <label for="psw"><b>Password</b></label>
                    <input type="password" placeholder="Enter Password" name="psw" required autocomplete="off"
                           autocorrect="off" autocapitalize="off" spellcheck="false">
                    <button type="submit" id="btnLogin">Sing in</button>
                    <button type="button" id="registerBtn">Register</button>
                </div>
            </form>
        </div>
    </div>
    <script>
        $('form[id=\'loginForm\']').on('submit', function(e){
            e.preventDefault();
            var data = $(this).serialize();
            alert(data);
            $.ajax({
    
                type: 'POST', url: 'php/loginProcess.php', data: data, beforeSend: function(){
                    $('#error').fadeOut();
                    $('#btnLogin').html('Sending ...');
                }, success: function(response){
                    if (response == 'ok')
                    {
    
                        $('#btnLogin').html('Signing In ...');
                        setTimeout(' window.location.href = "home.php"; ', 4000);
                    }
                    else
                    {
    
                        $('#error').fadeIn(1000, function(){
                            $('#error').html(response);
                            $('#btnLogin').html('Sign In');
                        });
                    }
                },
            });
            return false;
        });
        /* login submit */
    
    </script>
    </body>
    </html>

3
  • Muchas gracias por tu aporte, es muy útil. Tengo una pregunta relacionada con ello. Si en mi documento php hago un print_r($_POST) para comprobar que se han pasado los datos, ¿por qué no me aparecen? ¿Sólo se envían en el caso de que la petición a la bbdd sea correcta? ¿Cómo podría visualizar lo que se envía por $_POST? Gracias. Commented el 6 abr. 2018 a las 7:46
  • Así rápido y sin entrar en detalles de cómo manejar las respuesta en Ajax, una manera de ver el print_r($_POST) es mediante las herramienta para desarrollaores de los navegadores. En Firefox, en la pestaña 'Red' puedes encontrar todo lo relacionado con la petición, en el apartado 'respuesta' podrás ver el print_r($_POST)
    – ErnestoRM
    Commented el 6 abr. 2018 a las 7:52
  • Vale, perfecto. Es decir, que en un futuro, usando mysqli de Php, al por ejemplo comprobar si el username = dbUserName (haciendo consulta SQL), puedo hacer $user = $_POST["uname"] y los datos vendrán directamente. ¿Cierto? Commented el 6 abr. 2018 a las 7:55
1

Mirando el código he encontrado el problema (era una tontería).

Había creado una función que nunca llamaba, porque el código del script tenía una parte de validación que no usaba en mi caso.

Al quitar ese código, no se llama a la función de jQuery.

Quitando esa función, lo he solucionado correctamente y, ahora carga todo.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.