Copiare valori all'interno di una pagina WEB

**wympy** · 13-01-2006, 12:31

Buongiorno a tutti,

vorrei fare in modo che il contenuto di una text box, al momento del click di un pulsante, appaia in un punto qualsiasi della pagina, semplicemente copiando il contenuto testuale che contiene.

La stessa cosa vorrei farla premendo altri 3 pulsanti, al cui click scompare il testo precedente e appare quello della text box associata. Per questi 3 pulsanti la text box a loro associata dovrebbe essere nascosta.

Qualcuno potrebbe aiutarmi?

**Mich_** · 13-01-2006, 13:08

Non so cosa intendi per "text box".

In questa risposta suppongo sia un <div> che a sua volta contiene un

(ma da come lo descrivi potrebbe anche essere un campo di tipo text).

La cosa piu` semplice e` che il <div> esista gia`, e al click venga solo mostrato/nascosto.

Il tuo problema si puo` risolvere con tre tali textbox.

Il codice JS per far apparire / sparire un div e`:
document.getElementByIt('ID_OGGETTO').style.displa y = 'block';
document.getElementByIt('ID_OGGETTO').style.displa y = 'none';

dove ID_OGGETTO e` un identificativo unico nel documento ed e` definito da:
<div id="ID_OGGETTO">

Se la textbox deve sovrapporsi al resto della pagina, dovra` avere nel CSS:
position: absolute;
top: ...px;
left: ...px;

In caso contrario si vedra` esattamente dove e` stata posizionata, spostando il resto in giu` (o a destra se c'e` il float:left

**wympy** · 13-01-2006, 13:19

Ciao,

per 'text box' intendo un campo di testo dove un utente ci scrive quel che vuole, seleziona un pulsante e all'interno della stessa pagina compare quello che lui a scritto nella text box.

Ammetto di non essere stato chiaro io all'inizio, sorry.

**wympy** · 13-01-2006, 15:47

Ciao Mich_,

ho provato a far apparire e nasconder il contenuto di <div> associando ad ogni link l'evento onClick che genera il codice JS.

Vorrei però che quando clicco su un pulsante mi appaia in un altro <div> il contenuto della casella di testo; come lo posso fare?

Ho provato ad associare l'evento onClick al bottone ma non mi copia nessun contenuto che ho scritto nella casella di testo.

**Mich_** · 16-01-2006, 10:51

Allora ecco come puoi fare:

Ti prepari nella pagina un
<div id="opzionale" style="display:none;"> </div>
(nota: deve esserci almeno uno spazio)

Poi in un form ci metti

codice:

:
<form ...>
<input type="text" ... onchange="document.getElementById('opzionale').innerHTML=this.value;" />
<input type="checkbox" onclick="document.getElementById('opzionale').display=this.checked?'block':'none';" />
</form>

**wympy** · 16-01-2006, 13:31

Ciao Mitch,

ti ringrazio per la disponibilità; ho provato ha inserire il codice che mi hai suggerito.

Nel mio esempio ho sostituito

codice:

<input type="checkbox" onclick="document.getElementById('opzionale').display=this.checked?'block':'none';" />

con

codice:

<input type="button" onclick="document.getElementById('opzionale').display=this.checked?'block':'none';" />

pero non riesco a farlo funzionare

**fcaldera** · 16-01-2006, 13:44

prova a mettere tra parentesi this.checked

...(this.checked)?....

poi ti manca lo style.

....('opzionale').style.display

infine controlla che il div 'opzionale' sia definito prima di cambiargli lo style.

**wympy** · 16-01-2006, 15:23

Non ne vuole proprio sapere di funzionare...

Posto il codice

codice:

<head>
<style type="text/css">
#opzionale {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: italic;
	color: #CCCCCC;
}
</style>
</head>

<body>
<div id="opzionale" style="display:none;"> </div> 
<form>
<input name="testo1" type="text" id="testo1" onchange="document.getElementById('opzionale').innerHTML=this.value;" />
<input name="btn" type="button" onclick="document.getElementById('opzionale').style.display=(this.checked)?'block':'none';" value="Inserisci" />
</form>
</body>

**Mich_** · 16-01-2006, 16:00

Be ... non esiste il checked per un button. Io avevo usato un campo checkbox.

Se vuoi usare un button, il JS diventa (ad esempio):
onclick="var op=document.getElementById('opzionale'); op.style.display=(op.style.display=='none')?'block ':'none';"

**wympy** · 16-01-2006, 18:17

Grazie Mitch adesso funziona...

Adesso quando seleziono il button "Inserisci" mi compare all'interno del <div> opzionale il testo contenuto nella casella di testo "testo1".

Se dopo aver inserito un valore ne riscrivo un'altro e premo "inserisci" la prima volta mi cancella quello precedente contenuto nel <div> e la seconda volta che premo "inserisci" mi riporta il contenuto aggiornato della casella di testo.

Se non richiede troppo tempo si potrebbe far si che quando inserisco un nuovo valore me lo vada ad aggiornare subito nel <div> ?

codice:

<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#opzionale {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-style: italic;
	color: #CCCCCC;
}
</style>
</head>

<body>
<div id="opzionale" style="display:none;"> </div> 
<form>
<input name="testo1" type="text" id="testo1" onchange="document.getElementById('opzionale').innerHTML=this.value;" />

<input name="btn" type="button" onclick="var op=document.getElementById('opzionale'); op.style.display=(op.style.display=='none')?'block':'none';" value="Inserisci" />
</form>
</body>

Discussione: Copiare valori all'interno di una pagina WEB

Strumenti discussione

Ricerca discussione

Visualizza

Copiare valori all'interno di una pagina WEB

Permessi di invio