Obtener valor de un input en jquery

publicado por: Anonymous

Estoy estoy generando una lista con un input de tipo button esta lista se genera de una bd que tengo con 4 datos por consiguiente me genera 4 botones los cuales le he dado un identificador “alum[i].ID_EVENTO " que es un numero 1,2,3,4 como puedo sacar el valor de cada uno de esos botones adjunto el html y JavaScript

<body>
<div class="col-lg-7">
    <input id="myInput" type="text" placeholder="Search..">

    <table class="table" >
    <tbody id="myTable">
         <tr>
            <td>ID_EVENTO</td>
            <td>NOMBRE_EVENTO</td>
            <td>FECHA</td>
             <td>RESUMEN</td>
             <td>DESCRIPCION</td>
             <td>CATEGORIA</td>
             <td>SEDE</td>
             <td>LUGAR</td>
             <td>CUPOS</td>
             <td>DURACION_HORAS</td>
             <td>FACULTAD</td>
             <td>CREDITOS</td>
             <td>Agregar</td>
        </tr>

    </tbody>
    </table>
</div>



</body>

Js

  var url ='/api/api.php';
   var h;
    var listusers =$('.table');
        $.ajax({
             url: url,
             method:'GET',
             type: 'JSON'
        }).done(function (alumnos) {
           var alum = JSON.parse(alumnos);
           $.each(alum,function (i,item) {

               listusers.append('<tr ><td>'+ alum[i].ID_EVENTO + '</td>'  + '<td>'+ alum[i].NOMBRE_EVENTO + '</td>' +  '<td>' + alum[i].FECHA + '<td>'+ alum[i].RESUMEN + '</td>' + '<td>'+ alum[i].DESCRIPCION + '</td>' + '<td>'+ alum[i].CATEGORIA + '</td>' + '<td>'+ alum[i].SEDE + '</td>'+ '<td>'+ alum[i].LUGAR + '</td>'+ '<td>'+ alum[i].CUPOS + '</td>'+ '<td>'+ alum[i].DURACION_HORAS + '</td>'+ '<td>'+ alum[i].FACULTAD + '</td>'+ '<td>'+ alum[i].CREDITOS + '</td>' + "<td><input type='button' id="btn btn-info" class='boton"+i+"'   value="+ alum[i].ID_EVENTO +" >  </input> </td>");;

               h=i;
           });
            });
        });
}

solución

Estás poniendo mal los parámetros de la llamada Ajax. En vez de:

$.ajax({
  url: url,
  method:'GET',
  type: 'JSON'
})

Debiera ser

$.ajax({
  url: url,
  type:'GET',
  dataType: 'json'
})

Suponiendo que tu backend devuelve JSON tal como lo estás pidiendo, y no texto, también podrías saltarte el parseo. Pero bueno, supongamos que recibes simplemente texto del backend así que debes parsearlo. Tenemos entonces que alum es un array de 4 elementos, cada uno de los cuales es un objeto con llaves ID_EVENTO, NOMBRE_EVENTO etc.

Separando el append que haces a tu tabla, tenemos que en una parte pones

'<td>' + alum[i].FECHA + '<td>'+ alum[i].RESUMEN + '</td>'

Falta el tag de cierre para la celda de fecha.

Más adelante, al añadir el botón, pones:

"<td><input type='button' id="btn btn-info" class='boton"+i+"'   value="+ alum[i].ID_EVENTO +" >  </input> </td>"

Estás poniéndole como ID lo que debiera ser clase, y como clase lo que debiera ser id:

"<td><input type='button' class="btn btn-info" id='boton"+i+"'   value="+ alum[i].ID_EVENTO +" >  </input> </td>"

Finalmente, no estás poniendo el cierre de la fila (</tr>);

Para que quedase más limpio, yo declararía una variable que fuera el objeto alum[i] quedando:

var current_alum=alum[i];

listusers.append(
   '<tr>'+
   '<td>'+ current_alum.ID_EVENTO + '</td>' +
   '<td>'+ current_alum.NOMBRE_EVENTO + '</td>' +  
   '<td>'+ current_alum.FECHA + '</td>'+
   '<td>'+ current_alum.RESUMEN + '</td>' + 
   '<td>'+ current_alum.DESCRIPCION + '</td>' + 
   '<td>'+ current_alum.CATEGORIA + '</td>' + 
   '<td>'+ current_alum.SEDE + '</td>'+ 
   '<td>'+ current_alum.LUGAR + '</td>'+
   '<td>'+ current_alum.CUPOS + '</td>'+ 
   '<td>'+ current_alum.DURACION_HORAS + '</td>'+ 
   '<td>'+ current_alum.FACULTAD + '</td>'+
   '<td>'+ current_alum.CREDITOS + '</td>' + 
   '<td><input type="button" class="btn btn-info" id="boton'+i+'"   value="'+ current_alum.ID_EVENTO +'" >  </input> </td>'+
   '</tr>');

El listener para obtener el valor del botón puedes añadirlo ahí mismo dentro del bucle

$('#boton'+i).on('click',function(){
    console.log($(this).val()); //obtener el valor del input
});

o delegarlo afuera como te mostró @Dev.Joel

listusers.on('click','.btn', function(){
    console.log($(this).val()); //obtener el valor del input
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *