Newsgroup: it.comp.lang.javascript
Titolo: problema con campi testo e password

Nuovo problema con javascript con jquery e campi di testo oltre ad un 
problema con campo password.
 
Ho una serie di campi testo in un form. Alcuni sono disabilitati e altri 
editabili.
Non capisco perchè il mio browser con motore web-kit mi faccia vedere i 
campi editabili in giallo e quelli disabilitati invece con lo stile che ho 
assegnato tramite css.
Lo screen-shot può essere più chiaro:
http://tinypic.com/r/ra11lj/5
 
 
Inoltre, il primo campo password in alto contiene la password criptata (è un 
input password).
Con l'icona OCCHIO io posso renderla in chiaro con la seguente funzione 
posizionata a fianco del campo:
 
<a href="#" class="show-hide-pass" 
onclick="document.getElementById('PASSWORD').type='text';$('.show-hide-pass').toggle();" 
title="Mostra/nascondi password">
         <img src="../images/mostra.gif" width="30" height="19" 
alt="Mostra/nascondi password" /></a>
         <a href="#" style="display:none;" class="show-hide-pass" 
onclick="document.getElementById('PASSWORD').type='password';$('.show-hide-pass').toggle();" 
title="Mostra/nascondi password">
         <img src="../images/mostra.gif" width="30" height="19" 
alt="Mostra/nascondi password" title="Mostra/nascondi password" /></a>
 
vorrei toglierla da qui e spostarla nell'header, ma... non so come fare :-((
 
Infine, ultimo problema che mi assilla:
Dall'immagine si notano altri due campi password sotto quello principale, 
che servono a cambiare la password corrente.
Questi si visualizzano cliccando sull'icona a fianco dell'occhio con questo:
 
<a id="slick-slidetoggle" href="#" title="Modifica la password"><img 
src="../images/aggiungi.gif" width="30" height="19" alt="Modifica" 
title="Modifica" /></a>
 
che attiva la funzione in header:
 
$(document).ready(function() {
$('#toggle-div').hide();
$('a#slick-slidetoggle').click(function() {
  $('#toggle-div').slideToggle(600);
  return false;
});
});
 
La cosa che mi fa incazzare non poco è che (si vede in foto) nei campi
risulta esserci già qualcosa, ma non ho idea di cosa sia! Nell'html non
c'è nulla (value=""), quindi è qualcosa che mette lo script, ma dove
cavolo lo prende???
 
l'html della div nascosta è il seguente:
 
<!-- riga nascosta -->
       <div class="riga" id="toggle-div">
        <div class="riga">
         <div class="cella w150" style="color:#e44950;">Nuova 
password:</div>
         <div class="cella">
          <label for="NEWPASSWORD1"></label>
          <input type="password" id="NEWPASSWORD1" name="PASSWORD1" value="" 
size="40" maxlength="50" />
         </div>
        </div>
        <div class="riga">
         <div class="cella w150" style="color:#e44950;">Ripeti 
password:</div>
         <div class="cella">
          <label for="NEWPASSWORD2"></label>
          <input type="password" id="NEWPASSWORD2" name="PASSWORD2" value="" 
size="40" maxlength="50" />
         </div>
        </div>
        <div class="riga">
         <div class="cella w150" style="color:#e44950;">Conferma la 
modifica:</div>
         <div class="cella">
          <label for="NEWPASSWORDOK"></label>
          <input type="checkbox" name="PASSWORDOK" value="OK" />
         </div>
        </div>
       </div>
       <!-- fine riga nascosta -->
 
 
grazie per l'aiuto
Nicola
 

 
http://tinypic.com/r/ra11lj/5
 
 
non funziona il link 
 
 

non funziona il link
 
come non funziona?
prova cosě:
http://oi42.tinypic.com/ra11lj.jpg
 
 
Nicola
 
 

cavolo lo prende???
 
questi due problemi li ho risolti
 
restano le funzioni toggle da spostare nell'header
 
 
-- ciao!
 
...nixs.................................................................
nixs.lucchetto.@lagirandola.it
 
togli la ".SERRATURA." per scrivermi
........................................................................
L'uomo non smette di giocare perché invecchia,
ma invecchia perché smette di giocare.
(George Bernard Shaw) 
 

 questi due problemi li ho risolti
 
È buona norma, per i posteri, scrivere come si è risolto il problema,
nel caso in futuro qualcuno incappi nei tuoi messaggi da una ricerca per
la medesima problematica (non c'è cosa più frustrante che trovare
messaggi di qualcuno che aveva il tuo stesso problema e l'ha risolto
senza dire a nessuno come). :)

senza dire a nessuno come). :)
 
hai sempre maledettamente ragione! :-))
 
Ma il problema non era negli script, ecco perchè non ho postato.
 
Mi vergogno quasi a dirlo...
Siccome nel form ci sono campi password e campi data,
in qualche momento di prova mi sarà capitato di premere SALVA
alla richiesta del browser di salvare l'autocompletamento del modulo
e poi mi sono dimenticato della cosa.
Lascio a te immaginare cosa succedeva! ;-)


 :-((
 
La prossima volta scrivi anche i tentativi che hai fatto, e cosa non ti
è riuscito.

tipo, ma i CSS
 
fatto... ma ora ti devo bacchettare io: è la seconda o terza volta che me lo 
dici,
ma non mi spieghi il motivo ;-)
 
<a href="#" id="show-hide-pass" title="Mostra/nascondi password"></a>
 
Perfetto come sempre, un orologio svizzero!!! :-))


 ma non mi spieghi il motivo ;-)
 
Qui si va un po' OT, perché di JavaScript ha poco – o niente – a che vedere.
I motivi sono tanti, cercherò di fare un sunto comprensibile:
Una pagina web statica si può suddividere in tre componenti principali:
Contenuto, Aspetto, Comportamento. Il Contenuto è dato dall'HTML;
l'Aspetto dai CSS; il Comportamento da JavaScript.
 
Sai che stai facendo qualcosa di poco pulito quando una delle tre cose
cerca di definire anche un altra. Un esempio classico è l'uso di tabelle
per il layout di un sito: il layout fa parte dell'Aspetto, non del
Contenuto. Le tabelle (<table>) andrebbero usate per definire un certo
tipo di Contenuto (dati tabellari), non per definire come "appare" un sito.
 
In un articolo di un giornale su web, una foto è indubbiamente parte del
Contenuto dell'articolo, quindi non c'è alcun problema ad averla
nell'HTML come tag <img>. D'altro canto, tutta l'interfaccia del sito –
ad esempio le icone dei pulsanti – non fanno parte del Contenuto, e
dovrebbero quindi essere definite tramite CSS.
 
Questa è la parte accademica, diciamo. Spero sia chiara. Immagino che la
domanda ora sarebbe "Ok, ho capito come si 'dovrebbe' fare, ma non ho
ancora capito se ci sono dei vantaggi a fare in questo modo".
 
È presto detto. In primo luogo, avendo una buona separazione delle tre
componenti di cui sopra, hai ognuna delle tre molto più "pulite",
"manutenibili", e in un qual modo più indipendenti. Prendiamo il tuo
codice HTML originale:
 
    <a href="#" class="show-hide-pass"
onclick="document.getElementById('PASSWORD').type='text';$('.show-hide-pass').toggle();"
title="Mostra/nascondi password">
        <img src="../images/mostra.gif" width="30" height="19"
alt="Mostra/nascondi password" /></a>
        <a href="#" style="display:none;" class="show-hide-pass"
onclick="document.getElementById('PASSWORD').type='password';$('.show-hide-pass').toggle();"
title="Mostra/nascondi password">
        <img src="../images/mostra.gif" width="30" height="19"
alt="Mostra/nascondi password" title="Mostra/nascondi password" /></a>
 
E confrontiamolo con quello risultante:
 
    <a href="#" id="show-hide-pass" title="Mostra/nascondi password"></a>
 
Indubbiamente questo HTML è più facile da leggere, e quindi da
manutenere in futuro. Pensa inoltre se hai nella pagina diversi elementi
come questo, come apparirà poi la pagina tutta semplificata: la lettura
sarà liscia come l'olio.
 
Un altro vantaggio di tale separazione, è appunto l'indipendenza. Il tuo
JavaScript non "sa" che cos'è l'elemento con id "show-hide-pass" e non
gli importa. Sa solo che al click di quell'elemento deve fare una certa
azione. Il che significa che tu puoi riutilizzare lo stesso file /
codice JavaScript, su di una pagina con un HTML del tutto diverso, ma
che mantiene gli stessi ID (ad esempio, #show-hide-pass e #password nel
tuo caso). Puoi anche modificare la pagina corrente, senza dover metter
mano al codice JavaScript, perché non è "mischiato" in mezzo alla pagina.
Stesso dicasi per il codice JavaScript: puoi modificare il Comportamento
di tale elemento HTML senza dover mettere mano all'HTML, sapendo che
tale comportamento si adatterà automaticamente a tutte le pagine che
hanno gli ID che ti aspetti.
 
E indovina? Questa logica si applica anche ai CSS. Se la separazione tra
Aspetto e Contenuto esiste, puoi cambiare l'aspetto di una pagina
completamente, mantenendo il codice HTML inalterato.
 
Un buon esempio, lo trovi nel classico 
www.csszengarden.com
, che se non
conosci ti consiglio di guardare. È un sito dove puoi vedere lo stesso
codice HTML cambiando solamente i CSS.
 
Un altro vantaggio di avere le immagini nei CSS invece che nell'HTML, è
perché così puoi applicare la tecnica di cui ti ho dato il link
precedentemente, ovvero i CSS Sprite. Ottieni vantaggi a livello di
performance (meno richieste HTTP), e puoi avere diversi "stati" per i
pulsanti praticamente solo con i CSS (non devi usare JavaScript per
rollover o roba del genere).
Inoltre, le immagini contenute nei CSS sono scaricate solo se
effettivamente usate (se esiste un elemento con tale regola applicata, e
che è visibile).
 
Spero che adesso ti sia più chiaro!

Spero che adesso ti sia più chiaro!
 
limpido come acqua di sorgente dello Stelvio!
