how to return an array through ajax

Question

I am trying to return the values of all selected checkboxes through ajax. I cant work out how to pass the values through as a parameter.

HTML CHECKBOXES

<li><input class="customer_sales_value" id="customer_sales_1" type="checkbox" value="1"><label for="customer_sales_1">James</label></li>
<li><input class="customer_sales_value" id="customer_sales_2" type="checkbox" value="2"><label for="customer_sales_2">Jack</label></li>
<li><input class="customer_sales_value" id="customer_sales_3" type="checkbox" value="3"><label for="customer_sales_3">John</label></li>
<button id="customer_pop_share_btn">submit</button>

JQUERY

$('#customer_pop_share_btn').click(function(){
    sales_list = each($('.customer_sales_value').val());
    $.ajax({
        type    : 'POST',
        url     : '//'+base_url+'/ajax2/timeline-share.php',
        data    : 'sales_list='+sales_list,
        success : function(data) {
     });    
 });

My jquery is the issue, I think the way I want to do this is pass a list of the checkbox values into a variable like sales_list = 1,2,3 How do I do that?

You mean "send", not "return". Return is what the server sends back to the client. — Barmar
– Barmar, Commented Mar 1, 2019 at 0:42

Mohit Arya · Accepted Answer · 2019-03-01 11:19:52Z

first set name attribute to each checkbox, then push the value of checked checkbox hrough loop in javascript.

<li>
    <input class="customer_sales_value" id="customer_sales_1" name="c_sales_value" type="checkbox" value="1"><label for="customer_sales_1">James</label>
</li>
<li><input class="customer_sales_value" id="customer_sales_2" name="c_sales_value" type="checkbox" value="2"><label for="customer_sales_2">Jack</label></li>
<li><input class="customer_sales_value" id="customer_sales_3" name="c_sales_value" type="checkbox" value="3"><label for="customer_sales_3">John</label></li>

$('#customer_pop_share_btn').click(function() {
  var selectedValues    = [];
   $.each($("input:checkbox[name=c_sales_value]:checked"), function(){
        selectedValues.push($(this).val());

   });
  $.ajax({
      type: 'POST',
      url: '//' + base_url + '/ajax2/timeline-share.php',
      data: {
        sales_list: selectedValues
      },
      success: function(data) {});
  });
});

Barmar · Accepted Answer · 2019-03-01 00:46:01Z

1

Make an array of the values of the checked boxes using .map().

In the PHP script, $_POST['sales_list'] will be an array of the values if any of the boxes are checked; if none of the boxes are checked, the variable will not be set at all.

$('#customer_pop_share_btn').click(function() {
  var sales_list = $('.customer_sales_value:checked').map((i, el) => el.value).get();
  $.ajax({
      type: 'POST',
      url: '//' + base_url + '/ajax2/timeline-share.php',
      data: {
        sales_list: sales_list
      },
      success: function(data) {});
  });
});

answered Mar 1, 2019 at 0:46

Barmar

789k57 gold badges555 silver badges669 bronze badges

Collectives™ on Stack Overflow

how to return an array through ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related