Вернуться




Как получить значения из выпадающего меню с помощью PHP



Я создаю форму записи и пытаюсь получить час и минуту с помощью $_POST ['minute'], но продолжаю получать "Неопределенная переменная или индекс".

HTML

<form id="theForm" method="POST" onsubmit="ajaxSubmit(); return false">

    <h5>Планирование 15-минутной консультации</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>

 

JS

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() {

    let name = document.getElementById('name'),

        email = document.getElementById('email'),

        date = document.getElementById('date'),

        hours = document.getElementById('hours'),

        minutes = document.getElementById('minutes'),

        am = document.getElementById('am'),

        pm = document.getElementById('pm');

 

    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("name=" + name.value + 

            "&email=" + email.value + 

            "&date=" + date.value + 

            "&hours=" + hours.value + 

            "&minutes=" + minutes.value + 

            "&am" + am.value + 

            "&pm" + pm.value);

}

 

Я пробовал $hour = $_POST['hour']; но это не работает, то же самое с минутой. Итак, вот мой PHP: 

 

    $hour = null;

    $minute = null;

 

    if(isset($_POST['hour'])) {

        $hour = $_POST['hour'];

    }

    if(isset($_POST['minute'])) {

        $minute = $_POST['minute'];

    }

 

Ответ 1

Проблема заключается в том, как вы отправляете данные формы в PHP. Лучше всего использовать новую функцию FormData() из Javascript. Она отправляет сериализованные данные, поэтому дополнительная обработка не требуется.

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);

}

 

<form id="theForm" method="POST" onsubmit="ajaxSubmit(); return false">

  <h5>Планирование 15-минутной консультации</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>

 

Ответ 2

Измените ваш $_POST с hour на множественное число hours, то же самое с minute на minutes. 

    $hours = null;

    $minute = null;

 

    if(isset($_POST['hours'])) {

        $hours = $_POST['hours'];

    }

    if(isset($_POST['minutes'])) {

        $minutes = $_POST['minutes'];

    }

    if(isset($hours) and isset($minutes))

        echo "ваше расписание 15-минутной консультации($hours:$minutes) зарегистрировано!";

 

Совет: для создания читаемого формата времени с помощью javascript используйте функцию padStart():

for(let i = 0; i <= 45; i+=15) {

    minutes.innerHTML += 

     "<option value="${(''+i).padStart(2,'0')}">${(''+i).padStart(2,'0')}</option>";

}

 

Вместо условного оператора if else.

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>";

  }  

}



Если вам понравилась эта статья поделитесь ею с друзьями, тем самым вы помогаете нам развиваться и добавлять всё больше интересного и полезного контента!




Cхожие статьи





Какой хостинг выбрать для сайта

Какой хостинг выбрать для сайта

Для беспроблемного функционирования сайта на просторах интернета необходимо ...

15 Февраля 2021    Web

Как и на чём лучше писать сайты?

Как и на чём лучше писать сайты?

Каждый начинающий сайтостроитель мечтает создать свой уникальный сайт на ко ...

21 Февраля 2021    Web

Ищем качественный и недорогой хостинг? Тогда вам сюда

Ищем качественный и недорогой хостинг? Тогда вам сюда

Рано или поздно всем вебмастерам приходится искать хостинг для своего проек ...

21 Февраля 2021    Web