Take input values inside datatable

Asked

Viewed 611 times

0

I own in an HTML a datatable and on each line I have 3 inputs (text, datepicker and select) and a button, which will send to PHP, to record what was typed or selected in inputs from that line. What I’m trying to do is get the information from the line on which I hit the button. What I thought I’d do is serialize the chart and turn it into a array using Jquery; the problem is that it brings information from all lines of datatable, but what I need is just the line I push the button.

I can’t take the figures for id of inputs for the datatable is automatically populated by PHP.

Follows code:

var table = $('#tableList').DataTable();
$("#tableList").on("click", ".btnReceived", function() {
    var data = JSON.stringify(table.$('input, select').serializeArray());
    console.log(data);
});

Follow HTML where the button is created:

<a class='btn btn-orange btn-xs btnReceived' href='#' title='Confirmar Recebimento'><span class='glyphicon glyphicon-saved'></span><a/>
javascript jquery html5 json

  • The others are coming empty?

  • They are. If the datatable has a thousand lines and I filled only 1, it brings in a thousand lines json, with 999 empty and 1 with what I filled.

  • But in this case, Voce can check those that are empty and use one splice to remove them, so will only keep the ones that were typed

  • I believe that checking would not be a viable way, if I think about the point of view of my user, he will first fill the inputs and then go clicking the buttons, this would end with my verification... I believe that if there was a way to get only the information from the button line that I click, it would be better.

  • You do not understand, when I say check, I say even Voce, for the user will not make a difference, because the code itself would do all this.

1 answer

0

Here is an example of how you could do, checking and storing only the fields that have information.

document.getElementById('enviar').onclick = function(){
  let elemento = document.getElementsByClassName('a')
  
  let arr = []

  for(let i = 0; i < elemento.length; i++){
    if(elemento[i].value == ''){
      
    }else{
      arr.push({
        'valor': elemento[i].value
      })
    }
  }
  console.log(arr)
}
<input type="text" class="a">
  <input type="text" class="a">
  <input type="text" class="a">
  
  <button id="enviar">Enviar</button>

  • I’m going to do some tests here this way and give a feedback here. Grateful!

  • And how could I differentiate the information that is in the array (arr) ? Type, of which line is each information.

  • Voce would use this infomation for what?

  • I’ll use it to update a database table. The first column of the datatable is an id, if I could differentiate by that id at least, it would already serve.

  • I couldn’t understand it very well, but you could run that ID through the button that clicks, couldn’t you? if each has a button, you can assign an attr to that button and recover that id to update

  • Buttons exist in all lines, also were created dynamically, so they have no id or name and such, even so I would have to do that you said?

  • Yes, would have yes, tell me one thing, each line is a correct ID? or not?

  • Yes, in each row there is an id, in the first column of the datatable.

  • So, what code do you use to add the button? , could you edit your question by adding it?

Show 4 more comments

Browser other questions tagged javascript jquery html5 json

You are not signed in. Login or sign up in order to post.