Home / Questions / 183949
Accepted
Critical Ghost
Asked: 2020-07-26 11:24:21 +0800 CST 2020-07-26 11:24:21 +0800 CST

Why my ajax does not detect information?

  • 772

I have this problem, I am doing a login and a register but when I try to verify if the data is being sent through a alert();the information is not being sent.

Code

<!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>

javascript

3 Answers

  1. Best Answer

    Apart from the problem with the ID that other users tell you, the method serialize()takes the values ​​of the fields using their name. Your fields have no attribute name. Add it to it and it will work for you (you will also have to add the id to the form):

    <!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>

    • 4

  2. I would recommend putting this code in the submit event of the 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() {


        }
      });
});
    • 0

  3. HTML elements or even tags can be accessed through JS through their id or class; as follows

    <!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>

    Namely:

    1. with the # symbol is for the id
    2. with the symbol of . it is for the classes

    For your exercise, I would change the class to an id, so that your exercise looks like this

    <!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