Jquery get checked select boxes from dropdown on click event

Question

I am a bit new to jquery so sorry for asking.

I am using datatables and I created a bootstrap dropdown with the folowing code.

          { 'data': null, title: '', wrap: true, "render": function (item) { return '<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="glyphicon glyphicon-cog"></i><span class="caret"></span></button><ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1"><li role="presentation" class="dropdown-header">Detectives</li><input type="text" class="form-control" id="exampleInputPassword1" placeholder="Accountname"><li ><label><input type="checkbox" class="usa"> United States</label></li><li ><label><input type="checkbox" class="netherlands"> Netherlands</label></li><li ><label><input type="checkbox" class="Italy"> Italy</label></li><li ><label><input type="checkbox" class="china"> China</label></li><li ><label><input type="checkbox" class="gb"> Great Britain</label></li><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" class="searchtarget" href="#">Search</a></li></ul></div>' } },

What I want is to get the checked boxes when the user clicks the class="searchtarget" href="#">Search</a> link and post it to a php file. I am trying to get the checked property and testing the post in the folowing script. But the post is 0 even when checked.

<script>
$("#accountTable").on("change", "input[type='checkbox']",".checkbox-menu", function() {
   $(this).closest("li").toggleClass("active", this.checked);
});

$("#accountTable").on('click', '.allow-focus', function (e) {
  e.stopPropagation();
});
</script>



<script>
    $(document).ready(function () {
        $("#accountTable").on("click", ".searchtarget", function () { // notice the on function

            
            var SearchUSA = $(this).closest("li","input[type='checkbox']", ".usa").is(':checked') ? 1 : 0;
            var SearchNL = $(this).closest("li","input[type='checkbox']", ".netherlands").is(':checked') ? 1 : 0;
            var SearchItaly = $(this).closest("li","input[type='checkbox']", ".italy").is(':checked') ? 1 : 0;
            var SearchChina = $(this).closest("li","input[type='checkbox']", ".china").is(':checked') ? 1 : 0;
            var SearchGB = $(this).closest("li","input[type='checkbox']", ".gb").is(':checked') ? 1 : 0;


            $.ajax({
                type: "POST",
                url: "testchecked.php",
                data: {
                    USA: SearchUSA,
                    NL: SearchNL,
                    Italy: SearchItaly,
                    China: SearchChina,
                    GB: SearchGB
                },

            });
            return true;
        });

    });
</script>

This is the post result when all is checked. It should all be 1. our when a user only selects a few only those need to be 1.

USA: 0
NL: 0
Italy: 0
China: 0
GB: 0

What am I doing wrong?

EDIT: Tried the answer of Kinglish. But get a error. Uncaught ReferenceError: selected is not defined I dont get it, it says selected is not defined. When I use data: {selected: data}, }); it is but then I get the folowing result in my post. Is this right?

selected[selected][]: netherlands
selected[selected][]: Italy

<script>
    $(document).ready(function () {
        $("#accountTable").on("click", ".searchtarget", function () { // notice the on function
            $(this).closest('ul').find('input[type=checkbox]:checked')
     .map(function() { return this.value; }).get();
           
     let data = {
      selected: $(this).closest('ul').find('input[type=checkbox]:checked').map(function() {
        return this.value;
          
      }).get()
      
    }
  
    $.ajax({ type: "POST", url: "testchecked.php", data: {selected: selected}, }); return true; });

    });
</script>

EDIT 2

Trying to get the typed value from the input box together with the selected boxes when the user uses the search link. But it wont show up.. What is wrong, can anyone explaing ?

 $(this).closest('ul').find('input[type=text]').map(function() { return this.val; }).get();     
     let dataname = {
        findtarget: $(this).closest('ul').find('input[type=text]').map(function() {
        return this.val;   
      }).get()
      
    }
var findtarget =  $(this).closest('ul').find('input[type=text]').val();
    $.ajax({ type: "POST", url: "testchecked.php", data: data,dataname,findtarget:findtarget }); return true; });

Anyone that can help? :(

Martin4523
– Martin4523

2021-12-23 23:31:00 +00:00
Commented Dec 23, 2021 at 23:31 — Martin4523
– Martin4523, Commented Dec 23, 2021 at 23:31

Kinglish · Accepted Answer · 2021-12-23 23:51:05Z

1

Here's a simplification. Just gather the checked values and send that off to the PHP. You can take that array and use it for the search. This line loop through the relevant checkboxes to get the values of the checked ones

$(this).closest('ul').find('input[type=checkbox]:checked')
     .map(function() { return this.value; }).get();

$(document).ready(function() {
  $("#accountTable").on("click", ".searchtarget", function() {
    let data = {
      selected: $(this).closest('ul').find('input[type=checkbox]:checked').map(function() {
        return this.value;
      }).get()
    }
    console.log(data)
  })
})

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<table id='accountTable'>
  <tr>
    <td>
      <div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Choose <i class="glyphicon glyphicon-cog"></i><span class="caret"></span></button>
        <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">
          <li><label><input type="checkbox" value="usa"> United States</label></li>
          <li><label><input type="checkbox" value="netherlands"> Netherlands</label></li>
          <li><label><input type="checkbox" value="italy"> Italy</label></li>
          <li><label><input type="checkbox" value="china"> China</label></li>
          <li><label><input type="checkbox" value="gb"> Great Britain</label></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" class="searchtarget" href="#">Search</a></li>
        </ul>
      </div>
    </td>
  </tr>
</table>

edited Dec 23, 2021 at 23:51

answered Dec 23, 2021 at 23:34

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

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

12 Comments

Martin4523 Over a year ago

Thank you for your answer! No there is no special reason to use classes. I just dont know how to do this otherwise, as stated I am new. All I need are the checked propertys from the dropdown checkbos values and post them to a PHP. If there is a better solution to do this please tell !

Martin4523 Over a year ago

Besides my above comment, how do I use these found values in my post script? I dont know how to implent that array to a post to have all them values post.

Kinglish Over a year ago

OK. I updated my answer and put values in your checkboxes. I would say just send that array of selected values off to PHP and let the PHP do what it will with it.

Kinglish Over a year ago

in PHP you would recieve the POST in my answer as $_POST['selected'] - which would come through as an array of selected countries.

Kinglish Over a year ago

I only show how to get the values here. Obviously, you will need to integrate this into your code and ajax functions

|

Collectives™ on Stack Overflow

Jquery get checked select boxes from dropdown on click event

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related