Select2 - Multiple tags not working

Question

I'm trying to use Select2 (https://select2.github.io) to allow a user to type multiple tags into a field before submitting a form. In my Laravel PHP app, I'll then take those tags, determine if they exist and add them into a database.

My problem is that I can't seem to get Select2 to recognise there are multiple tags being entered by the user. When I interrogate the form data, I only see the LAST tag a user typed as opposed to ALL the tags.

My Select2 element is:

<select class="tags-field" name="tags" data-tags="true" data-placeholder="TAGS" multiple="multiple">
</select>

and my JQuery is:

$(function() {
    $(".tags-field").select2({
        maximumSelectionLength: 3,
        tokenSeparators: [','],
    });
}

There are no Javascript errors and it works perfectly fine except I cannot detect ALL the tags.

Organist

Answer 1

To cause PHP to make all the selected choices available as an array, suffix your select name with a pair of square brackets, like this:

<select class="tags-field" name="tags[]" data-tags="true" data-placeholder="TAGS" multiple="multiple">

If this form is sent to a PHP program, the value of $_POST['tags'] will be an array. Note that the square brackets in the form control name aren't a part of the array key. You would process such a form like this:

<?php
$tags = $_POST['tags'];
// Note that $tags will be an array.
foreach ($tags as $t) {
    echo "$t<br />";
}
?>

References here: http://bbrown.kennesaw.edu/papers/php2.html

Perspicacious

@Paul Vidal - Please revise your answer as 'tags[]' worked but it's not a helpful comment – Organist

@Maximillian Laumeister - I'm starting with this, so what I can do? or how can I solve this right now? can I delete the answer? – Perspicacious

@PaulVidal Sorry for the confusion! It's just that your answer is very short and doesn't explain itself very well. What do the double square brackets do, and why does that work? It could also help to link to some documentation that further explains. Thank you again for the answer though - now that I see it in context I can appreciate that it's correct, but it would still be helpful to the community if you flesh it out a bit. For more hints and details, see this thread. Thanks! – Famed

Answer 2

1. use hidden input field in order to send all values
2. use onsubmit event to set the value of the hidden field

HTML:

<form method="post" action="post.php">
    <select multiple id="e1" style="width:300px" name="_state">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>
    <input type="hidden" name="state" value="" />
    <input type="submit"/>
</form>

JQ:

$("#e1").select2();

$('form').submit(function () {
    var newvalue = '';
    var value = $('select[name="_state"]').val();
    if (value) {
        newvalue = value;
    }
    $('input[name="state"]').val(newvalue);
})

Thane