Why does my ajax not detect information?

Question

Why does my ajax not detect information?

Navigation

#1 by (4 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have this problem, I am doing a login and a register but when I try to verify if the data is being sent by means of 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 jquery html5

asked by Critical Ghost 25.07.2018 в 21:24

source

3 answers

0

The HTML elements or the same tags can be accessed through JS through its 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>

That is:

with the symbol # is for the id

with the symbol of. it's for the class

For your exercise, I would change the class to an id, so that your exercise stays 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>

answered by 25.07.2018 в 21:35

0

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() {


        }
      });
});

answered by 25.07.2018 в 21:26

query three tables with INNER JOIN Update a div with ajax when there is a change

score 4 · Accepted Answer

Apart from the problem with the ID that other users tell you, the method serialize() takes the values of the fields using its name . Your fields do not have name attribute. Add 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>