Reverse or hide jQuery ajax for input checkbox results

Question

I don't have good knowledge about jquery, so I have a code working good but their problem, is to hide the result when uncheck the checkbox .( check to get the results from the database - uncheck hide these results )

catfd.php code

 <input type="checkbox" value="2" class="catcf"> catfd2 <br />
 <input type="checkbox" value="35" class="catcf"> catfd35 <br />
 <input type="checkbox" value="22" class="catcf"> catfd22 <br />
 <input type="checkbox" value="133" class="catcf"> catfd133 <br />
 <input type="checkbox" value="28" class="catcf"> catfd28 <br />
 <input type="checkbox" value="33" class="catcf"> catfd33 <br />
 <input type="checkbox" value="55" class="catcf"> catfd55 <br />
 <input type="checkbox" value="44" class="catcf"> catfd44 <br />
 <div class="main-area-courses-continer">
<!-- here will echo the results -->

</div>

jquery ajax code get the result from PHP page 'getvalue.php'


if(isset($_POST['catcf'])){
?>
<div class="main-area-courses-continer" >
<?php
    $catcfid= $_POST['catcf'];
    $sql = 'SELECT * FROM tablename  where cat_id = '.$catcfid.' order by p_id asc';
    $catandproid = $wpdb->get_results($sql);
    foreach($catandproid as $key){
/////////////////////////////////Updates
?>
<div class="<?php echo $catcfid; ?>" >
<?php
        echo $key->title;
?>
</div><!-- End of Continer catcfid -->
<?php
////////////////////////////////////////////
    }
}
?>
</div>

and the is the ajax jquery code

$(document).ready(function() {
  $(".catcf").on('click', function() {
    if ($('input.catcf').is(':checked')) {
      var catcf = Number($(this).val());
      $.ajax({
        url: 'getvalue.php',
        type: 'post',
        data: {
          catcf: catcf
        },
        beforeSend: function() {
          $(".main-area-courses-continer").html("Looding....");
        },
        success: function(response) {
          // Setting little delay while displaying new content
          setTimeout(function() {
            // appending posts after last post with class="post"
            $(".main-area-courses-continer:last").after(response).show().fadeIn("slow");
            $(".main-area-courses-continer").html("");
          }, 2000);
        }
      });
    }
  });
});

Hi , can you show `main-area-courses-continer` div ? Also , for all checked post the content is loaded inside this div and you need to remove or hide only particular content from that div ? — Swati, Nov 28 '20 at 13:54
**Warning!** You are _wide open_ for [SQL injection](https://owasp.org/www-community/attacks/SQL_Injection) attacks! You should use parameterized [prepared statements](https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php) instead of using completely unescaped user data directly in your queries like that. _Never ever ever never_ trust user input. — M. Eriksson, Nov 28 '20 at 14:00
Swati , main-area-courses-continer is like coniner echo results of database inside, and i need only to hide the result of specific checkbox for each one — v2mpire 20202, Nov 28 '20 at 14:24
I see , how you differentiate between them any id or value ? — Swati, Nov 28 '20 at 14:41
If I understand correctly, your code currently displays the answer temporarily. But you want to manually hide the answer when a checkbox is unselected? Just add an else to your `if` block that sets the container’s html to empty. — Tim Morton, Nov 28 '20 at 15:21
I update 'getvalue.php' update the code to give each container result the checkbox id how now after unchecking the specific checkbox to hide or remove all result by jquery — v2mpire 20202, Nov 28 '20 at 16:34
I’m sorry, that didn’t help me understand. What I would do in your situation is 1) don’t send html as a response to the ajax request, use JSON. 2) Utilize the database row id to identify the inputs, ie, ``. Now you can target which ones to change — Tim Morton, Nov 28 '20 at 22:51
i get the reslt output (
title name

second name
) , now i wont hide all class 2 by uncheck the specific checkbox and have value of 2 .. i try that after else if ($('input.catcf').is(":not(:checked)")){ $( "."+Number($(this).val())).remove(); } work but not working good affter choses mulitply chose not working good becose not updated $( "."+Number($(this).val())) — v2mpire 20202, Nov 29 '20 at 03:45

score 1 · Accepted Answer · answered Nov 29 '20 at 13:48

You can check if the div with class="catcfid" exist in your DOM or not using $(".main-area-courses-continer > ." + catcf).length == 0 if the length is 0 means there is no such div then you can make ajax request to bring that from backend else just show that div using $("." + catcf).parent().show(); else if unchecked hide that div using $("." + catcf).parent().show(); .

Demo Code :

$(document).ready(function() {
  $(".catcf").on('click', function() {
    var catcf = Number($(this).val());
    if ($(this).is(':checked')) {
      //check if the div with class catcf is not there 
      if ($(".main-area-courses-continer >  ." + catcf).length == 0) {
        /*.ajax({
           url: 'getvalue.php',
           type: 'post',
           data: {
             catcf: catcf
           },
           beforeSend: function() {
             $(".main-area").html("Looding....");
           },
           success: function(response) {*/
        setTimeout(function() {
          //$(".main_container:last").after(response).show().fadeIn("slow");
          //dummy data append ..
          $(".main_container:last").after('<div class="main-area-ourses-continer"><div class="' + catcf + '">catfd' + catcf + ' data....</div> </div>')
          $(".main-area").html("")//empty loading ..
        }, 100);
        /*
        });*/

      } else {
        //show that class 
        $("." + catcf).parent().show();
      }
    } else {
      //hide that class means unchecked
      $("." + catcf).parent().hide()
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="2" class="catcf" checked> catfd2 <br />
<input type="checkbox" value="35" class="catcf"> catfd35 <br />
<input type="checkbox" value="22" class="catcf" checked> catfd22 <br />
<input type="checkbox" value="133" class="catcf"> catfd133 <br />
<input type="checkbox" value="28" class="catcf"> catfd28 <br />
<input type="checkbox" value="33" class="catcf"> catfd33 <br />
<input type="checkbox" value="55" class="catcf" checked> catfd55 <br />
<input type="checkbox" value="44" class="catcf"> catfd44 <br /> Datas :
<!--put this div for loading separtely-->
<div class="main-area"></div>

<div class="main_container">
  <div class="main-area-courses-continer">
    <div class="2">
      catfd2 data....
    </div>
  </div>
  <div class="main-area-courses-continer">
    <div class="22">
      catfd22 data....
    </div>
  </div>
  <div class="main-area-courses-continer">
    <div class="55">
      catfd55 data....
    </div>
  </div>
</div>

Question it can be if i checkbox one of that box.. then I want to select the second one .. it can be Refersh the .main_containe area and submit these two or their checkboxes together to php page and get the results from the sql query ? how can send multiplay checkboxes by jquery ajax — v2mpire 20202, Nov 29 '20 at 14:49
Hi, this [post](https://stackoverflow.com/questions/9493531/send-multiple-checkbox-data-to-php-via-jquery-ajax) will help to achieve same . — Swati, Nov 29 '20 at 14:55

score 0 · Answer 2 · answered Nov 29 '20 at 14:11

0

Just change the QUERY, and I think that's the issue

$sql = 'SELECT * FROM tablename  Where cat_id = '.$catcfid.' And status = '1' order by p_id ASC';

answered Nov 29 '20 at 14:11

Ashikul

51
5

Reverse or hide jQuery ajax for input checkbox results

2 Answers2

Linked