How can use ajax-jquery to get selected checkbox data to modal using PHP-CodeIgniter

Question

how to use an HTML table with the checkbox in all rows and when clicking on a button I want to get those selected checkbox IDs to a modal. so I want to use ajax for getting related data of selected IDs from the database and show in a table in modal using PHP-CodeIgniter. anybody could help me to get this?

I have tried with a lot of ways but all were a failure.

Thanks a lot in advance.

Please see my code.

On my VIEW page table

<table id="dynamic-table">
        <thead>
            <th> Check</th>
            <th> Name</th>
            <th> Country</th>
        </thead>
        <tbody>
            <tr>
                <td> <input type="checkbox" name="ch1" value="1"> </td>
                <td> Rashid </td>
                <td> India </td>
            </tr>
            <tr>
                <td> <input type="checkbox" name="ch1" value="2"> </td>
                <td> Nishad </td>
                <td> India </td>
            </tr>
            <tr>
                <td> <input type="checkbox" name="ch1" value="3"> </td>
                <td> sajeesh </td>
                <td> India </td>
            </tr>
        </tbody>

    </table>

    <button name="submit" id="subm"> Submit </button>
    <button name="cancel" id="canc"> Cancel </button>


    <div id="message"></div>

Scrip on VIEW Page:

<script>
    $(document).ready(function(){
        $("#subm").click(function(){
            getValueUsingParentTag();
        });
    });
    function getValueUsingParentTag(){
var chkArray = [];

/* look for all checkboes that have a parent id called 'checkboxlist' attached to it and check if it was checked */
$("#dynamic-table input:checked").each(function() {
    chkArray.push($(this).val());
});

/* we join the array separated by the comma */
var selected;
selected = chkArray.join(',') ;




var url = "<?php echo base_url(); ?>/index.php/Ajax";
    $.post( url, { test_input: selected } ) 

         .done(function(data){
            $("#message").html(data.result);
        });





/* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
if(selected.length > 0){
    alert("You have select" + selected);    
}else{
    alert("Please at least check one of the checkbox"); 
}

}

My AJAX Controller

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Ajax extends CI_Controller {

public function index()
{
    $posted = $this->input->post('test_input');
    echo json_encode(array('result'=> $posted));        

}

}

Please suggest me the edits or a good one. Actually, I want to retrieve data from DB. But in this code first, I just tried to work with ajax without db. once this got success then I can go ahead with DB data retrieve.

Answer 1

try this way store the value of id in the value attribute of checkbox. then add the class 'checkAll' to the checkbox presents in the header of your table. and add class 'my-checkbox' to each row's checkbox then following method will select/deselct all checkboxes at same time. write another function which will loop trough each checkboxex with class my-checkbox and store the the value of checkbox in the array then retur the array. Hope this helps....

// Select / Deselect all checkboxes
$(".checkAll").click(function () {
    $('input:checkbox').not(this).prop('checked', this.checked);
    console.log(getCheckedValues());
});

function getCheckedValues(){
    var checkboxes = document.getElementsByClassName('my-checkbox');
    var checkboxesChecked = [];
    // loop over them all
    for (var i=0; i < checkboxes.length; i++) {
      // And stick the value of checked ones onto an array...
      if (checkboxes[i].checked) {
        checkboxesChecked.push(checkboxes[i].value);
      }
    }
    // Return the array if it is non-empty, or null
    return checkboxesChecked.length > 0 ? checkboxesChecked : null;
  }

;