Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Modifica in tempo reale di un input text

    Buongiorno,

    Suppongo che per quello che vorrei fare, devo ricorrere al JavaScript, perciò avrei bisogno del vostro aiuto.
    Ho provato a cercare una soluzione al mio problema ma non l'ho trovata.

    In una pagina HTML ho uno script PHP per l'inserimento dati, vi posto il codice:

    codice:
    <form method='post' action='pagina.php'>
       Commessa:
          <select style='min-width: 100px;' name='idCommessa'>
                                                            ".showSelecOptionCommesse()."
          </select>
       Ore (hh:mm):
          <select style='min-width: 50px;' name='oreHH'>
                                                            ".showSelecOptionOreHH()."
          </select>
          <select style='min-width: 50px;' name='oreMM'>
                                                            ".showSelecOptionOreMM()."
          </select> &nbsp;
       Tipo di costo:
          <input type='text' name='tipoCosto' style='width: 70px;>&nbsp;
       Note:
          <input type='text' name='note'>&nbsp; &nbsp;
          <input id='submitInsert' type='submit' name='submitInsert' value='' title='Inserisci'>
    </form>
    Naturalmente, per ogni select genero gli "option value" di cui ho bisogno.
    Es: "<option value='".$row['idCommessa']."'>".$row['nomeCommessa']."</option>"

    Quello che vorrei fare è questo:
    mentre l'utente compila il form, se seleziona qualcosa dal select 'IdCommessa', io vorrei riempire in tempo reale il campo 'tipoCosto' con i primi tre caratteri del campo 'nomeCommessa'.

    Grazie

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,780
    Ciao, sì, va usato JavaScript. Tieni comunque conto che puoi fare in mille modi.

    Prima di tutto ti consiglio di dare un id a quegli elementi che intendi manipolare via script, così da facilitare l'operazione.

    Se utilizzi già jQuery sul tuo documento, l'ideale sarebbe sfruttarlo anche per elaborare questa operazione. Qui ti indico comunque un modo in semplice JavaScript.

    Dovrai utilizzare l'evento change dell'elemento select. Volendo puoi utilizzare il gestore onchange da inserire direttamente come attributo sul tag <select> e da cui richiamare, ad esempio, una tua funzione. Io personalmente non amo questo sistema, ma preferisco separare totalmente lo script dal codice HTML per una questione di ordine e stile. In questo caso però ti indico l'approccio più immediato, poi vedi tu come meglio organizzarti la cosa.

    Per recuperare il testo dell'elemento option selezionato puoi utilizzare la proprietà selectedIndex (dell'elemento select) e quindi la proprietà text (della relativa option).

    Ti basterà poi fare un submit per recuperare solo i primi tre caratteri.

    Qui un esempio applicato al tuo caso:
    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
    
        <script type="text/javascript">
          function aggiornaTipo(me){
                    document.getElementById('tipoCosto').value = me.options[me.selectedIndex].text.substring(0,3);
                }
        </script>
            
      </head>
      <body>
            <form method='post' action='pagina.php'>
                 Commessa:
                        <select style='min-width: 100px;' name='idCommessa' onchange="aggiornaTipo(this)">
                            
                            <option value='10'>Pippo</option>
                            <option value='20'>Pluto</option>
                            <option value='30'>Paperino</option>
                        </select>
    
                 Tipo di costo:
                        <input type='text' name='tipoCosto' style='width: 70px;' id='tipoCosto'>
    
            </form>
      </body>
    </html>
    Chiaramente è solo un esempio da cui partire ma, nel caso, potrebbe essere migliorato per adeguarlo opportunamente alle tue esigenze.


    PS: occhio a questa riga nel codice che hai postato, noto che manca un apice alla fine:
    codice:
    <input type='text' name='tipoCosto' style='width: 70px;>
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Grazie KillerWorm.

    La tua soluzione era proprio quello che cercavo.
    Ed è funzionante!

    Grazie, alla prossima.

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,780
    Bene, mi fa piacere.

    Faccio comunque un errata corrige del mio precedente post:
    Ti basterà poi fare un submit per recuperare solo i primi tre caratteri.
    Chiaramente volevo scrivere substring. E' stato un lapsus

    Buon proseguimento
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.