When I select a date, a drop-down list is filled. After clicking on the submit button, the values ​​that fill in the drop-down list are displayed on the page. How to fix it?

enter image description here

<html> <head> <meta charset="UTF-8"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $('#CallTime').on('change',function(){ $.ajax({ type: 'POST', url: 'index.php', dataType: 'html', data: 'CallTime='+$(this).val(), success: function(data){ //alert('qwerty'); console.log(data); $('option', $("#times_option")).remove(); $("#times_option").append(data); } }); }); }); </script> <?php if (isset($_POST['CallTime'])) { $t=""; $a=0; while($a<10) { $t .= '<option value="">'.$a.'</option>'; $a++; } echo $t; } ?> <form action="" method="POST"> <p>Выберите дату:</p> <input type="date" name="CallTime" id="CallTime"> <p>Выберите время:</p> <select name="time" id="times_option"><option></option></select> <input type="submit" value="ОК"> </form> </body> </html>

    1 answer 1

    It is useful to distinguish ajax request from a submit'a form:

     if (isset($_POST['CallTime']) && isset($_SERVER['HTTP_X_REQUESTED_WITH']))

    And also transfer processing to the beginning of the file.