Ajax multiple array not working

Question

When I select values from two different select I get an error tmp is null

<form method="post" id="filterform">
       <select multiple name="category[]" id="category" class="select">
           <option value="10">Men Foreigner</option>
           <option value="11">Women Foreigner</option>
        </select>

        <select multiple name="hair[]" id="hair" class="select">
           <option value="Black">Black</option>
           <option value="Blond">Blond</option>
        </select>
</form>

jQuery part

   $("select.select").change( function() {
        var Thedata = $("#filterform").serialize();
            console.log(Thedata);

        $.ajax({
            data: Thedata,
            type: 'POST',
            url: 'autocomplete.php?cat=filtermodelscall',
            })
            .done(function( html ) {
                $("tbody").html( html );
            });
    });

Log shows Thedata values which is category%5B%5D=10&hair%5B%5D=Black I have no idea where come from this error. Also, when I select values from a single select, it is working. Thank you for your help

it comes from [] category[] why you don't use just name="category" — Mohamed-Yousef
– Mohamed-Yousef, Commented Nov 22, 2015 at 5:14
Because it is a multiple select. if name="category[]" is not an array and that I select multiple option in the same select, I am not able to retrieve all values in ajax — orugari
– orugari, Commented Nov 22, 2015 at 5:20
Where is "error tmp is null" error coming from in that code? — epascarello
– epascarello, Commented Nov 25, 2015 at 13:21

Mohammad · Accepted Answer · 2016-05-16 07:37:28Z

1

The serialize() method creates a text string in standard URL-encoded notation.

When a text convert to encoded URL:

[ convert to %5B

] convert to %5D

You need to decode encoded url using decodeURIComponent() JS function like this:

$("select.select").change( function() {
    var Thedata = $("#filterform").serialize();
    console.log(decodeURIComponent(Thedata));          
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="filterform">
       <select multiple name="category[]" id="category" class="select">
           <option value="10">Men Foreigner</option>
           <option value="11">Women Foreigner</option>
        </select>

        <select multiple name="hair[]" id="hair" class="select">
           <option value="Black">Black</option>
           <option value="Blond">Blond</option>
        </select>
</form>

edited May 16, 2016 at 7:37

answered Nov 25, 2015 at 13:04

Mohammad

21.5k16 gold badges58 silver badges86 bronze badges

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

Collectives™ on Stack Overflow

Ajax multiple array not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related