javascript - Retrieving a value from a dropdown menu using PHP

const hours = document.getElementById("hours");

for (let i = 1; i <= 12; i++) {
  hours.innerHTML += `<option value="${i}">${i}</option>`;
}

const minutes = document.getElementById("minutes");

for (let i = 0; i <= 45; i += 15) {
  if (i < 10) {
    minutes.innerHTML += `<option value="0${i}">0${i}</option>`;
  } else {
    minutes.innerHTML += `<option value="${i}">${i}</option>`;
  }
}

function ajaxSubmit() {
  var form = document.querySelector('form');
  var data = Object.fromEntries(new FormData(form));
  console.log(data)
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.status == 200 && xhr.readyState == 4) {
      document.querySelector("#isSent").innerHTML = xhr.responseText;
    }
  }

  xhr.open('POST', 'mail.php?', true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(data);
}Copy code

<form id="theForm" method="POST" onsubmit="ajaxSubmit(); return false">
  <h5>Schedule your 15 minute consultation</h5>
  <p id="date">MM/DD/YYYY</p>
  <div id="time">
    <select id="hours" name="hour"></select> <span>:</span>
    <select id="minutes" name="minute"></select>
    &nbsp;
    <div id="timeLabel">
      <label class="ampm" name="am" id="am">AM</label> / <label class="ampm" name="pm" id="pm">PM</label>
    </div>
  </div>

  <input placeholder="Name" name="name" id="name" />
  <input placeholder="Email" name="email" id="email" />

  <button class="submitBtn" name="submitBtn">SUBMIT</button>

  <p id="isSent"></p>
</form>Copy code