Php Javasctipt - Undefined selected option passed to js from database through HTML

Question

Hi I am having problems with my validation and keeps getting "undefined" when I try to choose the specialist. Can anybody help me please? I've already searched the web but found no answer. Thanks! Here's my HTML code:

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

Here's my 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>

score 3 · Answer 1 · edited May 23 '17 at 12:21

3

You have two elements with an ID of specialist:

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


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

Element IDs should be unique throughout the entire document.

This is your code for getting the value:

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

Your javascript is most likely trying to look at the value property of the label, which is undefined. Change the ID of your label (or remove it entirely, I don't think you need it)

edited May 23 '17 at 12:21

Community

1
1

answered Aug 18 '15 at 14:04

Jeff Lambert

24,395
4
69
96

Oh my goodness! I've missed that one! I never realized that i declared an id in that label! My bad! Sorry and thank you so much watcher :) – samantha.nicole Aug 18 '15 at 14:09

Php Javasctipt - Undefined selected option passed to js from database through HTML

1 Answers1