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.

Can you post some code on what you've attempted so far? This should help get others started on helping you out. — cyril
– cyril, Commented Oct 27, 2018 at 9:15

Ropali Munshi · Accepted Answer · 2018-10-27 08:19:06Z

2

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;
  }

;

answered Oct 27, 2018 at 8:19

Ropali Munshi

3,0365 gold badges27 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user9758928 Over a year ago

I Need this array to post and retrieve from DB using ajax.

Ropali Munshi Over a year ago

you can then send the array returned by getCheckedValues() method via ajax using jquery or plain javascript

user9758928 Over a year ago

when I am trying to connect with ajax it is not getting work. I have updated my question with a piece of code. could you kindly have a look at it?

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related