Php Javasctipt - 未定义的选定选项通过 HTML 从数据库传递给 js

Question

您好，我在验证时遇到问题，并且在尝试选择专家时不断出现“未定义”。有人可以帮我吗？我已经在网上搜索过，但没有找到答案。谢谢！这是我的 HTML 代码：

<div class="col-md-6">
    <label for="specialist" id="specialist" class="control-label">Specialist</label>
     <?php
        $getSpecialist = mysql_query("SELECT * FROM tblspecialist WHERE specTitle = 'Doctor'");
       echo "<select name=\"specialist\" id=\"specialist\" class=\"form-control specialist\" required>";
            echo "<option value=''>Please select</option>";
            while ( $fetchSpecialist = mysql_fetch_object($getSpecialist)) {
                 echo "<option value='$fetchSpecialist->specName'>".$fetchSpecialist->specName."</option>";
            }

        echo "</select>";
    ?>
   <label id="spec" id="spec"> </label>

    <br>

    <div class="form-group">
        <label for="app_date" class="control-label">When would you like to come? </label>
        <div class="input-group date" id="datetimepicker1">
            <input type="text" class="form-control" id="app_date" name="app_date"   required autocomplete="off" title="Consultation Date" >
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>

    <!-- <form method="post" action="check_availability.php" > -->
    <div class="form-group">
    <label for="" class="control-label">Consultation Time </label>
     <div class="row">
     <span>
     <div class="col-md-3">
        <label for="hrs" class="control-label">Hrs </label>

                <select name="hrs" id="hrs" class="form-control">
                    <option value="10"> 10 AM </option>
                    <option value="11"> 11 AM </option>
                    <option value="12"> 12 NN</option>
                    <option value="13"> 01 PM</option>
                    <option value="14"> 02 PM</option>
                    <option value="15"> 03 PM</option>
                    <option value="16"> 04 PM</option>
                    <option value="1z"> 05 PM</option>
                    <option value="18"> 06 PM</option>
                    <option value="19"> 07 PM</option>
                    <option value="20"> 08 PM</option>
                </select>
            </div>


           <div class="col-md-3">
                <label for="mins" class="control-label">Mins </label>
                    <select name="mins" id="mins" class="form-control" >
                        <option value="00"> 00  </option>
                         <option value="30"> 30 </option>
                    </select>

            </div>


            <div class="form-group">
            <div class="col-md-6">
                <label for="check" class="control-label">Check Availability </label>
                <div>
                     <a href="javascript:availability()">Check Availability</a>
                 </div>
             </div>
                <div id="status"></div>
            </div>

---

这是我的 js：

<script type="text/javascript">
     function availability(){
                // Create XMLHttpRequest object
                var hr = new XMLHttpRequest();

                var url = "check_availability.php";
                var specialist = document.getElementById("specialist").value;
                var app_date = document.getElementById("app_date").value;
                var hrs = document.getElementById("hrs").value;
                var mins = document.getElementById("mins").value;
                var vars = "specialist="+specialist+"&app_date="+app_date+"&hrs="+hrs+"&mins="+mins;
                hr.open("POST", url, true);

                hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                hr.onreadystatechange = function() {
                    if(hr.readyState == 4 && hr.status == 200) {
                        var return_data = hr.responseText;
                        document.getElementById("status").innerHTML = return_data;
                    }
                }
                // Send the data to PHP now... and wait for response to update the status div[![enter image description here][1]][1]
                hr.send(vars); // Actually execute the request
                document.getElementById("status").innerHTML = "processing...";
            }
</script>

Answer 1

您有两个 ID 为 specialist 的元素：

<label for="specialist" id="specialist" class="control-label">Specialist</label>


echo "<select name=\"specialist\" id=\"specialist\" class=\"form-control specialist\" required>";

整个文档中的元素 ID 应为 unique。

这是您获取值的代码：

var specialist = document.getElementById("specialist").value;

您的 javascript 很可能会尝试查看未定义的标签的 value 属性。更改标签的 ID（或将其完全删除，我认为您不需要它）