Form post not including the select input

I am trying to make a form to register the number of drinks that are taken from the fridge by a certain person.

Currently I have three drinks in my db, meaning that I create 3 select tags and 3 input fields for the number of drinks per drink (e.g. coke, coke zero or coke light). In the code (somewhere earlier), $aantalDrink is set to 3.

This page is entered from selecting a person and a drink (the person is registered in $_POST[‘teacherId’] and the following JS arrays are defined: arr_drinks (all drink names) arr_drinkIds (corresponding drink Ids) arr_initSelectedDrinkId (the id of the initially selected drink).

I want a user to be able to select multiple types of drinks in case he gets multiple drinks for the whole group.

The front end works perfectly. However, when I submit my form, the select (i.e. the chosen drink) is not passed through to the ‘submitted.php’ page. The number of drinks, the hidden variable and submit are posted correctly however.

Note, in “submitted.php” I display all values of $_POST, with: foreach ($_POST as $key => $value) { }.

I am clueless…

---

HTML [EDIT: HTML instead of PHP creating HTML];

<form action="submitted.php" method="post">
   <div class="drinkInvoer">
      <table class="TeacherPaysTable">
         <tbody>
            <tr>
               <td class="TeacherPaysCount">
                  <div>
                     <div class="decreaseWithOne">
                        -
                     </div>
                     <input readonly="readonly" name="aantalDrinks0" type="number" value="1" class="numberOfDrinks" min="0" max="999">
                     <div class="increaseWithOne">
                        +
                     </div>
                  </div>
               </td>
               <td class="TeacherPaysDrink">
                  <select id="select0" name="select0" class="rec_mode">
                     <option value="" disabled=""></option>
                     <option value="1" disabled="">Cola</option>
                     <option value="2" disabled="" selected="selected">Cola Zero</option>
                     <option value="3">Cola Light</option>
                  </select>
               </td>
               <td class="TeacherPaysImage"><img id="ImgLogo0" src="drinkLogo/colaZero.png" class="logoImg"></td>
            </tr>
         </tbody>
      </table>
      <div class="hiddenDiv0"></div>
   </div>
   <div class="drinkInvoer" style="">
      <table class="TeacherPaysTable">
         <tbody>
            <tr>
               <td class="TeacherPaysCount">
                  <div>
                     <div class="decreaseWithOne">
                        -
                     </div>
                     <input readonly="readonly" name="aantalDrinks1" type="number" value="1" class="numberOfDrinks" min="0" max="999">
                     <div class="increaseWithOne">
                        +
                     </div>
                  </div>
               </td>
               <td class="TeacherPaysDrink">
                  <select id="select1" name="select1" class="rec_mode">
                     <option value="" disabled=""></option>
                     <option value="1" disabled="" selected="selected">Cola</option>
                     <option value="2" disabled="">Cola Zero</option>
                     <option value="3">Cola Light</option>
                  </select>
               </td>
               <td class="TeacherPaysImage"><img id="ImgLogo1" src="drinkLogo/cola.png" class="logoImg" style=""></td>
            </tr>
         </tbody>
      </table>
      <div class="hiddenDiv1"></div>
   </div>
   <div class="drinkInvoer" style="display: none;">
      <table class="TeacherPaysTable">
         <tbody>
            <tr>
               <td class="TeacherPaysCount">
                  <div>
                     <div class="decreaseWithOne">
                        -
                     </div>
                     <input readonly="readonly" name="aantalDrinks2" type="number" value="1" class="numberOfDrinks" min="0" max="999">
                     <div class="increaseWithOne">
                        +
                     </div>
                  </div>
               </td>
               <td class="TeacherPaysDrink">
                  <select id="select2" name="select2" class="rec_mode">
                     <option value="" disabled="" selected="selected"></option>
                     <option value="1" disabled="">Cola</option>
                     <option value="2" disabled="">Cola Zero</option>
                     <option value="3">Cola Light</option>
                  </select>
               </td>
               <td class="TeacherPaysImage"><img id="ImgLogo2" src="drinkLogo/noDrink.png" class="logoImg" style="display: none;"></td>
            </tr>
         </tbody>
      </table>
      <div class="hiddenDiv2"></div>
   </div>
   <br><br>
   <table class="TeacherPaysTable">
      <tbody>
         <tr>
            <td class="TeacherPaysCount">
               <div id="NewDrinkType">+ Meer drinken</div>
            </td>
            <td class="TeacherPaysDrink"></td>
            <td class="TeacherPaysImage"><input type="submit" name="submit" value="Bevestigen" class="bevesetigDrankjes"></td>
         </tr>
      </tbody>
   </table>
   <input type="hidden" id="teacherId" name="teacherId" value="2">            
</form>

---

JS:

• Define options;

• Set options to all three select tags

• Set initial option in the first select

• Disable options that are already selected in one of the select tags

• When the div with id “NewDrinkType” is clicked, another select tag becomes visible

• Some small JS to allow a user to increase or decrease the number of drinks per drink.

  <script>  
    $(document).ready(function(){
        var options = [{"text" : "" , "value" : "" , "selected" : false}];
        for (var i = 0 ; i < arr_drinks.length; i++){
          if (arr_drinkIds[i] == arr_initSelectedDrinkId){
              var selectTrueFalse = true;
          } else {
              var selectTrueFalse = false;
          }
          options.push({
              "text"  : arr_drinks[i],
              "value" : arr_drinkIds[i],
              "selected" : selectTrueFalse,
          });
          if (i > 0){
            $(".hiddenDiv" + i).parent().hide();
            $("#ImgLogo" + i).hide();
          } else {
              var initDrinkIdx = arr_drinkIds.indexOf(arr_initSelectedDrinkId.toString());
              var varLink = arr_drinkLogoLinks[initDrinkIdx];
              $("#ImgLogo" + i).attr("src", "drinkLogo/" + varLink);
          }
        }
  
        var numberOfBoxes = document.getElementsByClassName("rec_mode").length;
        var selectBox = document.getElementsByClassName('rec_mode');
  
        for (var j = 0 ; j < numberOfBoxes ; j++){
            for(var i = 0, l = options.length; i < l; i++){
              var option = options[i];
              if (j == 0){
                selectBox[j].options.add( new Option(option.text, option.value, false, option.selected) );
              } else {
                selectBox[j].options.add( new Option(option.text, option.value) );
              }
            }
  
            var op = document.getElementsByClassName("rec_mode")[j].getElementsByTagName("option");
            op[0].disabled = true;
            // start with i = 1 because 0 must remain disabled always.
            for (var i = 1; i < op.length; i++) {
              if(arr_selectedDrinkIds.includes(op[i].value)){
                op[i].disabled = true; 
              } else {
                op[i].disabled = false;
              }
            }
        }
  
        $('.rec_mode').find('option:selected').attr("selected","selected");
        $('.rec_mode').find('option:not(:selected)').removeAttr('selected');
  
        $('.rec_mode').on('change', function(){
            arr_selectedDrinkIds = []
            for (var j = 0 ; j < numberOfBoxes ; j++){
                arr_selectedDrinkIds.push(selectBox[j].value);
            }
            for (var j = 0 ; j < numberOfBoxes ; j++){
                var op = document.getElementsByClassName("rec_mode")[j].getElementsByTagName("option");
                // start with i = 1 because 0 (empty option) must remain disabled always.
                for (var i = 1; i < op.length; i++) {
                    if(arr_selectedDrinkIds.includes(op[i].value)){
                      op[i].disabled = true; 
                    } else {
                      op[i].disabled = false;
                    }
                }
            }
        });
  
        $('.rec_mode').change(function() {
            var nameSelection = $(this).attr("name");
            var nameSelectionArr = nameSelection.split(/([0-9]+)/)
            var i = nameSelectionArr[1];
            var selectedDrinkId = $(this).find('option:selected').attr("value");
            var DrinkIdx = arr_drinkIds.indexOf(selectedDrinkId.toString());
            var varLink = arr_drinkLogoLinks[DrinkIdx];
            $("#ImgLogo" + i).attr("src", "drinkLogo/" + varLink);
            $("#ImgLogo" + i).show();
            $(this).find('option:selected').attr("selected","selected");
            $(this).find('option:not(:selected)').removeAttr('selected');
        });
  
        var aantalDrinks = 0;
        $('#NewDrinkType').click(function(){
            aantalDrinks = aantalDrinks + 1;
            $(".hiddenDiv" + aantalDrinks).parent().show();
            if(aantalDrinks >= arr_drinks.length - 1){
                $("#NewDrinkType").hide();
            }
        });
  
        $('.increaseWithOne').click(function(){
            $(this).parent().find('input').val(parseInt($(this).parent().find('input').val()) + 1);
        });
  
        $('.decreaseWithOne').click(function(){
            if($(this).parent().find('input').val() > 0){
                $(this).parent().find('input').val(parseInt($(this).parent().find('input').val()) - 1);
            }
        });  
    });
  

—

Visual aspect:

Regular page:

Consider the following pictures:

After submit:

Answer

You are seeing this behaviour because you have made option disabled and disabled value do not get submitted to server . i.e :

  for (var i = 1; i < op.length; i++) {
        if (arr_selectedDrinkIds.includes(op[i].value)) {
          op[i].disabled = true;
        } else {
          op[i].disabled = false;
        }
      }

Now, to fix this you can add below script to your jquery code :

$("form").on("submit", function(e) {
    $("select option").prop("disabled", false) //this will remove disable from options
})

Above code will get called when user clicked on submit button and then inside this you can remove disabled attribute from your select-box options to make them submit as well .

Quick Demo :

$(document).ready(function() {
  var arr_drinks = ["C", "K", "A"]
  var arr_drinkIds = [1, 2, 3]
  var arr_initSelectedDrinkId = [1, 3]
  var arr_selectedDrinkIds = [1, 3]
  var options = [{
    "text": "",
    "value": "",
    "selected": false
  }];
  for (var i = 0; i < arr_drinks.length; i++) {
    if (arr_drinkIds[i] == arr_initSelectedDrinkId) {
      var selectTrueFalse = true;
    } else {
      var selectTrueFalse = false;
    }
    options.push({
      "text": arr_drinks[i],
      "value": arr_drinkIds[i],
      "selected": selectTrueFalse,
    });
    //othert cods..
  }

  var numberOfBoxes = document.getElementsByClassName("rec_mode").length;
  var selectBox = document.getElementsByClassName('rec_mode');

  for (var j = 0; j < numberOfBoxes; j++) {
    for (var i = 0, l = options.length; i < l; i++) {
      var option = options[i];
      if (j == 0) {
        selectBox[j].options.add(new Option(option.text, option.value, false, option.selected));
      } else {
        selectBox[j].options.add(new Option(option.text, option.value));
      }
    }

    var op = document.getElementsByClassName("rec_mode")[j].getElementsByTagName("option");
    op[0].disabled = true;
    // start with i = 1 because 0 must remain disabled always.
    for (var i = 1; i < op.length; i++) {
      if (arr_selectedDrinkIds.includes(op[i].value)) {
        op[i].disabled = true;
      } else {
        op[i].disabled = false;
      }
    }
  }

  $('.rec_mode').find('option:selected').attr("selected", "selected");
  $('.rec_mode').find('option:not(:selected)').removeAttr('selected');

  $('.rec_mode').on('change', function() {
    arr_selectedDrinkIds = []
    for (var j = 0; j < numberOfBoxes; j++) {
      arr_selectedDrinkIds.push(selectBox[j].value);
    }
    for (var j = 0; j < numberOfBoxes; j++) {
      var op = document.getElementsByClassName("rec_mode")[j].getElementsByTagName("option");
      // start with i = 1 because 0 (empty option) must remain disabled always.
      for (var i = 1; i < op.length; i++) {
        if (arr_selectedDrinkIds.includes(op[i].value)) {
          op[i].disabled = true;
        } else {
          op[i].disabled = false;
        }
      }
    }
  });

  $('.rec_mode').change(function() {
    var nameSelection = $(this).attr("name");
    var nameSelectionArr = nameSelection.split(/([0-9]+)/)
    var i = nameSelectionArr[1];
    var selectedDrinkId = $(this).find('option:selected').attr("value");
    //some codes
    $(this).find('option:selected').attr("selected", "selected");
    $(this).find('option:not(:selected)').removeAttr('selected');
  });

  var aantalDrinks = 0;
  $('#NewDrinkType').click(function() {
    aantalDrinks = aantalDrinks + 1;
    $(".hiddenDiv" + aantalDrinks).parent().show();
    if (aantalDrinks >= arr_drinks.length - 1) {
      $("#NewDrinkType").hide();
    }
  });

  $('.increaseWithOne').click(function() {
    $(this).parent().find('input').val(parseInt($(this).parent().find('input').val()) + 1);
  });

  $('.decreaseWithOne').click(function() {
    if ($(this).parent().find('input').val() > 0) {
      $(this).parent().find('input').val(parseInt($(this).parent().find('input').val()) - 1);
    }
  });
  $("form").on("submit", function(e) {
    console.log("BEFORE --" + $(this).serialize())
    $("select option").prop("disabled", false)
    console.log("AFTER --" + $(this).serialize())

    e.preventDefault() //remove this line when ,,submitting 
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form action="submitted.php" method="post">

  <div class="drinkInvoer">
    <table class="TeacherPaysTable">
      <tr>
        <td class="TeacherPaysCount">
          <div>
            <div class="decreaseWithOne">
              -
            </div>
            <input readonly="readonly" name="aantalDrinks0" type="number" value=1 class="numberOfDrinks" min="0" max="999">
            <div class="increaseWithOne">
              +
            </div>
          </div>
        </td>
        <td class="TeacherPaysDrink">
          <select id="select0" name="select0" class="rec_mode"></select>
        </td>
        <td class="TeacherPaysImage"><img id="ImgLogo0" src="drinkLogo/noDrink.png" class="logoImg"></td>
      </tr>
    </table>
    <div class="hiddenDiv0"></div>
  </div>
  <div class="drinkInvoer">
    <table class="TeacherPaysTable">
      <tr>
        <td class="TeacherPaysCount">
          <div>
            <div class="decreaseWithOne">
              -
            </div>
            <input readonly="readonly" name="aantalDrinks1" type="number" value=1 class="numberOfDrinks" min="0" max="999">
            <div class="increaseWithOne">
              +
            </div>
          </div>
        </td>
        <td class="TeacherPaysDrink">
          <select id="select1" name="select1" class="rec_mode"></select>
        </td>
        <td class="TeacherPaysImage"><img id="ImgLogo1" src="drinkLogo/noDrink.png" class="logoImg"></td>
      </tr>
    </table>
    <div class="hiddenDiv1"></div>
  </div>

  <br><br>
  <table class="TeacherPaysTable">
    <tr>
      <td class="TeacherPaysCount">
        <div id="NewDrinkType">+ Meer drinken</div>
      </td>
      <td class="TeacherPaysDrink">
      </td>
      <td class="TeacherPaysImage">
        <input type="submit" name="submit" value="Bevestigen" class="bevesetigDrankjes"></td>
    </tr>
  </table>
  <input type="hidden" id="teacherId" name="teacherId" value="'. $_POST['teacherId'] .'">

</form>