Get the values of a hidden input from a Javascript table

Question

Get the values of a hidden input from a Javascript table

Navigation

#1 by (1 votes)

1

We suppose that I have a table like the following:

<table id="parameters" width="100%" border="1">
  <thead>
    <tr>
      <th>Fecha</th>
      <th>Cedula</th>
      <th>Nombre Empleado</th>
      <th>Cantidad</th>
      <th>Concepto</th>
      <th>Seleccionar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2016-08-10<input type="hidden" name="fecha[]" value="2016-08-10"></td>
      <td>12345678<input type="hidden" name="identity[]" value="12345678"></td>
      <td>Pepito Perez</td>
      <td>2.5<input type="hidden" name="value[]" value="2.5"></td>
      <td>Hora diurna<input type="hidden" name="concept[]" value="1"></td>
      <td><input type="checkbox" name="check[]" value="12345678"></td>
    </tr>
    <tr>
      <td>2016-08-10<input type="hidden" name="fecha[]" value="2016-08-10"></td>
      <td>24681012<input type="hidden" name="identity[]" value="24681012"></td>
      <td>Camilo Sanchez</td>
      <td>2.5<input type="hidden" name="value[]" value="2.5"></td>
      <td>Hora diurna<input type="hidden" name="concept[]" value="1"></td>
      <td><input type="checkbox" name="check[]" value="24681012"></td>
    </tr>
    <tr>
      <td>2016-08-10<input type="hidden" name="fecha[]" value="2016-08-10"></td>
      <td>369121518<input type="hidden" name="identity[]" value="369121518"></td>
      <td>Pepito Perez</td>
      <td>2.5<input type="hidden" name="value[]" value="2.5"></td>
      <td>Hora diurna<input type="hidden" name="concept[]" value="1"></td>
      <td><input type="checkbox" name="check" value="369121518"></td>
    </tr>
  </tbody>
  </table>

This table is generated according to a query, the id of the checkbox is the identity value of each employee.

I want to get the value of the input hidden only from the checkboxes marked in an array and then send that data by ajax and then save it in the database, use the following to save the data in an object but not save it well :

//Aquí al dar click en el boton confirmar busca en la tabla los que estan marcados
confirm.on('click', function(){
//Guardo en result los inputs con el checkbox marcado
      $("#parameters tbody tr td input[name=checks]:checked").each(function(){
        var result = [];
        $(this).closest('tr').find('input[type="hidden"]').each(function(){
          result.push($(this).serializeArray());
        });

//envio el objeto por ajax
        $.ajax({
          type: "POST",
          url:  getBaseUri()+'/payroll/createAll/',
          data: {datas: result},
          cache: false,
          success: function (response) {
            var table = tableConfirm;
            var url = table.data('source');
            clearFom();
            table.dataTable().fnReloadAjax(url);
          },
          error: function (response) {
            console.log(response);
          }
        });
      });

I would like to know what I am doing wrong and if there is a better way to send the data by ajax in order to save it in the database

javascript php

asked by Fabian Sierra 10.08.2016 в 22:43

source

1 answer

Error instantiating object in java Error consuming service

score 1 · Accepted Answer

There is a problem in the checkboxes selector:

$("#parameters tbody tr td input[name=checks]:checked")

If you notice, you are selecting the inputs whose name is "checks", but there is none that has that name. The checkboxes have the name "check []". A quick solution would be to change that selector so that it chooses "checkbox" type input (there is only one per row):

$("#parameters tbody tr td input[type=checkbox]:checked")

Changing that, it works without problems:

//Aquí al dar click en el boton confirmar busca en la tabla los que estan marcados
$("#confirm").on('click', function(){

  //Guardo en result los inputs con el checkbox marcado
  $("#parameters tbody tr td input[type=checkbox]:checked").each(function(){
    var result = [];
    $(this).closest('tr').find('input[type="hidden"]').each(function(){
      result.push($(this).serializeArray());
    });

    console.log(result);

    //envio el objeto por ajax

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form>
  <table id="parameters" width="100%" border="1">
    <thead>
      <tr>
        <th>Fecha</th>
        <th>Cedula</th>
        <th>Nombre Empleado</th>
        <th>Cantidad</th>
        <th>Concepto</th>
        <th>Seleccionar</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2016-08-10<input type="hidden" name="fecha[]" value="2016-08-10"></td>
        <td>12345678<input type="hidden" name="identity[]" value="12345678"></td>
        <td>Pepito Perez</td>
        <td>2.5<input type="hidden" name="value[]" value="2.5"></td>
        <td>Hora diurna<input type="hidden" name="concept[]" value="1"></td>
        <td><input type="checkbox" name="check[]" value="12345678"></td>
      </tr>
      <tr>
        <td>2016-08-10<input type="hidden" name="fecha[]" value="2016-08-10"></td>
        <td>24681012<input type="hidden" name="identity[]" value="24681012"></td>
        <td>Camilo Sanchez</td>
        <td>2.5<input type="hidden" name="value[]" value="2.5"></td>
        <td>Hora diurna<input type="hidden" name="concept[]" value="1"></td>
        <td><input type="checkbox" name="check[]" value="24681012"></td>
      </tr>
      <tr>
        <td>2016-08-10<input type="hidden" name="fecha[]" value="2016-08-10"></td>
        <td>369121518<input type="hidden" name="identity[]" value="369121518"></td>
        <td>Pepito Perez</td>
        <td>2.5<input type="hidden" name="value[]" value="2.5"></td>
        <td>Hora diurna<input type="hidden" name="concept[]" value="1"></td>
        <td><input type="checkbox" name="check" value="369121518"></td>
      </tr>
    </tbody>
  </table>
  <button type="button" id="confirm">Confirmar</button>
</form>