Get input value in jquery

1

I am generating a list with a input of type button this list is generated from a bd that I have with 4 data therefore generates 4 buttons which I have given an identifier " alum[i].ID_EVENTO " that is a number 1,2,3,4 how can I get the value of each of those buttons attached the html and 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;
           });
            });
        });
}
    
asked by William T 06.11.2017 в 07:15
source

3 answers

1

You are setting the parameters of the Ajax call wrong. Instead of:

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

It should be

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

Assuming that your backend returns JSON as you are asking, and not text, you could also skip the parsing. But hey, let's suppose that you simply get text from the backend so you must pause it. We then have that alum is an array of 4 elements, each of which is an object with keys ID_EVENTO , NOMBRE_EVENTO etc.

Separating the append that you make to your table, we have that in one part you put

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

The closing tag for the date cell is missing.

Later, when you add the button, you put:

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

You are putting ID as what should be class, and as a class what should be id:

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

Finally, you are not putting the row closure ( </tr> );

To make it cleaner, I would declare a variable that would be the object alum[i] remaining:

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>');

The listener to get the value of the button you can add it right there in the loop

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

or delegate it outside as it showed you @ Dev.Joel

listusers.on('click','.btn', function(){
    console.log($(this).val()); //obtener el valor del input
});
    
answered by 06.11.2017 / 11:15
source
2

To get the value of input , you could add a global class (selection) . to these elements and thus add listener to all. (In your code you should replace id with class for input ) .

Also in the $.each you should use the variable item that would be equivalent to alum[i]

$(function() {
    var url ='/api/api.php';
    var listusers =$('.table');
    $.ajax({
             url: url,
             method:'GET',
             type: 'JSON'
        }).done(function (alumnos) {
           $.each(JSON.parse(alumnos),function (i,item) {
               listusers.append('<tr ><td>'+ item.ID_EVENTO + '</td>'  + '<td>'+ item.NOMBRE_EVENTO + '</td>' +  '<td>' + item.FECHA + '<td>'+ item.RESUMEN + '</td>' + '<td>'+ item.DESCRIPCION + '</td>' + '<td>'+ item.CATEGORIA + '</td>' + '<td>'+ item.SEDE + '</td>'+ '<td>'+ item.LUGAR + '</td>'+ '<td>'+ item.CUPOS + '</td>'+ '<td>'+ item.DURACION_HORAS + '</td>'+ '<td>'+ item.FACULTAD + '</td>'+ '<td>'+ item.CREDITOS + '</td>' + "<td><input type='button' class=\"btn btn-info selection\"   value="+ item.ID_EVENTO +" >  </input> </td>");;
           });
    });

    //Listener a los elementos con la clase que se añadió 
    $(document).on('click','.selection',function(){
        console.log($(this).val()); //obtener el valor del input
    });
});
    
answered by 06.11.2017 в 08:50
0

As far as I can see at the end, each input is left with class "button1", "button2" and so on ...

You can refer to that class for each button and use .val () to get the value.

var valor1 = $('boton1').val();
var valor2 = $('boton2').val();
var valor3 = $('boton3').val();
var valor4 = $('boton4').val();

Greetings

    
answered by 06.11.2017 в 14:49