Submit Multiple Selected Rows Jquery Datatables

Question

I am new to jquery. I am working in Laravel 5.3. I am loading jquery and datatables min.css and min.js through my master blade template. I am consuming an API to get a list of livestock that belongs to a member and outputting with jquery datatables. Each row is selectable so the user can select which animals they want to enter into a show. The datatable is paginated and I can select animals on each page. However, when I click Enter Show, all animals on the currently displayed page get submitted rather than only those selected, regardless of page, however, the number of animals selected is displayed correctly in the alert. What can I do to fix this so only the selected rows are submitted?

My code:

                    <form action="/entershowoptions" method="POST" id="entriesSelected">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" name="show_id" value="{{ $show_id }}">
                    <input type="hidden" name="memberId" value="{{ $memberId }}">
                    <table id="goatTable" class="display" cellspacing="0" width="100%">
                        <thead>
                            <th>Reg #</th>
                            <th>Name</th>
                            <th>DOB</th>
                            <th>Sex</th>
                        </thead>
                        <tbody>
                        @foreach($mygoatsarray as $mygoat)
                            @if($buckDivisionCount < 1 && $mygoat->GOAT_SEX == 'BUCK') 
                                @continue
                            @elseif($doeDivisionCount < 1 && $mygoat->GOAT_SEX == 'DOE')
                                @continue
                            @else
                            <tr>
                                <td>{{ $mygoat->OLD_REG_NUM }}
                                <input type="hidden" name="entry_reg_num[]" value="{{ $mygoat->OLD_REG_NUM }}"></td>
                                <td>{{ $mygoat->GOAT_NAME }}
                                <input type="hidden" name="entry_reg_name[]" value="{{ $mygoat->GOAT_NAME }}"></td>
                                <td>{{ $mygoat->DATE_OF_BIRTH }}
                                <input type="hidden" name="entry_dob[]" value="{{ $mygoat->DATE_OF_BIRTH }}"></td>
                                <td>{{ $mygoat->GOAT_SEX }}
                                <input type="hidden" name="entry_sex[]" value="{{  $mygoat->GOAT_SEX }}"></td>
                            </tr>
                            @endif
                        @endforeach
                        </tbody>
                    </table>
                    <br><br>
                    <button id="submit">Enter Goats</button>
                    <br><br>
                    </form>
                </center>
                <br><br>
                </div>
                <script type="text/javascript">
                    $(document).ready(function() {
                        var table = $('#goatTable').DataTable();

                        $('#goatTable tbody').on( 'click', 'tr', function () {
                            $(this).toggleClass('selected');
                        } );

                        $('#submit').click( function () {
                            alert( table.rows('.selected').data().length +' row(s) selected' );

                            $.ajax({
                               type: "POST",
                               url: "/entershowoptions",
                               data: {'form': $("#entriesSelected").table.rows('.selected').serialize()}
                            });

                        });
                    } );
                </script>

Livestock show entry app. I scrapped my project and started from scratch and am actually taking some Laravel training now (which I'm learning I've been doing things in an ancient manner that negates the purpose of using a framework) and Jquery training next through udemy. Once I get back to this piece, I'll post some updates. — Crazy_Redneck
– Crazy_Redneck, Commented Dec 4, 2016 at 5:11

jeremykenedy · Accepted Answer · 2016-11-10 18:38:32Z

Add a call to preventDefault() on the event (1st argument of the event callback) to prevent the form from submitting and then it will run the .ajax() submit. Try this in the example below:

Edit:

Instead of using $("#entriesSelected").table.rows('.selected').serialize(), use serialize() on an array of the inputs in the selected rows using a basic selector - i.e. $('.selected input').serialize().

$(document).ready(function() {
  var table = $('#goatTable').DataTable();

  $('#goatTable tbody').on( 'click', 'tr', function () {
      $(this).toggleClass('selected');
  } );

  $('#submit').click( function (e) {
    e.preventDefault();
    var selectedRowInputs = $('.selected input');

    //use the serialized version of selectedRowInputs as the data
    //to be sent to the AJAX request

    console.log('serlialized inputs: ',selectedRowInputs.serialize());
    /*
      $.ajax({
        type: "POST",
        url: "/entershowoptions",
        data: selectedRowInputs.serialize()
      });
    */
  });
});

<link href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<form action="/entershowoptions" method="POST" id="entriesSelected">
  <input type="hidden" name="_token" value="23523">
  <input type="hidden" name="show_id" value="533">
  <input type="hidden" name="memberId" value="4567">
  <table id="goatTable" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Reg #</th>
        <th>Name</th>
        <th>DOB</th>
        <th>Sex</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1<input type="hidden" name="entry_reg_num[]" value="1"></td>
        <td>Dan<input type="hidden" name="entry_reg_name[]" value="Dan"></td>
        <td>01/03/2010<input type="hidden" name="entry_dob[]" value="01/03/2010"></td>
        <td>Male<input type="hidden" name="entry_sex[]" value="Male"></td>
      </tr>
      <tr>
        <td>2<input type="hidden" name="entry_reg_num[]" value="2"></td>
        <td>Elsa<input type="hidden" name="entry_reg_name[]" value="Elsa"></td>
        <td>02/03/2011<input type="hidden" name="entry_dob[]" value="02/03/2011"></td>
        <td>female<input type="hidden" name="entry_sex[]" value="female"></td>
      </tr>
      <tr>
        <td>3<input type="hidden" name="entry_reg_num[]" value="3"></td>
        <td>Fred<input type="hidden" name="entry_reg_name[]" value="Fred"></td>
        <td>03/03/2012<input type="hidden" name="entry_dob[]" value="03/03/2012"></td>
        <td>Male<input type="hidden" name="entry_sex[]" value="Male"></td>
      </tr>
    </tbody>
  </table>
  <button id="submit">Enter Goats</button>
</form>

Thank you for the response. Getting an error in the developer console of Chrome. It doesn't like something about the data: line under the ajax call: entershow:370 Uncaught TypeError: Cannot read property 'rows' of undefined Line 370: data: {'form': $("#entriesSelected").table.rows('.selected').serialize()}
I'm thinking this is related to the format of the data: property of the ajax call. Since it's being caught by the exception and not being submitted by default, it's not submitting anything, so it's unlikely anything would be in the log...it's never leaving the browser.
@Crazy_Redneck see developernator's updated answer, as well as this jsfiddle. Have you learned about using console.log() for debugging? it can be simple to work with compared to alert()...
I will be taking some Jquery training shortly and will return to this piece and provide an update.

Collectives™ on Stack Overflow

Submit Multiple Selected Rows Jquery Datatables

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related