HOME
Home
Guida HTML
Contatti

AGGIUNGERE AL VOLO UN CAMPO DI TESTO
Ecco l'esempio funzionante:

Quale strumento suoni?



 

Si possono scegliere uno o più strumenti dalla lista, e in particolare, se si sceglie Altro, compare una casella di testo dove poter scrivere lo strumento; se poi si aggiorna il modulo, oppure si toglie il segno di spunta da Altro, tale casella scompare.

SPIEGAZIONI

Si scrive il codice per il form normalmente, tranne che
  1. nel pulsante di controllo Altro, si aggiunge il codice che permette di visualizzare il campo di testo. Tale campo di testo sarà inserito in un div il cui identificativo è qui:

    <input type="checkbox" name="Strumento" value="altro" OnClick="aggiungi()"> <label>Altro </label> <div name='qui' id = 'qui'> </div>;

  2. si modifica così il pulsante Cancella, di tipo reset: <input type="reset" name="Cancella" value="CANCELLA" OnClick="Aggiorna()">.
Ecco il codice per il form:

Ecco il codice javascript:

<script type="text/javascript">
var nuovo = ''
function aggiungi () {
if (nuovo==''){
  nuovo += '<input type="text" value="Scrivi qui lo strumento" 
            name="diverso" maxlength=15 size=20>
            OnClick="this.focus(); this.select()"'
  }
else {nuovo = ''}
 document.getElementById('qui').innerHTML = nuovo;
}
function Aggiorna () {
nuovo = ''
 document.getElementById('qui').innerHTML = nuovo;
}
</script>

Questa pagina fa parte della sezione TRUCCHI E MALIZIE . La domanda (numero 58) era:
- Ho creato un form con un modulo di iscrizione ma ho trovato un piccollo "ostacolo" il mio form parla di musica e chiedo (a chi compila il form) quale strumento suona.
Ho inserito una lista che (per esempio s1, s2, s3, s4, s5, altro). Quel "altro" sta per altro strumento. Vorrei che se scelgo quell'opzione mi venisse fuori una casella dove l'utente iserisca lo strumento suonato da lui.
es: se Mario suona il piano e nella lista c'è scritto tromba, sax, batteria, clarinetto e altro, Mario cliccando su altro non solo mi dice che suona un "altro" strumento ma sotto gli compare una casella che lui dentro possa scrivere "piano".
Come devo fare??? Grazie da Mattia -

METODI E PROPRIETA' USATI
innerHTML
Proprietà che può essere usata per cambiare al volo il vostro documento HTML senza ricaricarlo.
Deve essere usato insieme a document.getElementById per identificare l'elemento HTML da cambiare.
getElementById()
permette di riferirsi ad un qualsiasi oggetto della pagina, nel nostro caso un div, tramite il suo id, nel nostro caso "qui"
if ... else
Se il div è vuoto deve essere aggiunto il campo; se invece nel div è stato aggiunto il campo, e si toglie la spunta da Altro il campo deve essere cancellato.
this.focus(); this.select()
Al clic del mouse viene selezionata la scritta e ci si può scrivere sopra direttamente senza doverla cancellare.
NOTE
  1. Se invece di div si usa span il campo viene scritto di fianco.
  2. Conviene stabilire l'altezza del fieldset per non far spostare il testo quando viene aggiunto il campo.
  3. In action="Mailto:...", al posto dei puntini, sostituire il proprio indirizzo di posta elettronica.
Scarica la pagina con il codice completo

Vuoi rilassarti? Gioca gratis a CRUCIPIXEL UN SUDOKU PER UN GIORNO IL GIOCO DELLE COPPIE ... i nostri ultimi giochi!