ajax select based on another select

Question

I have a first select which is working perfectly and displays two fields and one other select related with what the user chose.

So, the second select is also filling perfectly with other choices and the user have to click again on an option.

And then, 4 others fields have to be displayed, but this step doest not work .. My fields are not displayed ..

It not goes inside of my second ajax function. I think it's beacause at the begining, my second select is not created.

I know why but i do not know how to do ..

I hope you will help me. ;)

Let see my code.

My ajax :

// 
//FIRST SELECT 
//

jQuery(document).ready(function() {
$('#referenceProduit').change(function(){
    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat
    var req=$('#referenceProduit').val();

    //requête ajax, appel du fichier function.php
    $.ajax({
        type: "GET",
        url: "include/php.php?referenceProduit="+req,
        dataType : "html",
        //affichage de l'erreur en cas de problème
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown);
        },
        //function s'il n'y a pas de probleme
        success:function(data){
            //On affiche la réponse du serveur
            $('.produit').empty();
            $('.produit').prepend(data);
            $('input[name=designation]').val($('input:hidden[name=designation]').val());
            $('input[name=prix]').val($('input:hidden[name=prix]').val());
        }
    });
});

//
//SECOND SELECT
//

$('#nomClient').change(function(){

    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat
    var req2=$('#referenceProduit').val();
    var req=$('#nomClient').val();
    //requête ajax, appel du fichier function.php
    $.ajax({
        type: "GET",
        url: "include/php.php?nomClient="+req+"&referenceProduit="+req2,
        dataType : "html",
        //affichage de l'erreur en cas de problème
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown);
        },
        //function s'il n'y a pas de probleme
        success:function(data){
            //On affiche la réponse du serveur
            $('.client').empty();
            $('.client').prepend(data);
            $('input[name=nom]').val($('input:hidden[name=nom]').val());
            $('input[name=prenom]').val($('input:hidden[name=prenom]').val());
            $('input[name=telephone]').val($('input:hidden[name=telephone]').val());
            $('input[name=mail]').val($('input:hidden[name=mail]').val());
        }
    });
});
}); 

My PHP :

//
//FIRST SELECT (display 2 fileds and 1 select)
//    

if(isset($_GET['referenceProduit'])){
    $id = $_GET["referenceProduit"];
    $res = $pdo->getLeProduitAjax($id);
    $res2 = $pdo->getClientByProduit($id);

    foreach ($res as $key => $value) {
        echo '<input type="hidden" name="'.$key.'" value="'.$value.'"/>';
    }

    echo '
        <label for="designation" class="col-sm-1 control-label">Désignation</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="designation" id="designation" readonly>
        </div>
        <label for="prix" class="col-sm-1 control-label">Prix </label>
        <div class="input-group col-sm-1">
            <input type="text" class="form-control" aria-describedby="basic-addon2" name="prix" id="prix" readonly>
            <span class="input-group-addon" id="basic-addon2">€</span>
        </div><br/><br/>
        ';


    echo '
        <label for="nomClient" class="col-sm-1 control-label">Client</label>
        <div class="col-sm-2">
            <select class="form-control" name="nomClient" id="nomClient">';
            foreach($res2 as $unClient){
                echo '<option value="'. $unClient['id'].'">'. $unClient['nom'].'</option>';
            }
    echo '</select>
        </div>
        ';
}

 //
 //SECOND SELECT - SHOULD DISPLAYS 4 FIELDS
 //

 if(isset($_GET['nomClient'])){
    $id = $_GET["referenceProduit"];
    $id2 = $_GET["nomClient"];

    $res = $pdo->getContactByClient($id2, $id);

    foreach ($res as $key => $value) {
        echo '<input type="hidden" name="'.$key.'" value="'.$value.'"/>';
    }

    echo '
        <div class="form-group">
          <label for="nomContact" class="col-sm-1 control-label">Nom</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" name="nom" id="nom" readonly>
          </div>
          <label for="prenomContact" class="col-sm-1 control-label">Prénom</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" name="prenom" id="prenom" readonly>
          </div>
        </div>
        <div class="form-group">
          <label for="emailContact" class="col-sm-1 control-label">Email</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" name="email" id="email" readonly>
          </div>
          <label for="telephoneContact" class="col-sm-1 control-label">Téléphone</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" name="telephone" id="telephone" readonly>
          </div>
        </div>
      </div>
    ';
}

MY HTML :

    <div class="form-group">
  <label for="referenceProduit" class="col-sm-1 control-label">Reference</label>
  <div class="col-sm-2" id="listeProduit">
    <select class="form-control" name="referenceProduit" id="referenceProduit">
      <option selected="selected" disabled="disabled">Choisir</option>
      <?php foreach($lesProduits as $unProduit){?>
      <option value="<?php echo $unProduit['id'];?>"><?php echo $unProduit['reference']?></option>
      <?php } ?>
    </select>
  </div>
</div>
<div class="form-group">
  <div class="produit"></div>
</div><br/><br/>
<div class="form-group">
  <div class="nomClient"></div>
</div>

Answer 1

Since you are adding the id nomClient dynamically and hence events will not be attached to it and directly calling change on it will not work.

So, instead of this:

$('#nomClient').change(function(){});

Try this:

$(document).on('change','#nomClient',function(){});

Answer 2

You probably need event delegation: The events are not bound to your second select because at the moment of binding (on page load) it does not exist yet.

You can do that by changing this:

$('#nomClient').change(function(){

To something like this:

$('body').on('change', '#nomClient', function(){

Now this event will trigger even if the #nomClient element did not exist yet when the page was loaded.