title: Ajax call on checking a checkbox
body: <p>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.</p>
  
  <p>Now,The problem is say i have two checkboxes like : </p>
  
  <pre><code>&lt;div class="search-inputs"&gt;
  
          &lt;input class="searchName" type="text" placeholder="Search Here.."&gt;&lt;/input&gt;
  
          &lt;input class="searchType1" type="checkbox" name="emailNotification"&gt;&lt;label class="searchtype1label"&gt;Email Notification&lt;/label&gt;&lt;/input&gt;
          &lt;input class="searchType2" type="checkbox" name="SharingNotification"&gt;&lt;label class="searchtype2label"&gt;File Sharing Notification&lt;/label&gt;&lt;/input&gt;
  
  
          &lt;input class="searchDateFrom" type="text" placeholder="Search From"&gt;&lt;/input&gt;
          &lt;input class="searchDateTo" type="text" placeholder="Search To"&gt;&lt;/input&gt;
          &lt;input class="Datesubmit" type="button" value="Search"&gt;&lt;/input&gt;
          &lt;div id="container"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>How to do it ?Please help</p>
  
  <pre><code>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');
                  }
              });
  
              }
        });
  
        });
  </code></pre>
  
  <p>But how to show the table on the same page ?</p>