campi che mi compilino in automatico un'area della pagina

[ky]

ciao a tutti! avrei bisogno come sempre del vostro prezioso aiuto...
ho creato una pag. in cui ci sono dei testi (testi normali, non input text o textarea) che dovrebbero variare a seconda dei dati che inserisco in un form...il tutto senza passare dal server...xké è solo una specie di anteprima...
Es.: io ho nella mia pag. htm

Nome Cognome
CAP Via Citta' (Provincia)

e ognuna di queste parole dovrebbe essere compilata con i dati che inserisco in un form, aggiornabile ogni volta che clicco sul bottone [OK]:
Nome: ___________
Cognome: ________
CAP: ____________
Via: ____________
Citta':__________
Provincia:_______
[OK]

Spero di essermi spiegata bene...
e spero tanto che possiate aiutarmi...x favore!!!
Grazie anticipatamente in ogni caso!

[Mich_]

Con JS puoi riscrivere un <div> (o <span>, come preferisci).

Quindi si tratta di far partire una funzione ad ogni blur dei campi del form, che crei la stringa da scrivere e la copi nel <div> .

Esempio:
<div id="modificabile">
Nome Cognome

via

CAP Citta` (Provincia)
</div>

<form ...>
<input name="nome" onblur="copia(this.form);" />
<input name="cognome" onblur="copia(this.form);" />
<input name="cap" onblur="copia(this.form);" />
<input name="via" onblur="copia(this.form);" />
<input name="citta" onblur="copia(this.form);" />
<input name="prov" onblur="copia(this.form);" />
</form>

Nella head della pagina ci dovra` essere uno script:

<script type="text/javascript">
function copia(ff) {
  var str = "";
  str += ff.nome.value + " ";
  str += ff.cognome.value + "
";
  str += ff.via.value + "
";
  str += ff.cap.value + " ";
  str += ff.citta.value + " ";
  str += "(" + ff.prov.value + ")";

  document.getElementById('modificabile').innerHTML = str;
}
</script>

Ciao
Michele

[ky]

Grazieeeeeeeeeee!
Sei assolutamente un MITOOOO!
Funziona perfettamente!
Ancora 100000 grazie!

[ky]

se io volessi formattare i testi durante il passaggio dal form all'area di richiamo...come posso fare?
io pensavo di usare i css...pero' non ho capito SE posso e dove inserire il class=""..
grazie!! :gren:

[ky]

aiuto... :quote: :quote:

[Mich_]

Dipende da cosa intendi per formattare.

Puoi comunque modificare la classe cui appartiene il div con:
document.getElementById('modificabile').className = 'NUOVACLASSE';

dove NUOVACLASSE e` definito come classe nel CSS.

Ciao
Michele

[ky]

Il problema è che io volevo modificare ad es. il tipo di carattere a seconda del campo...
Es. il campo nome e cognome un font diverso, magari + grande e grassetto...
quindi avrei bisogno di poter assegnare una classe a tutte le stringhe...
ad es. si puo' fare una cosa del genere?

str += ff.nome.value + "class='nome'";

mmm...mi sa di no...pero' qualcosa del genere...
proprio per quel motivo io ho messo tutti i risultati dentro a dei div con una classe css diversa, ma non funge...

<div id="modificabile">

<div class="nome">Nome</div>
<div class="cognome">Cognome</div>
<div class="via">Via</div>
<div class="cap">Cap</div>
<div class="citta">Città</div>
<div class="prov">Provincia</div>
</div>

Grazie!!

[Mich_]

Se non vuoi fare una cosa fatta bene, puoi anche inserire i tag di formattazione dentro il div:

<script type="text/javascript">
function copia(ff) {
  var str = "";
  str += "<font ...>" + ff.nome.value + "</font> ";
  str += "<font ...>" + ff.cognome.value + "</font>
";
  str += "<font ...>" + ff.via.value + "</font>
";
  str += "<font ...>" + ff.cap.value + "</font> ";
  str += "<font ...>" + ff.citta.value + " ";
  str += "(" + ff.prov.value + ")</font>";

  document.getElementById('modificabile').innerHTML = str;
}
</script>

Solo che ottieni un codice deprecabile.

La cosa fatta bene sarebbe:

<div id="nomecogn">Nome Cognome</div>
<div id="indir">via</div>
<div id="capcit">CAP Citta` (Provincia)</div>

E poi il JS:

<script type="text/javascript">
function copia(ff) {
document.getElementById('nomecogn').innerHTML = ff.nome.value + " " + ff.cognome.value + "
";
document.getElementById('indir').innerHTML = ff.via.value;
document.getElementById('capcit').innerHTML = ff.cap.value + " " + ff.citta.value + " " + "(" + ff.prov.value + ")";
}
</script>

Ciao
Michele

[ky]

grazie Mich!!! fantastico, ora funziona benissimo! grazie
p.s. ho optato x la seconda opzione, cioè ho fatto le cose per bene :gren:

ah...ancora una cosa...

Nel caso che qualche campo non venisse compilato...si puo' fare in modo che non resti lo spazio vuoto e che quello della riga successiva slitti su di un posto?
scusa se approfitto della tua disponibilità...ma col tuo aiuto sto imparando moltissimo!

[ky]

Nel caso che qualche campo non venisse compilato...si puo' fare in modo che non resti lo spazio vuoto e che quello della riga successiva slitti su di un posto?

qualcuno mi puo' ancora aiutare per questa cosa x favore?
grazzzzzzzieeee!