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>

Swati · Accepted Answer · 2021-04-02 13:22:58Z

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>

Hi swati , but i wanted it rowwise like each row should be a list , such that i will get something like [[Server1,Start/Stop],[Server2,Start/stop],...[ServerN,Start/Stop]]

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related