0

Tengo este problema, estoy haciendo un login y un register pero cuando intento verificar si los datos se estan enviando por medio de un alert(); no se esta mandando la infomacion.

Codigo

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title>RegisterPrueba</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <form class="guardar" method="POST">

    <input type="text" id="Nombre" placeholder="Nombre">
    <input type="password" id="password" placeholder="Contraseña">
    <input type="submit" id="Guardar">
  </form>
</body>

</html>

<script type="text/javascript">
  $(document).ready(function() {
    $('#Guardar').click(function() {
      var datos = $('#guardar').serialize();

      alert(datos);
      return false;

      $.ajax({

        type: "POST",
        url: "guardar.php",
        data: datos,
        success: function() {


        }
      });
    });
  });
</script>

2
  • noto que en tu js asignas a la variable datos lo que llega por el id guardar pero al momento de ver tu form en vez de decir id, dice class
    – user75901
    Commented el 25 jul. 2018 a las 19:28
  • @Alfredo ya lo cambie y nada Commented el 25 jul. 2018 a las 19:31

3 respuestas 3

4

Aparte del problema con el ID que te indican otros usuarios, el método serialize() toma los valores de los campos usando su name. Tus campos no tienen atributo name. Añádeselo y ya te funcionará (también tendrás que añadir el id al formulario):

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title>RegisterPrueba</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <form id="guardar" method="POST">

    <input type="text" name="Nombre" id="Nombre" placeholder="Nombre">
    <input type="password" name="password" id="password" placeholder="Contraseña">
    <input type="submit" id="Guardar">
  </form>
</body>

</html>

<script type="text/javascript">
  $(document).ready(function() {
    $('#Guardar').click(function() {
      var datos = $('#guardar').serialize();

      alert(datos);
      return false;

      $.ajax({

        type: "POST",
        url: "guardar.php",
        data: datos,
        success: function() {


        }
      });
    });
  });
</script>

0

Los elementos HTML o lo mismo las etiquetas puedes accederlas por medio de JS a través de su id o class; del modo siguiente

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<p id="parrafo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In repellat, earum, voluptates officiis tempora laudantium blanditiis magnam mollitia cumque ipsam eos perferendis numquam. Est adipisci officia, quas vel recusandae quibusdam.</p>
<span class="clase">hola</span>

<script>
    let parrafo = document.querySelector("#parrafo")
    let span = document.querySelector(".clase")

    parrafo.style.color = "red"

    span.style.color = "orange"
</script>
</body>
</html>

Es decir:

  1. con el símbolo de # es para los id
  2. con el símbolo de . es para las class

Para tu ejercicio, yo cambiaría la class por un id, de tal modo que tu ejercicio quede así

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>RegisterPrueba</title>


        <script src="JS/Jquery 3.3.1.js" ></script>
</head>
    <body>
        <form id="guardarDatos" method="POST">

            <input type="text" id="Nombre" placeholder="Nombre">
            <input type="password" id="password" placeholder="Contraseña">
            <input type="submit" id="Guardar">
        </form>
    </body>
</html>

<script type="text/javascript">

    $(document).ready(function(){
        $('#Guardar').click(function(){
            var datos= $('#guardarDatos').serialize();

            alert(datos);
            return false;

            $.ajax({

                type:"POST",
                url:"guardar.php",
                data: datos,
                success:function(){


                }
            });
        });
    });

</script>
0

Recomendaría poner este código en el evento submit del form

$('#guardarForm').on('submit', function(event) {
    event.preventDefault();

    var datos= $('#guardarForm').serialize();
      alert(datos);
      return false;

      $.ajax({

        type: "POST",
        url: "guardar.php",
        data: datos,
        success: function() {


        }
      });
});
3
  • ya lo coloque id y sigue igual xD Commented el 25 jul. 2018 a las 19:31
  • Perdon, alli actualice Commented el 25 jul. 2018 a las 19:32
  • no funciona :cc Commented el 25 jul. 2018 a las 19:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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