Get input value in jquery


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

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

    <table class="table" >
    <tbody id="myTable">




  var url ='/api/api.php';
   var h;
    var listusers =$('.table');
             url: url,
             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>");;

asked by William T 06.11.2017 в 07:15

3 answers


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

  url: url,
  type: 'JSON'

It should be

  url: url,
  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];

   '<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>'+

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

    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

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');
             url: url,
             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ó 
        console.log($(this).val()); //obtener el valor del input
answered by 06.11.2017 в 08:50

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


answered by 06.11.2017 в 14:49