Ajax call on checking a checkbox

Question

I am having a two checkboxes.Now on click of one of the checkbox I want to make an ajax call to a jsp page.That jsp page is to show a table that contains datat being fetched from database.

Now,The problem is say i have two checkboxes like :

<div class="search-inputs">

        <input class="searchName" type="text" placeholder="Search Here.."></input>

        <input class="searchType1" type="checkbox" name="emailNotification"><label class="searchtype1label">Email Notification</label></input>
        <input class="searchType2" type="checkbox" name="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>


        <input class="searchDateFrom" type="text" placeholder="Search From"></input>
        <input class="searchDateTo" type="text" placeholder="Search To"></input>
        <input class="Datesubmit" type="button" value="Search"></input>
        <div id="container"></div>

How to do it ?Please help

My Script part : 

$(document).ready(function () {

            $('.search-select').on('change', function(){
            $('.search-inputs').children().hide();
            var classn =$(this).find(":selected").val();
            //alert(classn);
            if(classn=='searchName')
                {
                    //alert("searchname");
                    $('.'+"searchName").show();
                }
                else if(classn=='searchType')
                {
                    //alert("searchType");
                    $('.'+"searchType1").show();
                    $('.'+"searchtype1label").show();
                    $('.'+"searchType2").show();
                    $('.'+"searchtype2label").show();
                }
                else if(classn=='searchDate'){
                    //alert("searchType");
                    $('.'+"searchDateFrom").show();
                    $('.'+"searchDateTo").show();
                    $('.'+"Datesubmit").show();
                }

            });

            $('#emailNotification').on('change',function() {
            //var checked = $(this).is(':checked');
            if(this.checked){

            //alert("in");
            $.ajax({
                type: "POST",
                url: "searchOnType.jsp",
                data: {mydata: "emailNotification"},
                success: function(data) {
                    alert('it worked');
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });

      });

But how to show the table on the same page ?

Answer 1

you have to change your html slightly with this--

give same class name to both check boxes.

<input class="searchType" type="checkbox" name="emailNotification" id="emailNotification"><label class="searchtype1label">Email Notification</label></input>
 <input class="searchType" type="checkbox" name="SharingNotification" id="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>

Now slightly change in jquery part--

$('.searchType').click(function() {
    alert($(this).attr('id'));  //-->this will alert id of checked checkbox.
       if(this.checked){
            $.ajax({
                type: "POST",
                url: 'searchOnType.jsp',
                data: $(this).attr('id'), //--> send id of checked checkbox on other page
                success: function(data) {
                    alert('it worked');
                    alert(data);
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });

Answer 2

you have to use change event for this like below:

Html:

<input class="searchType1" type="checkbox" name="emailNotification"><label class="searchtype1label">Email Notification</label></input>
<input class="searchType2" type="checkbox" name="SharingNotification"><label class="searchtype2label">File Sharing Notification</label></input>

<div id="container">
</div>

JQuery:

$('#emailNotification').on('change',function() {

            if(this.checked){

            $.ajax({
                type: "POST",
                url: "searchOnType.jsp",
                data: {mydata:"emailNotification"},
                success: function(data) {
                    alert('it worked');
                    $('#container').html(data);
                },
                 error: function() {
                    alert('it broke');
                },
                complete: function() {
                    alert('it completed');
                }
            });

            }
      });