CODEWITHSUNDEEP
javascriptphpjqueryajax
shibbir ahmed
shibbir ahmed

Reputation: 1024

How to get selected data using onChange event using jQuery Data table?

I am working on jQuery Data table to load few data from mysql database.

Here is the html code : 

<table id="employee-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
    <thead>
        <tr>
            <th>#</th>
            <th>User Id</th>
            <th>Address</th>
            <th>Package Name</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
</table>

jQuery code for jQuery Data Table and My Ajax Request : 

$(document).ready(function() {

    var dataTable = $('#employee-grid').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax":{
            url :"server_processing.php", // json datasource
            type: "post",  // method  , by default get
            error: function(){  // error handling
                $(".employee-grid-error").html("");
                $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                $("#employee-grid_processing").css("display","none");

            }
        }
    } );

    $("#employee-grid").on('change', function() {
        var status = $('.changeStatus').val();
        alert(status);
        $.ajax({
            url : "<?php echo SITE_URL . 'toplevel/update-data'; ?>",
            data : {
                'statusChange' : status
            }, 
            type : 'POST',
        });
    });

});

but When I select the option then every time it's passing first option value

For e.g. This selected option tag has these value : 

<option value='1|11' $statusMsg1>Active</option>
<option value='2|11' $statusMsg2>Blocked</option>

It's always passing 1|11 value !! It's should be pass my selected option value. I don't understand why it's happening :(

Upvotes: 0

Views: 2010

Answers (1)

GROVER.
GROVER.

Reputation: 4388

Change this:

$(".changeStatus").on("change", function(){
    var status = $('.changeStatus').val();
    alert(status);

    // e.t.c...
});

To this: 

$(".changeStatus option").change(function(){
    var status = $(this).val();

    $.ajax({
        url: "<?= SITE_URL . 'toplevel/update-data'; ?>",
        method: "POST",
        data: { statusChange : status }, 
        success: function(data){
            alert(status);
        }
    });
});

Hope it helps!

Upvotes: 1

Related Questions