Datatables and retrieve a value of input field from footer

Question

I've a problem with Datatables and probably cached variables. I need to retrieve, on submit, #peso_totale_componenti to check it's validity.

Correct value in example is 15.4 like it's input value.

I've inserted an alert to check this input but I get 6.6 (which is value of the first row.)

  var peso_totale_componenti = $("#peso_totale_componenti").val();
  alert(peso_totale_componenti);

I don't know why. But if I change tab-panel or resize window and i click the submit, this time the value in alert is correct (15.4) .

It seems to be a problem with cache value of datatables?

UPDATE: ID is unique. I get the sum with a drawcallback in Datatables:

drawCallback: function () {
      var api = this.api();
      var index = 3; //colonna pesi
      $( api.column(index).footer() ).html( "<input type='hidden' id='peso_totale_componenti' value='" + api.column(index).data().sum() + "'>" + api.column(index).data().sum() ); //peso totale
    },

UPDATE 2: Solved using:

    table.rows().invalidate('dom').draw(false);

after every insert/remove of row.

Answer 1

This is because you've used the same ID value twice. ID's should be unique to one element.

Use classes to target multiple elements that need the same styles/js applied then use ID's to target specific elements.

Answer 2

You can try to increase the specificity number of the selector by using the following selector;

var peso_totale_componenti = $("table tfoot tr th input#peso_totale_componenti").val();
alert(peso_totale_componenti);

Other elements may have the same id in the dom