Send multiple values with an ajax function

Question

I have two select menus:

<select name="category" id="category" class="form-control" size="5">
         <option value="">name1</option>
         <option value="">name2</option>
</select>

<select name="category2" id="category2" class="form-control" size="5">
         <option value="">order_item1</option>
         <option value="">order_item2</option>
</select>

I want to send the selected value from each select box to a server sided script (fetch.php). Therefore I create a function: function load_data(is_category, is_category2) {}.

Now I have the problem that only the selected value from the first category select menu (id="category") gets sended to my server sided script. The selected value id="category2" isn´t get sended to my server sided script.

Complete code:

$(document).ready(function () {

    load_data();

    function load_data(is_category, is_category2) {

        var dataTable = $('#product_data').DataTable({
            "processing": true,
            "serverSide": true,
            "order": [],
            "ajax": {
                url: "fetch.php",
                type: "POST",
                data: {
                    is_category: is_category,
                    is_category2: is_category2
                },
            }
        }); 
    }

   // Select Box id="category"

    $(document).on('change', '#category', function () {
        var category = $(this).val();
        $('#product_data').DataTable().destroy();
        if (category != '') {
            load_data(category);
        }
        else {
            load_data();
        }
    });
     
      // Select Box id="category2"

      $(document).on('change', '#category2', function () {
        var category2 = $(this).val();
        $('#product_data').DataTable().destroy();
        if (category2 != '') {
            load_data(category2);
        }
        else {
            load_data();
        }
    });

});

You will get a better answer if you post a little more code. Is there a <form>? is there a <button>? — user2182349
– user2182349, Commented Nov 9, 2020 at 2:13

Harshana · Accepted Answer · 2020-11-09 14:51:42Z

1

First, you need to add event listeners for both select elements in order to get the value of them. Then, you should add a new parameter to the load_data function to get those values inside the function.

$(document).ready(function () {
    var category = "";
    var category2 = "";
    load_data();

    function load_data(is_category, is_category2) {
        console.log(is_category, is_category2);
        var dataTable = $('#product_data').DataTable({
            "processing": true,
            "serverSide": true,
            "order": [],
            "ajax": {
                url: "fetch.php",
                type: "POST",
                data: {
                    is_category: is_category,
                    is_category2: is_category2
                },
            }
        }); 
    }

   // Select Box id="category"

    $(document).on('change', '#category, #category2', function () {
    //console.log($(this).attr('id'), category, category2)
        if ($(this).attr('id') === "category"){
          category = $(this).val();
        }else if ($(this).attr('id') === "category2"){
          category2 = $(this).val();
        }
        // 
        $('#product_data').DataTable().destroy();
        if (category != '') {
            load_data(category, category2);
        }
        else {
            load_data();
        }
    });
     
      // Select Box id="category2"

      $(document).on('change', '#category2', function () {
        var category2 = $(this).val();
        $('#product_data').DataTable().destroy();
        if (category2 != '') {
            load_data(category, category2);
        }
        else {
            load_data();
        }
    });

});

<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<select name="category" id="category" class="form-control" size="5">
         <option value="name1">name1</option>
         <option value="name2">name2</option>
</select>

<select name="category2" id="category2" class="form-control" size="5">
         <option value="order_item1">order_item1</option>
         <option value="order_item2">order_item2</option>
</select>

edited Nov 9, 2020 at 14:51

answered Nov 9, 2020 at 1:47

Harshana

5,5561 gold badge22 silver badges30 bronze badges

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

11 Comments

Lerster Over a year ago

Thanks for your help. I tested the script. Sadly the select boxes aren´t working as expected. If I choose a variable in the first select box in the developers console shows "undefined undefined". I´ve set up a testpage with the whole script maybe you could look over it. link.

Lerster Over a year ago

I´ve made a small adjustment load_data(category); and load_data(category2); Now the first select box works perfectly. But the second one does not. Do you have an idea? I´ve updated the code under the URL.

Harshana Over a year ago

Did you try the updated code? I think it will solve the issue.

Lerster Over a year ago

Yeah, I´m using your updated code. Besides the both changes I didn´t changed anything. :(

Harshana Over a year ago

It is not the updated code :) Try replacing the JS Code with the updated code. I have made few changes to the load_data() function calls.

|

Collectives™ on Stack Overflow

Send multiple values with an ajax function

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related