onchange() et AJAX

**Zarkoffe** · 09/08/2019, 09h19

Bonjour,
J'ai le code suivant.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
            <div class="form-group col-md-4">
              <label for="Ville">Ville</label>
              <input list="city" id="city-choice" name="city-choice" class="form-control" />
              <datalist id="city">
                <select type="text" class="form-control client_ville" onchange="send_postalcode(this.value)">
                  <?php $list = $bdd->query('SELECT DISTINCT * FROM ville ORDER BY ville_nom ASC');
                  while ($data = $list->fetch()) { ?>
                      <option value="<?php echo $data['ville_nom']; ?>"> <?php echo $data['ville_nom']; ?></option>
                  <?php } $list->closeCursor(); ?>
                </select>
              </datalist>
            </div>
<script>
      function send_postalcode(city_ref){
          var city_ref = $(this).val();
          var load_postalcode = $(this).find('.load_postalcode');
          $.ajax({
            url: "modal_header/Client/ajax/inputpostalcode.php",
            method: "POST",
            data: { city_ref: city_ref }
          })
          .done(function( retour_html ) {
            load_postalcode.html( retour_html );
            console.log( "success ajax client" );
          })
          .fail(function() {
            console.log( "error facture creation ajax" );
          });	
        }
</script>

Puis le fichier inputpostalcode.php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<?php include '../../../../Include/connect.php' ; 
 
    $city_ref  = (array_key_exists('city_ref', $_POST)) ? $_POST['city_ref']: NULL; 
    if ($city_ref) {
        $stmt = $bdd->prepare('
            SELECT * FROM client
            WHERE client_ville = :code
        ');
        $stmt->bindValue(':code', strtoupper($city_ref), PDO::PARAM_STR);
        $stmt->execute();
        if ($donnees = $stmt->fetch(PDO::FETCH_ASSOC)) { ?>
            <input class="form-control client_codepostal_add" type="text" value="<?php echo $donnees['client_codepostal'] ?>" />  
 
        <?php 
        }
    }
?>

Mon problème commence à la 1ère partie du code : je n'ai aucun console.log qui réponds dans ma console, ni celui du done ni celui du fail ( et bien sûr ma de requête post dans l'onglet réseau).
Une idée? merci

**psychadelic** · 09/08/2019, 20h26

c'est parce que tu a mélangé une balise select avec une balise datalist. faut choisir, c'est soit l'une soit l'autre

sinon l’événement oninput fait l'affaire

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
 
  <p>
    <label for="ref-city">Choose a city:</label>
    <input type="text" list="city-names" id="ref-city" />
    <datalist id="city-names"></datalist>
    ZIP : <span id="ZIP-code"></span>
  </p>
 
  <script>
    const CityZIP = [ { City:'El Paso TX'        , ZIP:'79936' }
                    , { City:'Los Angeles CA'    , ZIP:'90011' }
                    , { City:'Chicago IL'        , ZIP:'60629' }
                    , { City:'Norwalk CA'        , ZIP:'90650' }
                    , { City:'Bell Gardens CA'   , ZIP:'90201' }
                    , { City:'Houston TX'        , ZIP:'77084' }
                    , { City:'Fontana CA'        , ZIP:'92335' }
                    , { City:'Brownsville TX'    , ZIP:'78521' }
                    , { City:'Katy TX'           , ZIP:'77449' }
                    , { City:'Mission TX'        , ZIP:'78572' }
                    , { City:'Hawthorne CA'      , ZIP:'90250' }
                    , { City:'South Gate CA'     , ZIP:'90280' }
                    , { City:'Brooklyn NY'       , ZIP:'11226' }
                    , { City:'Long Beach CA'     , ZIP:'90805' }
                    , { City:'Pacoima CA'        , ZIP:'91331' }
                    , { City:'Lakewood NJ'       , ZIP:'08701' }
                    , { City:'San Juan PR'       , ZIP:'00926' }
                    , { City:'Pittsburg CA'      , ZIP:'94565' }
                    , { City:'Bronx NY'          , ZIP:'10467' }
                    , { City:'Westminster CA'    , ZIP:'92683' }
                    , { City:'Grand Prairie TX'  , ZIP:'75052' }
                    , { City:'Sylmar CA'         , ZIP:'91342' }
                    , { City:'Santa Ana CA'      , ZIP:'92704' }
                    , { City:'Lawrenceville GA'  , ZIP:'30044' }
                    , { City:'New York NY'       , ZIP:'10025' }
                    , { City:'Riverside CA'      , ZIP:'92503' }
                    , { City:'Anaheim CA'        , ZIP:'92804' }
                    , { City:'Pharr TX'          , ZIP:'78577' }
                    , { City:'Dallas TX'         , ZIP:'75217' }
                    , { City:'Rialto CA'         , ZIP:'92376' }
                    , { City:'Bakersfield CA'    , ZIP:'93307' }
                    , { City:'Chula Vista CA'    , ZIP:'91911' }
                    , { City:'La Puente CA'      , ZIP:'91744' }
                    , { City:'Mckinney TX'       , ZIP:'75070' }
                    , { City:'Fresno CA'         , ZIP:'93722' }
                    , { City:'Hesperia CA'       , ZIP:'92345' }
                    , { City:'Oxnard CA'         , ZIP:'93033' }
                    , { City:'Palmdale CA'       , ZIP:'93550' }
                    , { City:'Watsonville CA'    , ZIP:'95076' }
                    , { City:'Corona NY'         , ZIP:'11368' }
                    , { City:'Antioch TN'        , ZIP:'37013' }
                    , { City:'Elmhurst NY'       , ZIP:'11373' }
                    ] 
 
    const CityNames = document.querySelector('#city-names')
      ,   CityRef   = document.querySelector('#ref-city')
      ,   ZIPcode   = document.querySelector('#ZIP-code')
 
    for(let cz of CityZIP)
      {
      let nOpt         = document.createElement('option')
      nOpt.value       = nOpt.textContent = cz.City
      CityNames.append(nOpt)
      }
 
    CityRef.oninput=_=>
      {
      let cz = CityZIP.find(e=>e.City===CityRef.value)
      ZIPcode.textContent = cz?cz.ZIP:''
      }
 
    </script>
</body>
</html>

( j'ai pris un échantillon de ZIP codes USA, car plus simple à constituer via recherche Gµµgle*)

onchange() et AJAX

AJAX

Discussions similaires

Partager

Partager