Problem when collecting an input with JavaScript of data collected with ajax

Question

Problem when collecting an input with JavaScript of data collected with ajax

Navigation

#1 by (0 votes)

0

I have a problem collecting a number of an input that I have filled with ajax, the thing is that when I pick it up it is always returning 0. What can I do to get it back?

$(document).ready(function () {
                eventosHoy();
            });
            
// metodo que me crea los input
function eventosHoy() {
                var dt = new Date();  // sacar la fecha de hoy
                var month = dt.getMonth() + 1;
                var day = dt.getDate();
                var year = dt.getFullYear();
                var fecha = month + '-' + day + '-' + year;
                consulta = fecha;
                var diaEventos = "";
                $.ajax({
                    data: {"b": consulta},
                    type: "POST",
                    url: "servidor.php",
                    success: function (datos) { // es el parametro que te devuelve
                        s = JSON.parse(datos);
                        localStorage.setItem('eventosdia', s);
                        i = 0;
                        for (evento of s) { //aqui el array se pone al reves 
                            //aqui formamos el html de cada evento
                            diaEventos = diaEventos + '<form name="formevento' + i + '" method="post" onSubmit="irEvento(this)">';
                            diaEventos = diaEventos + '<input type="text" id="pos" name="posicion" value="' + i + '">';
                            diaEventos = diaEventos + '<h1>Evento: ' + evento.descripcion + '</h1>';
                            diaEventos = diaEventos + '<h3>Hora: ' + evento.hora + '</h3>';
                            diaEventos = diaEventos + '<input type="submit" name="evento" name="boton" value="+info">';
                            diaEventos = diaEventos + '</form>';
                            i++;
                        }
                        $("#eventos").append(diaEventos);
                    }

                });
                
//aqui quiero recuperar los input
      function irEvento() {
                console.log('hola');
                var posicion = document.getElementById('pos').value;
                alert(posicion);
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div id="eventos">
        </div>

Thanks in advance.

javascript jquery html ajax

asked by Nuria Nieto 13.12.2018 в 12:03

source

1 answer

How to send the id to a modal Problem with MySql query inside PHP query

score 0 · Accepted Answer

You are creating all input with the same id , so javascript gets the first id that you find with document.getElementById() .

I recommend that that form send you directly to php the data without having to go through javascript:

$.ajax({
   data: {"b": consulta},
   type: "POST",
   url: "servidor.php",
   success: function (datos) { // es el parametro que te devuelve
       s = JSON.parse(datos);
       localStorage.setItem('eventosdia', s);
       i = 0;
       for (evento of s) { //aqui el array se pone al reves 
          //aqui formamos el html de cada evento
          diaEventos = diaEventos + '<form name="formevento' + i + '" method="post" action="tuPhp.php">';
          diaEventos = diaEventos + '<input type="text" id="pos" name="posicion" value="' + i + '">';
          diaEventos = diaEventos + '<h1>Evento: ' + evento.descripcion + '</h1>';
          diaEventos = diaEventos + '<h3>Hora: ' + evento.hora + '</h3>';
          diaEventos = diaEventos + '<input type="submit" name="evento" name="boton" value="+info">';
          diaEventos = diaEventos + '</form>';
          i++;
      }
      $("#eventos").append(diaEventos);
  }
});

This removes you from vulnerabilities since it is not recommended to walk data between javascript and php .

If you do not want to launch directly, you have the option to add a class with which to then make a foreach and retrieve the values of these input.

$.ajax({
       data: {"b": consulta},
       type: "POST",
       url: "servidor.php",
       success: function (datos) { // es el parametro que te devuelve
           s = JSON.parse(datos);
           localStorage.setItem('eventosdia', s);
           i = 0;
           for (evento of s) { //aqui el array se pone al reves 
              //aqui formamos el html de cada evento
              diaEventos = diaEventos + '<form name="formevento' + i + '" method="post" onSubmit="irEvento()>';
              diaEventos = diaEventos + '<input type="text" class="pos" name="posicion" value="' + i + '">';
              diaEventos = diaEventos + '<h1>Evento: ' + evento.descripcion + '</h1>';
              diaEventos = diaEventos + '<h3>Hora: ' + evento.hora + '</h3>';
              diaEventos = diaEventos + '<input type="submit" name="evento" name="boton" value="+info">';
              diaEventos = diaEventos + '</form>';
              i++;
          }
          $("#eventos").append(diaEventos);
      }
    });

//aqui quiero recuperar los input
function irEvento() {
    console.log('hola');
    var posicion = document.getElementsByClassName("pos");
    Array.prototype.forEach.call(posicion , function(el) {          
         console.log(el.tagName);
    });
}

This would be the other option.