Table in loop select only td where checkbox is selected

Question

I am trying to make it so that when a user selects a checkbox then hits a button (not shown in the code below) that they will be redirected to a new page with certain details inside it. I need to get the asset.id value out for this. My issue is that I am not sure where to start for getting just those values out and making them work with a submit button.

HTML

<thead>
  <tr>
    <th>Select</th>
    <th>Model</th>
    <th>Asset Number</th>
    <th>Warranty</th>
    <th>Notes</th>
    <th>Actions</th>
 </tr>
</thead>
<tbody>

   {%  for asset in assets  %}
      <tr>
       <td><input type="checkbox"/></td>
       <td>{{asset.model}}</td>
       {% if loop.first %}<td class="tour-step tour-step-sixteen"><a href="/dashboard/it/asset/{{asset.id}}">{{ prefix }}{{asset.assetNumber}}</a></td>
       {% else %}
       <td><a href="/dashboard/it/asset/{{asset.id}}">{{ prefix }}{{asset.assetNumber}}</a></td>
       {% endif %}
        <td>{{asset.warranty | date("y-m-d")}}</td>
        <td>{{asset.notes}}</td>
        <td>
           <form id="label-form" action="/dashboard/it/label/print" method="POST">
            <button type="submit" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
           </form>
         </td>
      </tr>
    {% endfor %}

 </tbody>

I have no JS yet because I am not sure how I would even start getting the values I need and how to save/ pass them onto my POST route. Even guidance would be great.

I have spent 3.5 hours now looking online but no solution I have found seems complete they all lack something or are for single values not multiple like I need to have.

i think this will help : [link](https://stackoverflow.com/questions/14827583/retrieve-all-checkbox-checked-in-the-table-when-submitting-form) - [link2](https://stackoverflow.com/questions/40681581/how-to-get-checked-checkbox-table-value-in-jquery) — Mohamed Sa'ed, Jan 22 '18 at 14:51

score 1 · Accepted Answer · answered Jan 22 '18 at 15:17

You can loop your table tr and get those ids that has a checkbox checked.

When submitting the form, you can call the function, get the array y post that array int the server.

This is just a simple example, now you can play with the code as you want

getSelected = function(){
  var array = [];
  $('#my_table tbody tr').each(function(index, object){
    if($(this).find('input[type="checkbox"]').prop("checked"))
      array.push($(this).find('.id').html());
  });
  console.log(array);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my_table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Value</th>
        <th></th>
      </tr>
    </thead>
  <tbody>
   <tr>
    <td class="id">1</td>
    <td>Hola</td>
    <td><input type="checkbox"></td>
   </tr>
   <tr>
    <td class="id">2</td>
    <td>Como</td>
    <td><input type="checkbox"></td>
   </tr>
   <tr>
    <td class="id">3</td>
    <td>Stas</td>
    <td><input type="checkbox"></td>
   </tr>
  </tbody>
 </table>
  <button onclick="getSelected()"> Get Selected </button>

I tried adding exactly your code and it is not working. I have the HTML then the JS in a script tag at the top of the page. I also tried it at the bottom of the page. It is telling me that the function is not defined in the Chrome console . — Kirbytech, Jan 22 '18 at 15:30
I got it working sorta, how can I change it so instead of innerhtml it gives me the names of the inputs? — Kirbytech, Jan 22 '18 at 15:36
I dont know what type of input you are using, but usually you get the input values using `.value` property in javascript and `.val()` in jquery. — Luis felipe De jesus Munoz, Jan 22 '18 at 17:37

Table in loop select only td where checkbox is selected

1 Answers1