¿Cómo hacer que, al pulsar un submit, llame a un archivo php con Ajax y jQuery?

publicado por: Anonymous

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

solución

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

_x000D_

_x000D_

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

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *