jQuery ajax not populating select when i send to post

Question

I'm trying to populate a select based on ajax data.

    <input id="datepicker" name="date" width="270" style = "display: block; float: center;"  required>

            <script> 
        $('#datepicker').datepicker({
                    format: 'd/m/yyyy',
            onSelect: function (date) {
                $.ajax({
                    type: "POST",
                    url: '../../Models/appointment/timesquery.php',
                    data: {
                        'date': date,
                    },
                }).done(function (data) {
                    $('select[name=times]').html(data);
                }).fail(function () {
                    alert('An error has occured.')
                });
            }
                });
        </script>

        <select  class="select-css" name = "times">
             <!-- Options will be added here dynamically using jQuery -->
</select>

timesquery.php

<?php
$date = $_POST['date']; // <====== Here is our date variable, you need to escape this!!!
$mysqli = NEW MySQLi('localhost','root','','cappeli');
$result = $mysqli->query("SELECT t.`hour` FROM `times` t LEFT JOIN ( SELECT `time` FROM `reservations` WHERE `date` = '$date' GROUP BY `time` HAVING COUNT(*) > 2) r on r.time = t.`hour` WHERE r.time IS NULL ");

while($rows = $result->fetch_assoc())
{
    $hd = $rows['hour'];
    echo "<option value = 'hairdressing'>$hd</option>";
}

?>

The select isnt populating, it staying null, and I replaced $date=$_POST['$date']; with $date='1/2/2020' just to make sure the query is correct, and when i opened the php file I got my list of values, but why isnt it populating in the select?

Comments are not for extended discussion; this conversation has been moved to chat. — Bhargav Rao
– Bhargav Rao, Commented Feb 2, 2020 at 19:05

BlackWiCKED · Accepted Answer · 2020-02-02 19:13:15Z

1

Here is a working example of the front-end code, using a back-end script on my server, but the point is that the JS code works properly.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<input id="datepicker" name="date" width="270" style="display: block; float: center;" required>

<script>
  $('#datepicker').datepicker({
    format: 'd/m/yyyy',
    onSelect: function(date) {

      $.ajax({
        type: "POST",
        url: 'https://www.blackwicked.com/testajax.php',
        data: {
          'date': date,
        },
      }).done(function(data) {
        $('select[name=times]').html(data);
      }).fail(function() {
        alert('An error has occured.')
      });
    }
  });
</script>

<select class="select-css" name="times">
  <!-- Options will be added here dynamically using jQuery -->
</select>

answered Feb 2, 2020 at 19:13

BlackWiCKED

3964 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BlackWiCKED Over a year ago

@ElioRahy probably because you have not imported all the required Javascript libraries. To have the datepicker widget you need to include it in your project.

Elio Rahy Over a year ago

yeah probably, im so dumb

BlackWiCKED Over a year ago

Btw, why did you accept the same solution from somebody else that was posted 10 minutes after mine?

Twisty · Accepted Answer · 2020-02-02 19:19:47Z

Consider the following example.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="datepicker" name="date" width="270" style="display: block; float: center;" required>

<script>
  $('#datepicker').datepicker({
    format: 'd/m/yyyy',
    onSelect: function(dt) {
      $.ajax({
        type: "POST",
        url: '../../Models/appointment/timesquery.php',
        data: {
          'date': dt,
        },
        dataType: "HTML",
        success: function(data) {
          $("select[name='times']").html(data).fadeIn();
        },
        error: function(x, e, t) {
          console.log(dt, e, t);
          alert("There was a connection issue, please review console for more details.");
        }
      });
    }
  });
</script>

<select class="select-css" name="times" style="display: none;">
  <!-- Options will be added here dynamically using jQuery -->
</select>

Unable to test in Snippet.

Collectives™ on Stack Overflow

jQuery ajax not populating select when i send to post

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related