0

Tengo un problema al recoger un número de un input que he rellenado con ajax, la cosa es que al recogerlo siempre me esta devolviendo 0. ¿Que puedo hacer para recuperarlo?

$(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>

Gracias de antemano.

1
  • si si, en el for se suma, me muestra bien los números, cuando me da 0 es al recogerlo Commented el 13 dic. 2018 a las 11:23

1 respuesta 1

0

Estas creando todos los input con la misma id, por lo que javascript coge la primera id que encuentra con document.getElementById().

Te recomiendo que ese form te envie directamente a un php los datos sin tener que pasar por 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);
  }
});

Esto te quita de vulnerabilidades ya que no es muy recomendable andar pasandose datos entre javascript y php.

En caso de no querer lanzar directamente, tienes la opción de añadirle una clase con la que después hacer un foreach y recuperar los valores de estos 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);
    });
}

Esta sería la otra opción.

2
  • muchas gracias! Commented el 13 dic. 2018 a las 11:37
  • Me alegro de haberte ayudado. Te agradecría que pusieras la respuesta como aceptada. Commented el 13 dic. 2018 a las 13:34

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.