valorizzare una serie di campi input selezionando una prima select con ajax

**newbobotime** · 19-11-2020, 10:38

Ciao Raga, urge aiutino

inizio col chiedere scusa, dopo diversi anni per esigenza sono tornato a mettere mani sul codice,
inutile dire che ricordo molto poco.

Spero di essere nel forum corretto, comunque;

Mi trovo alle prese con un form, vorrei valorizzare una serie di input direttamente selezionando una prima select che si popola dinamicamente (PHP, MySQL).

Vorrei valorizzare alcuni campi input tramite selezione di questa prima select tramite ajax, ma non ricordo come prelevare ed inserire i valori, qualcuno riesce a spiegarmelo con qualche semplice esempio ?

Thanks!

**KillerWorm** · 19-11-2020, 15:19

Ciao, sì, forum corretto ma, prima di proporti delle soluzioni, posso chiederti di specificare meglio il contesto?

Cosa intendi per "alcuni campi input" e qual è la mole di dati che devi recuperare dopo la selezione?
Te lo chiedo perché se si tratta di pochi singoli dati, relativi all'opzione scelta nel select, potrebbe essere più semplice usare qualche attributo data in modo da tenerli pronti già sulla pagina senza scomodare AJAX.

**newbobotime** · 20-11-2020, 11:43

Grazie KillerWorm della risposta,
in sostanza ho un form con una select iniziale e altri campi input.
La select viene popolata dinamicamente (PHP-MySQL) e mi piacerebbe che tramite la selezione utente su questa select far popolare (immagino con chiamata asincrona al DB con valore prelevato dalla select) gli altri campi 4 di input.

Spero di essermi spiegato

**newbobotime** · 20-11-2020, 11:47

Presumo che la logica sia simile al seguente tutorial; https://www.yourinspirationweb.com/2...-php-e-jquery/
io invece che popolare una seconda select vorrei popolare in un colpo solo 4 campi di input

**KillerWorm** · 20-11-2020, 12:10

Ok la tua idea mi era chiara ma ti chiedevo se i dati dei 4 input fossero relativamente pochi. In tal caso potrebbe essere forse più semplice e rapido precaricarli assieme alla pagina, magari memorizzandoli in qualche attribuito data relativo alle singole option in modo tale da leggerli direttamente al momento della selezione, e quindi popolare i 4 input senza bisogno di passare per la chiamata AJAX.

**newbobotime** · 20-11-2020, 13:04

Originariamente inviata da KillerWorm

Ok la tua idea mi era chiara ma ti chiedevo se i dati dei 4 input fossero relativamente pochi. In tal caso potrebbe essere forse più semplice e rapido precaricarli assieme alla pagina, magari memorizzandoli in qualche attribuito data relativo alle singole option in modo tale da leggerli direttamente al momento della selezione, e quindi popolare i 4 input senza bisogno di passare per la chiamata AJAX.

Perdona ma non ho capito

Come faccio a precaricarli se i dati che devono andare a popolare i 4 campi di input devono essere prelevati dal DB tramite chiamata con valore passato dalla prima select?

**KillerWorm** · 20-11-2020, 14:23

I valori della prima select li avrai già tutti nella serie di option al momento della creazione della pagina. Potresti quindi fare un ciclo in PHP per interrogare opportunamente il db in base a ciascuno di quei valori e creare quindi la pagina già con tutti i relativi dati che userai poi per popolare gli input ad ogni selezione. Ma, ripeto, questa potrebbe essere una valida soluzione se la mole di dati (cioè i 4 dati per tutte le option presenti) è relativamente ristretta.

**newbobotime** · 20-11-2020, 15:07

Umh...

assumiamo che imposto la query con le opportune relazioni tabelle e vado a popolare la select ottenendo già tutti i dati che servono per andare a popolare i restanti 4 input interessati.

Mi spieghi come faccio a passare ed inserire il dato (ovviamente diverso per ogni campo di input) nei 4 campi alla selezione dell'utente?

**KillerWorm** · 20-11-2020, 15:23

Sì certo, ti faccio un esempio al volo, dimmi solo se usi/puoi usare jQuery o se vuoi fare in puro JavaScript.

**KillerWorm** · 20-11-2020, 16:09

Qui un semplice esempio in puro JavaScript:

codice:

<!DOCTYPE HTML>
<html lang="it">
  <head>
    <title>Esempio</title>
  </head>
  <body>
    <label for="prodotti">Scegli prodotto:</label>
    <select id="prodotti">
      <option value="" selected>--</option>
      <option value="mela"   data-disponibile="10 sacchetti" data-prezzo="1.50" data-consegna="1" data-trasporto="si">Mela</option>
      <option value="pera"   data-disponibile="3 cassette"   data-prezzo="2.00" data-consegna="3" data-trasporto="no">Pera</option>
      <option value="mango"  data-disponibile="20 unità"     data-prezzo="3.20" data-consegna="2" data-trasporto="no">Mango</option>
      <option value="limone" data-disponibile="8 cassette"   data-prezzo="1.00" data-consegna="3" data-trasporto="si">Limone</option>
    </select>
    <hr>
    <label>Disponibilità: <input id="disponibile"></label>
    <br><label>Prezzo articolo: <input id="prezzo"></label>
    <br><label>Consegna in: <input id="consegna"> giorni</label>
    <br><label>Spese trasporto comprese:
      <select id="trasporto">
        <option value="" selected>--</option>
        <option value="si">Sì</option>
        <option value="no">No</option>
      </select>
    </label>
    
    <script>
      var selProdotti = document.querySelector('#prodotti');
      var inpDisponibile = document.querySelector('#disponibile');
      var inpPrezzo = document.querySelector('#prezzo');
      var inpConsegna = document.querySelector('#consegna');
      var selTrasporto = document.querySelector('#trasporto');
      
      selProdotti.addEventListener('change', function(){
        var opt = this.options[this.selectedIndex];
        inpDisponibile.value = opt.dataset.disponibile || '';
        inpPrezzo.value      = opt.dataset.prezzo || '';
        inpConsegna.value    = opt.dataset.consegna || '';
        selTrasporto.value   = opt.dataset.trasporto || '';
      });
    </script>
  </body>
</html>

Discussione: valorizzare una serie di campi input selezionando una prima select con ajax

Strumenti discussione

Ricerca discussione

Visualizza

valorizzare una serie di campi input selezionando una prima select con ajax

Permessi di invio