Materialized: Select value not passed in post body

If you are using the materialize framework, you might have trouble to pass a value when using the select element in a form. Indeed the value is not taken into account. To solve this give an id to the select element and and add an hidden input field with the relevant field name and id as so:

<div class="row">             
<div  class="input-field col s12">                 
<select id="data_select">                   
<option  value="" disabled selected>Data</option>                   <option  value="1">data 1</option>                   
<option  value="2">data 2</option>                   
<option  value="3">data 3</option>                   <option  value="4">data 4</option>                 </select>                 
<input type="hidden" name="data_name" id="data_hidden" />             </div>                       
</div>

and with the associated script:

// Post Materialize select value$(document).ready(function() {
     $('#data_select').on('change', function() {
         var data_select=document.getElementById("data_select").value;
         document.getElementById("data_hidden").value=data_select;
        
     });

[Edit: everything worked fine simply using the following code:

<div class="row">             
<div  class="input-field col s12">                 
<select name="data_name"  id="data_select">                   
<option  value="" disabled selected>Data</option>                   <option  value="1">data 1</option>                   
<option  value="2">data 2</option>                   
<option  value="3">data 3</option>                  
<option  value="4">data 4</option>                 
</select>                 
</div>                       
</div>

]