Issues with PHP POST via AJAX within Bootstrap 4 form

Question

I am working on a website for a client which is build upon the free Bootsrap 4 Template called 'agency'. They also provide a simple contact form using a standard Bootstrap Form, which sends the data to a .js File for preprocessing and afterwards the Message gets POSTed (with an AJAX call) to a Server PHP script which actually sends the mail.

My Problem is: All the Form data is send, except the entries within a Dropdown element.

One Dropdown example:

 <label for="adults">Erwachsene</label>
 <select name="adults" class="form-control" id="adults">
    <option value="keine">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
 </select>

1. the Form has no action - as the js. script is invoked as I press submit (default behaviour is prevented)
2. The values of the form are NOT SERIALIZED, they are all collected one-by-one with $(select#inputID).val()
3. It does not matter if one uses document.getElementById(#inputID).value or any other call
4. The Data is transferred in a standard call:

  $.ajax({
                url: "././mail/contact_me.php",
                type: "POST",
                dataType: "json",
                data: {
                    "name": name,
                    "email": email,
                    "street": street,
                    "number": number,
                    "place": place,
                    "postal": postal,
                    "phone": phone,
                    "adults": adults,
                    "children": children,
                    "flat": flat,
                    "startDate": startDate,
                    "endDate": endDate,
                    "dog": dog,
                    "sheets": sheets,
                    "towels": towels,
                    "message": message
                },
                cache: false,
                success: function () {
                    // Success message
                    $('#success')
                        .html("<div class='alert alert-success'>" +
                            "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'></button>" +
                            "<strong>Vielen Dank, Ihre Anfrage wurde verschickt.</strong>" +
                            "</div>");
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function () {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>" +
                        "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'></button>" +
                        "<strong>Sorry, deine Mail konnte nicht versandt werden</strong>" +
                        "</div>");
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                complete: function () {
                    setTimeout(function () {
                        $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
                    }, 1000);
                }
            });

5. The php file does nothing than: $name = htmlspecialchars($_POST["name"]); and putting it into the mail body
6. I get the mail and all 'non-dropdown' elements are there
7. console.log() and browser access of the dropdown values works like a charm, so there should be no stupid syntax error or anything (also tried .toString()every field before the ajax call)

Therefore I am uncertain where the error takes place and what the problem is, maybe someone has expierenced a similar situation and has a hint for me.

Thanks in advance!

SOLUTION as recommended in the comments: use getElementById(). I just made a function for getting the dropdown values:

function getDDValue(id) {
  let dropdown = document.getElementById(id);
  return dropdown ? dropdown.options[dropdown.selectedIndex].value : id + " nicht gefunden!";
}

// the call
let adults_value = getDDValue('adults');
```

Answer 1

For get the selected value you should pick it from the option.

// get select box object
var adultsSelectBox = document.getElementById("adults");

// get selected option value
var adults = adultsSelectBox.options[adultsSelectBox.selectedIndex].value;

// get selected option text
var adultsText = adultsSelectBox.options[adultsSelectBox.selectedIndex].text;


console.log(adults);

// ...
// then ajax request etc..