POST ajax and combo box problem

Question

I’m trying to update a combo box dynamically, for this I have two combo box "predata" and "prehora", when the user selects a value in the predata field the prehora field has to perform a query in the database with the predata parameter, but the post method is not working, it follows the codes;

main.php

<form action="process.php?action=add-cons" method="post" name="frmShipment" > 

          <tr>
            <td colspan="3" align="right" class="TrackNormalBlue" style="text-align: center"><strong>AGENDAMENTO DE HORÁRIO</strong></td>
            </tr>
          <tr>
            <td align="right" bgcolor="#C7BFBF" class="TrackNormalBlue"><strong>Data:</strong></td>
            <td bgcolor="#C7BFBF">&nbsp;</td>
            <td bgcolor="#C7BFBF"><select id="predata" name="predata">
                <option>Selecione...</option>
<?php
$hoje = date('d/m/Y');
$query = mysql_query("SELECT DISTINCT Data FROM tbl_agenda where Agendado like '0' and data >= '$hoje' order by data ");
 while($prod = mysql_fetch_array($query)) { ?>
 <option value="<?php echo $prod['Data'] ?>"><?php echo $prod['Data'] ?></option>
 <?php } ?>


          </tr>
           <td align="right" bgcolor="#C7BFBF" class="TrackNormalBlue"><strong>Hora:</strong></td>
           <td bgcolor="#C7BFBF">&nbsp;</td>
           <td bgcolor="#C7BFBF"><select id="prehora" name="prehora">
                <option>Selecione Uma Data</option>



          </tr>
          <tr>

            <td><input name="Submit" type="submit" onClick="return document.MM_returnValue" value="Adicionar Embarque"></td>
          </tr>
        </tbody></table></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </tbody></table></td>
    <td background="images/boxrightBG.gif"></td>
  </tr>
  <tr>
    <td width="18"><img src="images/boxbtmleftcorner.gif" alt="" height="12" width="18"></td>
    <td background="images/boxbtmBG.gif" width="734"></td>
    <td width="18"><img src="images/boxbtmrightcorner.gif" alt="" height="12" width="18"></td>
  </tr>
</tbody></table>
<br>
</form> 

<script type="text/javascript">

      $(document).ready(function(){
        // Evento change no campo tipo  
         $("select[name=predata]").change(function(){
            // Exibimos no campo marca antes de concluirmos
$("select[name=prehora]").html('<option value="">Carregando...</option>');
            // Exibimos no campo marca antes de selecionamos a marca, serve tamb?m em caso
// do usuario ja ter selecionado o tipo e resolveu trocar, com isso limpamos a
// sele??o antiga caso tenha feito.
// Passando tipo por parametro para a pagina ajax-marca.php
            $.post("ajax-prehora.php",
                  {tipo:$(this).val()},
                  // Carregamos o resultado acima para o campo marca
 function(valor){
                     $("select[name=prehora]").html(valor);
                  }
                  )
         })
      // Evento change no campo marca 




 })

</script>

ajax-prehora.php

<?php
session_start();
require_once('library.php');




$predata = $_POST['predata'];


    $sql = "SELECT * FROM tbl_agenda WHERE Data = '$predata' ORDER BY Hora";
    $qr = mysql_query($sql) or die(mysql_error());

    if(mysql_num_rows($qr) == 0){
       echo  '<option value="0">'.htmlentities('Carregando...').'</option>';

    }else{
          echo '<option value="">Selecione a Data..</option>';
       while($ln = mysql_fetch_assoc($qr)){
          echo '<option value="'.$ln['Data'].'">'.$ln['Data'].'</option>';

       }
    }
    ?>

I did the test to put the fixed date in the query and it works but this field needs came according to the user’s selection.

 $sql = "SELECT * FROM tbl_agenda WHERE Data = '13/06/2016' ORDER BY Hora";

Solved

I edited the line:

 $.post("ajax-prehora.php",
                  {tipo:$(this).val()},

To

 $.post("ajax-prehora.php",
                  {predata:$(this).val()},

Answer 1

I saw a lot of syntax errors in your code, but I saved you from them.

$(document).ready(function() {
    $("select[name=predata]").change(function() {
        $("select[name=prehora]").html('<option value="">Carregando...</option>');
        var $data = $(this);
        $.post("ajax-prehora.php",
            {
                'data': {
                    'predata': $data.val()
                },
                'success': function(response) {
                    $("select[name=prehora]").html(response);
                }
            }
        );
    }
});

You weren’t sending the amount of predata as $_POST['predata'] for PHP. In the object of the second parameter in the call $.post you declare the object data and the data within it. The $.post will automatically recognize and send to the URL of POST.

Answer 2

The correct Klaider can also be !

$(document).ready(function() {
$("select[name=predata]").change(function() {
    $("select[name=prehora]").html('<option value="">Carregando...</option>');
    var $data = $(this);
    $.ajax({
            'url': "ajax-prehora.php",
            'method':'POST',
            'data': {'predata': $data.val() },
            'success': function(response) {
                $("select[name=prehora]").html(response);
            }
        }
    );
}
});

data, url, Success, are AJAX/Jquery settings

Answer 3

I edited the line:

 $.post("ajax-prehora.php",
                  {tipo:$(this).val()},

To

$.post("ajax-prehora.php",
                  {predata:$(this).val()},