Return value with PHP and AJAX

Question

I’m trying to do a POST and it’s right in parts, only when I try to send the value of FORM to the destination of the post it gets the blank value. See my code:

This is the form that sends the POST

<?php include 'masterpage.php'; ?>
<div class="row">
<div class="col-lg-12">
        <form id="partida-form" action="" method="POST">
           <span class="glyphicon glyphicon-exclamation-sign"></span>
           <span style="color:red" id="mensagem"></span>
              <div class="ml-auto" style="float: right;">
                <select name="teste" id="teste" class="form-control">
           <option value="19">carmolandia</option>
           <option value="1">Sem equipe</option>
           </select>
                 <button type="button" style="min-width: 110px; max-width: 110px" class="btn btn-outline-primary" name="btnPartida" id="btnPartida">Selecionar</button>
              </div>
        </form>
 </div>
        <div id="conteudo" class="col-lg-12">

        </div>
</div>
<?php include 'footer.php'; ?>

Then the key.php file

<?php 

   include 'code-source/return/partida.php'; 

   $teste = (isset($_POST['teste'])) ? $_POST['teste'] : '' ;
   echo $teste;

   ?>
<div id="tab" class="row">
<?php  for($a = 0; $a < $x; $a++){ ?>
<div class="col-sm-6">
<div class="table-responsive" style="font-size: 14px !important;">
<table id="tabelaEquipe" class="table table-borderless table-striped table-earning">
   <thead>
      <tr>
         <th>Grupo: <b><?php echo $chave[$a].' - '.$rodada[$a] ?></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><?php echo $equipe_1[$a].' <b>CONTRA</b> '.$equipe_2[$a]?> </td>
      </tr>
   </tbody>
</table>
<div><b>Local:</b> <?php echo $local[$a].' <b>Horário:</b> '.$hora[$a]?></div>
</div>
</div>  
<?php } ?>
</div> 

<?php  ?>

And finally, the JS file that makes the post with AJAX

$("#btnPartida").click(function(){
        $.ajax({
            type : 'POST',
            url  : 'chaves.php',
            async: true,
            }).done(function(data){
    $("#conteudo").html(data);  
});

the problem is here:

$teste = (isset($_POST['teste'])) ? $_POST['teste'] : '' ;
 echo $teste;

I want to take the value of the test field, but it keeps seeing blank, or worthless.

Answer 1

Missing you send the value of the element in AJAX by data::

data: {teste: $("#teste").val()},

You also don’t need async: true because AJAX is already async. Missed closing the .done() also with });:

It’ll stay that way:

$("#btnPartida").click(function(){
   $.ajax({
      type : 'POST',
      url  : 'chaves.php',
      data: {teste: $("#teste").val()},
   }).done(function(data){
      $("#conteudo").html(data);  
   });
});

AJAX will send to data: an object with a key teste with the option value selected in select#teste:

HTML:
<select name="teste" id="teste" class="form-control">
   <option value="19">carmolandia</option>
                  ↑___.
                      |
jQuery:       ↓---------------↓
data: {teste: $("#teste").val()}
         ↑______.
                |
PHP:     ↓-------------↓
$teste = $_POST['teste']; // valor "19"