Question

我正在创建一个约会表格。我正在尝试使用 $_POST['minute'] 检索小时和分钟，但我一直收到“未定义的变量或索引”。

HTML

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

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'];
    }

Answer 1

问题在于您向 PHP 发送表单数据的方式。更好的做法是使用 Javascript 的 new FormData() 函数。它发送序列化的数据，因此不需要额外的处理。

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

Answer 2

将您的 $_POST 从 hour 更改为复数 hours，将 minute 更改为 minutes。

    $hours = null;
    $minute = null;

    if(isset($_POST['hours'])) {
        $hours = $_POST['hours'];
    }

    if(isset($_POST['minutes'])) {
        $minutes = $_POST['minutes'];
    }
    
    //this message will display on #isSent paragraph
    if(isset($hours) and isset($minutes))
        echo "your Schedule 15 minute consultation($hours:$minutes) has been registered!";

提示： 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>`;
  }  
}

使用 PHP 从下拉菜单中检索值

2 个答案: