Get All checkbox value selected , Table row wise using AJAX : DJANGO

Question

I have code which should select all rows from a table whose checkbox is selected. So first i will describe my table structure.

So here there will be many rows, so i should select which server i need and which operation i should perform. So if i have two server ABC and BCD, if i want to perform start operation for ABC and Stop for ABC, i should select respective servers from first checkbox and associated operations from the checkbox on same row as the server name. and i should pass all values row wise to views.py for performing other operations.

so currently I wrote a code, which give me the value even if i didn't checked the checkbox. And am not able to figure out issue. Can any anyone help me.

this is my AJAX call:

 $("[name=ButtonSubmit]").click(function(){
                            var myarrayServer = [];
                            var myarrayStart = [];
                            var myarrayRestart = [];
                            var myarrayStop =[];
                            var message = " ";
                            $(".form-check-input0:checked").each(function() {
                                var row = $(this).closest("tr")[0];
                                message += row.cells[1].innerHTML;
                                message += "   " + row.cells[2].innerHTML;
                                message += "   " + row.cells[3].innerHTML;
                                message += "   " + row.cells[4].innerHTML;
                                var checkedValue = $('#flexSwitchCheckDefaultStart:checked').val();
                                message += "   "+checkedValue;
                                var checkedValue2 = $('#flexSwitchCheckDefaultRestart:checked').val();
                                message += "   "+checkedValue2;

                                // if (row.cells[5].children()[0].is(':checked')) {   
                                //   message += "   " + row.cells[5].children[0].value;
                                // }
                                message += "\n";
                                alert(message);
                                
                     
                             
                            
                             var formdataD = new FormData();
                             formdataD.append('myarrayServer', message);
                           
                             $.ajax({
                                 url: "secondtableonDashboard", //replace with you url
                                 method: 'POST',
                                 data: formdataD,
                                 datatype:'json',
                                 processData: false,
                                 contentType: false,
                                 success: function(data) {
                                  //  alert("message: " + data.message);
                                 },
                                 error: function(error) {
                                  //  alert('error..'+error);


                                 }
                           });
                          });
                       });

and here is HTML:

<tbody id="myTable">
                                               {% for item in objs %}
                                              <tr>
                                                  <td>
                                                    <div class="form-check form-switch">
                                                      
                                                            <input class="form-check-input0" name="Services1" value="{{item.Component}}" type="checkbox" id="flexSwitchCheckDefault">
                                                            <label class="form-check-label0" for="flexSwitchCheckDefault">

                                                    </div>
                                                  </td>
                                                  <td>{{item.ServerName}}</td>
                                                  <td>{{item.Component}}</td>
                                                  <td>{{item.PID}}</td>
                                                  <td>
                                                    {{item.State}}</td>
                                                  <td id="hideInnerHTML">
                                                      <input class="form-check-input1" name="Start" value="START" type="checkbox" id="flexSwitchCheckDefaultStart">
                                                      <!-- <label class="form-check-label1 services" for="flexSwitchCheckDefault"> -->
                                                        Start
                                                  </td>
                                                  <td id="hideInnerHTML">
                                                      <input class="form-check-input2" name="Restart" value="RESTART" type="checkbox" id="flexSwitchCheckDefaultRestart">
                                                      <!-- <label class="form-check-label2 services" for="flexSwitchCheckDefault"> -->
                                                </td>
                                                  <td id="hideInnerHTML">
                                                      <input class="form-check-input3" name="Stop" value="STOP" type="checkbox" id="flexSwitchCheckDefault">
                                                      <!-- <label class="form-check-labe3l services" for="flexSwitchCheckDefault"> -->
                                                </td>
                                                  </tr>
                                                {% endfor %}
                                                </form>
                                                  </tbody>

Answer 1

First of all in your code you have use mutliple ids with same name so just remove that or just use class .Then, whenever your ButtonSubmit is clicked first get the servername and push its value in inner array. Now, to get other checkboxes values in same row you can use .closest("tr").find("input[type=checkbox]:checked:not(:first)") and push checked checkboxes value inside inner array and finally put this inner array values to outer arrays and pass same to ajax.

Demo Code :

 $("[name=ButtonSubmit]").click(function() { console.clear() var myarrayServer = []; $(".form-check-input0:checked").each(function() { var opeartions = [] //for inner array var row = $(this).closest("tr"); //get servername var server_name = row.find("td:eq(1)").text().trim(); opeartions.push(server_name) //push in array //get checkboxes which is checked in same row row.find("input[type=checkbox]:checked:not(:first)").each(function() { opeartions.push($(this).val()) }) myarrayServer.push(opeartions) //push values in main array }); console.log(myarrayServer); var formdataD = new FormData(); formdataD.append('myarrayServer', myarrayServer); //here ajax call });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1"> <thead> <th></th> <th>Servername</th> <th>Component</th> <th>PID</th> <th>State</th> <th>Start</th> <th>Restart</th> <th>Stop</th> </thead> <tbody id="myTable"> <tr> <td> <div class="form-check form-switch"> <input class="form-check-input0" name="Services1" value="A" type="checkbox" id="flexSwitchCheckDefault"> <label class="form-check-label0" for="flexSwitchCheckDefault"></label> </div> </td> <td>A</td> <td>Somethings</td> <td>1</td> <td> Running</td> <td> <input class="form-check-input1" name="Start" value="START" type="checkbox"> </td> <td> <input class="form-check-input2" name="Restart" value="RESTART" type="checkbox"> </td> <td> <input class="form-check-input3" name="Stop" value="STOP" type="checkbox"> </td> </tr> <tr> <td> <div class="form-check form-switch"> <input class="form-check-input0" name="Services1" value="A" type="checkbox"> <label class="form-check-label0" for="flexSwitchCheckDefault"></label> </div> </td> <td>B</td> <td>Somethings</td> <td>2</td> <td> Running</td> <td> <input class="form-check-input1" name="Start" value="START" type="checkbox"> </td> <td> <input class="form-check-input2" name="Restart" value="RESTART" type="checkbox"> </td> <td> <input class="form-check-input3" name="Stop" value="STOP" type="checkbox"> </td> </tr> </form> </tbody> </table> <button name="ButtonSubmit">Send</button>