I can’t get multiple selected values of select box in php

So, I have an HTML/PHP form that has a select list box from which you can select multiple values because its multiple properties are set to multiple. Consider the form method is ‘POST’. But the list box is saving only one value when I click on SUBMIT (to be specific the last value chosen). I don’t know why.

This is part of my code:

    <?php
    if(isset($_POST['submitSave'])) {
    // Disable errors due to empty xml files
        error_reporting(E_ALL & ~E_WARNING);

        $domDoc = new DOMDocument('1.0', 'UTF-8');
        $domDoc->preserveWhiteSpace = false;
        $domDoc->formatOutput = true;
        $domDoc->encoding = 'UTF-8';
        $domDoc->load('./data/expression.xml');
        $xpath = new DOMXpath($domDoc);


        if($domDoc->getElementsByTagName('expression')->length>0){
            // If we already have expression tag defined
            $expression = $domDoc->getElementsByTagName('expression')[0];
        }else{
            // If we don't have any expression tag, i.e. file is empty
            $expression = $domDoc->createElement('expression');
        }

    $vocabulario = $domDoc->createElement('vocabulario');
    $vocabulario->setAttribute('word', $_POST['word']);
    $classe = $domDoc->createElement('classe', $_POST['classe']);

    $domDoc->appendChild($expression);
    $expression->appendChild($vocabulario);
    $vocabulario->appendChild($classe);

    file_put_contents('./data/expression.xml', $domDoc->saveXML());
    header('location:index.php');

}
?>

<form method="post">
<div class="col-75">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
  <select name="classe[]" multiple="multiple">
    <option value="| adjective |">adjective</option>
    <option value="| adverb |">adverb</option>
    <option value="| noun |">noun</option>
    <option value="| verb |">verb</option>
  </select>
  <script type="text/javascript">
    var s2 = $("#classe").select2({
      placeholder: "Select",
      tags: true
    });
  </script>
</div>

<div class="row">
  <td><input type="submit" value="Save" name="submitSave"></td>
</div>

Answer

the code work just right for me:

/home/vagrant/foo/index.php:3:
array (size=2)
  'classe' => 
    array (size=2)
      0 => string '| adjective |' (length=13)
      1 => string '| adverb |' (length=10)
  'submitSave' => string 'Save' (length=4)

have some special config in PHP?

my test:

<?php

var_dump($_POST);

?>
<form method="POST">
     <div class="col-75">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet"/>
    <select id="classe" name="classe[]" multiple name="event_type[]" class="form-control" required>
  <option value="| adjective |">adjective</option>
  <option value="| adverb |">adverb</option>
  <option value="| noun |">noun</option>
  <option value="| verb |">verb</option>
</select>
<script type="text/javascript">
        var s2 = $("#classe").select2({
    placeholder: "Select",
    tags: true
});


    </script>
</div>
<div class="row">

            <td><input type="submit" value="Save" name="submitSave"></td>
    </div>  
</form>

edit:

when yo receive array data in PHP, in your case:

<select name="classes[]" >

the PHP var is $_POST['classes'] not $_POST['classes[]'] and it is an array, if you want to use it as an string you have to use implode