problema con checkbox

**epescol** · 17-01-2006, 20:53

In una form al click di 1 checkbox vengono visualizzate ulteriori opzioni.

Il problema: quando clicco la checkbox, questa non resta cliccata:

codice:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function ExpandDisp(id) 
{ 
     var style; 
     if (arguments.length != 1) 
     throw new Error("function ExpandDisp() incorrectly called"); 
     style = document.getElementById(id).style; 
     style.display = ((style.display == "none") ? "block" : "none" ); 
     return false; 
}
</script>
</head>
<body>
  <form name="form1" method="post" action="">
    <input name="checkbox" type="checkbox" value="ulteriori_opzioni" onClick="return ExpandDisp('Layer2');">
ulteriori opzioni
  <div id="Layer2" style="display:none;">
    <TABLE border="0" cellpadding="3" cellspacing="1" width="510" bgcolor="D1D3D4">
      <TR bgcolor="#99CCCC">
        <TD valign=top><input name="textfield1" type="text" value="opzione1"></TD>
        </TR>
    </TABLE>
    

  </div>
  <div id="Layer3">
    <TABLE border="0" cellpadding="3" cellspacing="1" width="510" bgcolor="D1D3D4">
      <TR bgcolor="#99CCCC">
        <TD valign=top><input name="textfield2" type="text" value="opzione2"></TD>
      </TR>
    </TABLE>
  </div>
  </form>
</body>
</html>

Qualche consiglio dove sbaglio?

Grazie

**lucalucius** · 17-01-2006, 21:03

return non serve.

codice:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function ExpandDisp(id) 
{ 
     var style; 
     if (arguments.length != 1) 
     throw new Error("function ExpandDisp() incorrectly called"); 
     style = document.getElementById(id).style; 
     style.display = ((style.display == "none") ? "block" : "none" ); 
     return false; 
}
</script>
</head>
<body>
  <form name="form1" method="post" action="">
    <input name="checkbox" type="checkbox" value="ulteriori_opzioni" onClick="ExpandDisp('Layer2');">
ulteriori opzioni
  <div id="Layer2" style="display:none;">
    <TABLE border="0" cellpadding="3" cellspacing="1" width="510" bgcolor="D1D3D4">
      <TR bgcolor="#99CCCC">
        <TD valign=top><input name="textfield1" type="text" value="opzione1"></TD>
        </TR>
    </TABLE>
    

  </div>
  <div id="Layer3">
    <TABLE border="0" cellpadding="3" cellspacing="1" width="510" bgcolor="D1D3D4">
      <TR bgcolor="#99CCCC">
        <TD valign=top><input name="textfield2" type="text" value="opzione2"></TD>
      </TR>
    </TABLE>
  </div>
  </form>
</body>
</html>

**epescol** · 17-01-2006, 21:17

grazie 1000

posso aproffittare per un suggerimento per svuotare i valori dei campi, qualora la checkbox viene disattivata?

Tks

**epescol** · 17-01-2006, 21:25

.... questo può andare

codice:

onClick="ExpandDisp('Layer2');if(this.checked==false){document.form1.textfield1.value='';}"

oppure si potrebbe semplificare....

**lucalucius** · 17-01-2006, 21:48

Puoi anche tralasciare document. perchè tanto il documento (X)HTML della pagina web è l'unico oggetto document presente nella finestra del browser, ma il risulato è irrilevante.

**epescol** · 17-01-2006, 21:58

grz

... per mettere il codice in una funzione (dato che viene utilizzata + volte all'interno della form:

codice:

function cancella_valore(id) 
{ 
if(this.checked == false)
{
form1.elements[id].value == '';
}
}

..... non funzia

..... non dà errore

**seed_squall_it** · 18-01-2006, 01:22

Non funziona per vari motivi. Primo: usi this all'interno della funzione. This è una parola chiave che serve a riferirsi all'oggetto da cui "parte" un'istruzione. Ovviamente, this ha senso se inserito in un'istruzione "in linea" all'interno dell'oggetto stesso, altrimenti, come nel tuo caso, fa riferimento alla funzione, la quale non è l'oggetto che possiede la proprietà checked. In sostanza, al posto di this, devi fare esplicitamente riferimento all'oggetto checkbox che ti interessa (magari passandolo alla funzione tramite name o id).

Nel codice che ha postato lucalucius, this è riferito all'oggetto <input type="checkbox"> in cui l'istruzione JavaScript è inserita e richiamata con onclick, e quindi funziona. Questo perché quando clicchi sulla casella (evento onclick), JavaScript sa che è l'oggetto "casella di controllo" su cui hai cliccato a scatenare l'evento. Ma nel tuo caso non può funzionare, perché this si riferisce all'oggetto funzione.

Inoltre, passi alla funzione un argomento "id", ma cosa rappresenta? Perché poi scrivi: form1.elements[id].value == '';. Questo presuppone che id sia un numero intero >=0, perché l'array elements del form contiene gli n campi del form, numerati in ordine di apparizione nel codice da 0 a n-1.
Se invece quell'id è il valore dell'attributo id del checkbox che controlli, devi impostare il suo value con:

codice:

document.getElementById(id).value = '';

Nota che in questo caso, document è obbligatorio (lo sarebbe sempre in realtà, anche se alcuni browser riescono ad interpretare ugualmente. L'unico oggetto davvero facoltativo, ma non sempre, da indicare è window)! Altra cosa: prima avevi scritto "form1.elements[id].value==...". Per impostare la proprietà value di un oggetto devi usare il segno "=" (assegnazione), non "==". Quest'ultimo non è l'operatore di assegnazione, ma quello di confronto e serve a verificare una condizione (che restituisce sempre un valore booleano).

**epescol** · 18-01-2006, 08:58

Grazie, sei stato gentilissimo...., e qualcosa credo di aver capito attraverso la Tua spiegazione!

.... lo so, javascript non è il mio linguaggio preferito, ma credo di essere vicino alla soluzione, ma non funziona.

Ti chiedo (spero) un ultimo consiglio.

Grazie

codice:

function cancella_valore(chkbox,elem) 
{ 
	if(document.form1.getElementById(chkbox).checked == false)
	{
	document.form1.getElementById(elem).value = ''
	return false;
	}
}

**seed_squall_it** · 18-01-2006, 14:15

Immagino...anche io all'inizio ebbi alcune difficoltà a capire i concetti e il funzionamento del DOM con JavaScript.
Per la funzione che hai scritto, deduco che tu debba "ripulire" il valore di un campo di testo quando il checkbox è deselezionato.
A questo proposito, suppongo che i 2 argomenti che passi alla funzione (chkbox e elem) siano i valori degli attributi id del checkbox e del campo di testo. Ovvero, presumo che nel codice i due elementi siano scritti a grandi linee così:

codice:

<input type="text" id="elem" value="">
<input type="checkbox" id="chkbox">

dove ovviamente "elem" e "chkbox" sono gli id dei due campi. Se è così la funzione che hai scritto è...quasi esatta!

Dico quasi perché hai usato document.form1.getElementById(). Il metodo getElementById() (che fa parte del DOM standard del W3C) è un metodo dell'oggetto document, non dell'oggetto form. Questo ti "libera" dal passare per forza dal form per riferirti ad uno dei suoi campi. La funzione diventa quindi:

codice:

function cancella_valore(chkbox,elem) { 
if (document.getElementById(chkbox).checked==false) {
document.getElementById(elem).value = '';
}
}

Nota anche che quel "return false" che avevi messo alla fine della funzione non serve.
In pratica, hai due modi di accedere ai campi del form, a seconda che usi il valore dell'attributo name o dell'attributo id per riferirti ad essi.

Se usi il valore di name, sei obbligato a passare per il form: document.NOMEFORM.NOMECAMPO.

Se usi il valore di id, non devi passare per il form e usi il metodo più standard: document.getElementById(IDCAMPO).

Una cosa che può tornarti utile. Il metodo getElementById() è "migliore" perché ti permette di indicare tra le sue parentesi anche un id "composto". Nel caso avessi ad es. più campi che hanno degli id formati da una stessa parola seguita da un numero progressivo (campo1, campo2, ecc.), puoi passare alla funzione semplicemente il numero progressivo (chiamiamolo n) e riferirti all'oggetto con: document.getElementById("campo" + n). Se provi a fare la stessa cosa utilizzando il "vecchio" DOM, ossia riferendoti all'oggetto tramite name, la cosa non funziona, perché JavaScript non riesce a "concatenare" in automatico un riferimento ad oggetti di tipo Object con altri di tipo String ottenendo un Object. In quel caso avrebbe bisogno di un eval() per "valutare" la stringa e convertirla esplicitamente in un Object prima di accedere alle proprietà dell'oggetto. Esempio:

var campo = eval("document.form1.campo" + n); /* prima determina l'oggetto */
campo.value = ""; /* poi accede alla proprietà value dell'oggetto */

**epescol** · 18-01-2006, 18:35

Grazie ancora, sei stato gentilissimo,

... non saprei come ringraziarti per la tua precisa spiegazione.

Sicuramente dovrei confrontarmi un pò di + con Javascript.

Mi occupo di applicativi PHP-MySql, però sempre di + mi rendo conto che Javacript con PHP è molto utile.

Buona serata

Discussione: problema con checkbox

Strumenti discussione

Ricerca discussione

Visualizza

problema con checkbox

Permessi di invio