checkbox... funzioni combinate

**Charlotte17** · 08-08-2006, 12:27

ciao a tutti ^_^

inizio postando il mio codice, così che abbiate una visione più chiara del problema

codice:

<script language="javascript">

var conta=0;
function ctr(quale)
	{
	if (quale.checked)
		{
		conta++;
		if (conta > 1)
			{
			alert("Puoi scegliere solo un indirizzo!");
			quale.checked=false;
			conta--;
			}
		} else  	{
			conta>0?conta--:null;
			}
	}


function vedinonvedi(id){
	 if (document.getElementById){
    		if(document.getElementById(id).style.display == 'none'){
      			document.getElementById(id).style.display = 'block';
    		} else {
      			document.getElementById(id).style.display = 'none';
    		}
  	}
}

</script>

<input type="checkbox" name="specializzazione" value="artistico" onClick="ctr(this); vedinonvedi('div_art'); return true;"> Artistico
<input type="checkbox" name="specializzazione" value="classico" onClick="ctr(this); vedinonvedi('div_cla'); return true;"> Classico

<div id="div_art" style="display: none">

<input type="text" name="capacità_art" value="20" disabled="disabled" size="5"> 
<input type="text" name="capacità_let" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacità_lin" value="0" disabled="disabled" size="5"> 
<input type="text" name="capacità_psi" value="10" disabled="disabled" size="5"> 
<input type="text" name="capacità_mat" value="5" disabled="disabled" size="5"> 

</div>

<div id="div_cla" style="display: none">

<input type="text" name="capacità_art" value="0" disabled="disabled" size="5"> 
<input type="text" name="capacità_let" value="20" disabled="disabled" size="5"> 
<input type="text" name="capacità_lin" value="10" disabled="disabled" size="5"> 
<input type="text" name="capacità_psi" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacità_mat" value="5" disabled="disabled" size="5"> 

</div>

il primo codice javascript fa si che non si possa selezionare più di un campo e appare un messaggio di errore quando si prova a farlo... il secondo fa apparire i div in base al checkbox selezionato...

il problema è che se l'utente clicca prima sul campo artistico (facendo apparire quindi il div corrispondente) e poi su quello classico gli appare il messaggio di errore... ma gli appare anche il div "div_cla" che va ad aggiungersi al primo.... si ha così un grande macello XDDDD

come posso risolvere (sempre se si è capito il mio problema XD)?

**seed_squall_it** · 08-08-2006, 14:39

E' sbagliata l'impostazione...richiami la funzione vedinonvedi() in ogni caso, quindi il div corrispondente viene mostrato.
Ti ho modificato il codice per renderlo più semplice e per evitare che ti mostri il messaggio di errore nel caso l'utente provi a selezionare entrambi i checkbox. Ora è possibile selezionarli solo uno per volta, oppure non selezionarne nessuno. Inoltre, quando imposti delle proprietà di stile, come display, devi farlo accedendo all'oggetto style.

codice:

<script type="text/javascript">
function ctr(id) {
if (document.getElementById(id).checked==true) {
if (document.getElementById(id).value=="artistico") {
document.getElementById("cla").checked = false;
document.getElementById("div_" + id).style.display = "";
document.getElementById("div_cla").style.display = "none";
}
else {
document.getElementById("art").checked = false;
document.getElementById("div_" + id).style.display = "";
document.getElementById("div_art").style.display = "none";
}
}
else {
document.getElementById("div_" + id).style.display = "none";
}
}
</script>
</head>
<body>

<input type="checkbox" id="art" name="spec_art" value="artistico" onclick="ctr(this.id);"> 

Artistico
<input type="checkbox" id="cla" name="spec_cla" value="classico" onclick="ctr(this.id);"> 

Classico

<div id="div_art" style="display: none;">

<input type="text" name="capacità_art" value="20" disabled="disabled" size="5"> 
<input type="text" name="capacità_let" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacità_lin" value="0" disabled="disabled" size="5"> 
<input type="text" name="capacità_psi" value="10" disabled="disabled" size="5"> 
<input type="text" name="capacità_mat" value="5" disabled="disabled" size="5"> 

</div>

<div id="div_cla" style="display: none;">

<input type="text" name="capacità_art" value="0" disabled="disabled" size="5"> 
<input type="text" name="capacità_let" value="20" disabled="disabled" size="5"> 
<input type="text" name="capacità_lin" value="10" disabled="disabled" size="5"> 
<input type="text" name="capacità_psi" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacità_mat" value="5" disabled="disabled" size="5">
</div>

Se hai dei dubbi chiedi pure!

PS: evita le lettere accentate nei valori degli attributi id e name.

**Charlotte17** · 08-08-2006, 14:59

Non solo sei stato chiarissimo........ ma funziona anche!!!! XDDD
oddio ti adoro proprio! ci stavo provando da stamattina ^__^
grazie ancora, davvero! ^_^

spero di non dovervi più rompere almeno in giornata XD purtoppo in javascript ho conoscenze solo teoriche... sulla pratica devo ancora lavorarci ^_^

**seed_squall_it** · 08-08-2006, 15:02

Eheh...tranquilla...siamo qui per questo (leggi: puoi romperci finché vuoi...

)

**Charlotte17** · 08-08-2006, 15:25

mmm.... mi è sorto un problema XD

dovrei modificare il codice per inserire oltre ad artistico e classico altri tre indirizzi... il problema è che ho notato che il codice è costruito su due elementi (o mi sbaglio?).... come faccio a modificarlo?

cioè... io devo fare anche linguistico, scientifico e psicopedagogico.... e naturalmente ognuno di essi ha un div corrispondente che appare quando si clicca sul checkbox...

non so se sono stata abbastanza chiara... si può fare?

**Charlotte17** · 08-08-2006, 16:26

come non detto ^___^ mi sono messa a ragionare sul codice e sono riuscita a trovare la soluzione da sola dopo MOLTI tentativi sbagliati... ma l'importante è il risultato no?

ce l'ho fatta XD

grazie ancora ^__^

**Charlotte17** · 08-08-2006, 19:27

scusate ancora la "rottura".....

questo è il codice che ho creato:

codice:

<?php
session_start();
session_register("eta","spec","capacita_art","capacita_let","capacita_lin","capacita_psi","capacita_sci"); 
?>

<html>
<head>
<title>Iscrizione</title>

<script type="text/javascript">
function ctr(id) {
if (document.getElementById(id).checked==true) {

if (document.getElementById(id).value=="artistico") {

document.getElementById("cla").checked = false;
document.getElementById("div_cla").style.display = "none";

document.getElementById("lin").checked = false;
document.getElementById("div_lin").style.display = "none";

document.getElementById("psi").checked = false;
document.getElementById("div_psi").style.display = "none";

document.getElementById("sci").checked = false;
document.getElementById("div_sci").style.display = "none";

document.getElementById("div_" + id).style.display = "";
}

else if (document.getElementById(id).value=="classico") {

document.getElementById("art").checked = false;
document.getElementById("div_art").style.display = "none";

document.getElementById("lin").checked = false;
document.getElementById("div_lin").style.display = "none";

document.getElementById("psi").checked = false;
document.getElementById("div_psi").style.display = "none";

document.getElementById("sci").checked = false;
document.getElementById("div_sci").style.display = "none";

document.getElementById("div_" + id).style.display = "";
}

else if (document.getElementById(id).value=="linguistico") {

document.getElementById("art").checked = false;
document.getElementById("div_art").style.display = "none";

document.getElementById("cla").checked = false;
document.getElementById("div_cla").style.display = "none";

document.getElementById("psi").checked = false;
document.getElementById("div_psi").style.display = "none";

document.getElementById("sci").checked = false;
document.getElementById("div_sci").style.display = "none";

document.getElementById("div_" + id).style.display = "";
}

else if (document.getElementById(id).value=="psicopedagogico") {

document.getElementById("art").checked = false;
document.getElementById("div_art").style.display = "none";

document.getElementById("cla").checked = false;
document.getElementById("div_cla").style.display = "none";

document.getElementById("lin").checked = false;
document.getElementById("div_lin").style.display = "none";

document.getElementById("sci").checked = false;
document.getElementById("div_sci").style.display = "none";

document.getElementById("div_" + id).style.display = "";
}

else if (document.getElementById(id).value=="scientifico") {

document.getElementById("art").checked = false;
document.getElementById("div_art").style.display = "none";

document.getElementById("cla").checked = false;
document.getElementById("div_cla").style.display = "none";

document.getElementById("lin").checked = false;
document.getElementById("div_lin").style.display = "none";

document.getElementById("psi").checked = false;
document.getElementById("div_psi").style.display = "none";

document.getElementById("div_" + id).style.display = "";
}


}
else {
document.getElementById("div_" + id).style.display = "none";
}
}
</script>

<script language="javascript" src="select.js">
</script>

<script language="javascript" src="bottoni.js">
</script>

</head>
<body>

<form name="specializzazione" action="iscrizione5.php" method="post">

<? 
if ($professione == "studente")
{?>



Età</p>
                  <input name="bottone_età1a" type="button" onClick="banda(this.form, 'up')" value="+">
                  <input name="eta" type="text" id="eta" onFocus="this.blur()" value="19" size="2">
                  <input name="bottone_età1b" type="button" onClick="banda(this.form, 'down')" value="-">



Specializzazione</p>

<input type="checkbox" id="art" name="spec" value="artistico" onclick="ctr(this.id);"> 

Artistico

<input type="checkbox" id="cla" name="spec" value="classico" onclick="ctr(this.id);"> 

Classico

<input type="checkbox" id="lin" name="spec" value="linguistico" onclick="ctr(this.id);"> 

Linguistico

<input type="checkbox" id="psi" name="spec" value="psicopedagogico" onclick="ctr(this.id);"> 

Psicopedagogico

<input type="checkbox" id="sci" name="spec" value="scientifico" onclick="ctr(this.id);"> 

Scientifico


<div id="div_art" style="display: none;">

<input type="text" name="capacita_art" value="20" disabled="disabled" size="5"> 
<input type="text" name="capacita_let" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_lin" value="0" disabled="disabled" size="5"> 
<input type="text" name="capacita_psi" value="10" disabled="disabled" size="5"> 
<input type="text" name="capacita_mat" value="5" disabled="disabled" size="5"> 

</div>

<div id="div_cla" style="display: none;">

<input type="text" name="capacita_art" value="0" disabled="disabled" size="5"> 
<input type="text" name="capacita_let" value="20" disabled="disabled" size="5"> 
<input type="text" name="capacita_lin" value="10" disabled="disabled" size="5"> 
<input type="text" name="capacita_psi" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_mat" value="5" disabled="disabled" size="5">
</div>

<div id="div_lin" style="display: none;">

<input type="text" name="capacita_art" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_let" value="10" disabled="disabled" size="5"> 
<input type="text" name="capacita_lin" value="20" disabled="disabled" size="5"> 
<input type="text" name="capacita_psi" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_mat" value="0" disabled="disabled" size="5"> 

</div>

<div id="div_psi" style="display: none;">

<input type="text" name="capacita_art" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_let" value="0" disabled="disabled" size="5"> 
<input type="text" name="capacita_lin" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_psi" value="20" disabled="disabled" size="5"> 
<input type="text" name="capacita_mat" value="10" disabled="disabled" size="5"> 

</div>

<div id="div_sci" style="display: none;">

<input type="text" name="capacita_art" value="10" disabled="disabled" size="5"> 
<input type="text" name="capacita_let" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_lin" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_psi" value="0" disabled="disabled" size="5"> 
<input type="text" name="capacita_mat" value="20" disabled="disabled" size="5"> 

</div>

</form>

<? }
else
{?>



Età</p>
                  <input name="bottone_età2a" type="button" onClick="banda2(this.form, 'up')" value="+">
                  <input name="eta" type="text" id="eta" onFocus="this.blur()" value="27" size="2">
                  <input name="bottone_età2b" type="button" onClick="banda2(this.form, 'down')" value="-">



Specializzazione</p>

<input type="text" name="capacità_art" size="5"> 
<input type="text" name="capacità_let" size="5"> 
<input type="text" name="capacità_lin" size="5"> 
<input type="text" name="capacità_psi" size="5"> 
<input type="text" name="capacità_mat" size="5"> 

<? }
?>

<input type="submit" value="Continua" id="bottone">
</form>

</body>
</html>

e funziona ^_^ (naturalmente la parte impiegato va completata...)

il problema è che cliccando sul bottone continua non mi va alla pagina seguente... sembra quasi che non lo clicca...

ho fatto alcune prove togliendo pezzi di codice e sono arrivata alla conclusione che riguarda solo il pezzo che ha a che fare con la specializzazione (togliendo quella infatti funziona tutto)....

qualcuno mi aiuta?

**seed_squall_it** · 08-08-2006, 20:41

Hai un tag </form> di troppo, quindi se la professione è "studente", ti stampa due chiusure del form. La funzione che JavaScript hai fatto è fin troppo "ridondante"...funziona, ma può essere semplificata notevolmente. Ti avevo scritto la prima proprio perché avevi due elementi, ma quando ne hai di più conviene ottimizzare il codice della funzione. Ti riporto qui sotto il codice corretto completo:

codice:

<?php
session_start();
session_register("eta","spec","capacita_art","capacita_let","capacita_lin","capacita_psi","capacita_sci"); 
?>
<html>
<head>
<title>Iscrizione</title>
<script type="text/javascript">

function ctr(elem) {
var f = document.getElementById("specializzazione");
if (document.getElementById(elem).checked==true) {
for (i=0; i<f.elements.length; i++) {
if (f.elements[i].type=="checkbox" && f.elements[i].id && f.elements[i].id!=elem) {
f.elements[i].checked = false;
document.getElementById("div_" + f.elements[i].id).style.display = "none";
}
}
document.getElementById("div_" + elem).style.display = "";
}
else {
document.getElementById("div_" + elem).style.display = "none";
}
}

</script>
<script type="text/javascript" src="select.js"></script>
<script type="text/javascript" src="bottoni.js"></script>
</head>
<body>
<form id="specializzazione" name="specializzazione" action="iscrizione5.php" method="post">

<?php
if ($professione=="studente") {
print <<<TAG



Età</p>
<input name="bottone_eta1a" type="button" onclick="banda(this.form,'up');" value=" + ">
<input name="eta" type="text" id="eta" onfocus="this.blur();" value="19" size="2">
<input name="bottone_eta1b" type="button" onclick="banda(this.form,'down');" value=" - ">



Specializzazione</p>

<input type="checkbox" id="art" name="art" value="artistico" onclick="ctr(this.id);"> 

Artistico

<input type="checkbox" id="cla" name="cla" value="classico" onclick="ctr(this.id);"> 

Classico

<input type="checkbox" id="lin" name="lin" value="linguistico" onclick="ctr(this.id);"> 

Linguistico

<input type="checkbox" id="psi" name="psi" value="psicopedagogico" onclick="ctr(this.id);"> 

Psicopedagogico

<input type="checkbox" id="sci" name="sci" value="scientifico" onclick="ctr(this.id);"> 

Scientifico


<div id="div_art" style="display: none;">
<input type="text" name="capacita_art" value="20" disabled="disabled" size="5"> 
<input type="text" name="capacita_let" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_lin" value="0" disabled="disabled" size="5"> 
<input type="text" name="capacita_psi" value="10" disabled="disabled" size="5"> 
<input type="text" name="capacita_mat" value="5" disabled="disabled" size="5"> 
</div>

<div id="div_cla" style="display: none;">
<input type="text" name="capacita_art" value="0" disabled="disabled" size="5"> 
<input type="text" name="capacita_let" value="20" disabled="disabled" size="5"> 
<input type="text" name="capacita_lin" value="10" disabled="disabled" size="5"> 
<input type="text" name="capacita_psi" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_mat" value="5" disabled="disabled" size="5">
</div>

<div id="div_lin" style="display: none;">
<input type="text" name="capacita_art" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_let" value="10" disabled="disabled" size="5"> 
<input type="text" name="capacita_lin" value="20" disabled="disabled" size="5"> 
<input type="text" name="capacita_psi" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_mat" value="0" disabled="disabled" size="5"> 
</div>

<div id="div_psi" style="display: none;">
<input type="text" name="capacita_art" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_let" value="0" disabled="disabled" size="5"> 
<input type="text" name="capacita_lin" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_psi" value="20" disabled="disabled" size="5"> 
<input type="text" name="capacita_mat" value="10" disabled="disabled" size="5"> 
</div>

<div id="div_sci" style="display: none;">
<input type="text" name="capacita_art" value="10" disabled="disabled" size="5"> 
<input type="text" name="capacita_let" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_lin" value="5" disabled="disabled" size="5"> 
<input type="text" name="capacita_psi" value="0" disabled="disabled" size="5"> 
<input type="text" name="capacita_mat" value="20" disabled="disabled" size="5">
</div>

TAG;
}
else {
print <<<TAG



Età</p>
<input name="bottone_eta2a" type="button" onclick="banda2(this.form,'up');" value=" + ">
<input name="eta" type="text" id="eta" onfocus="this.blur();" value="27" size="2">
<input name="bottone_eta2b" type="button" onclick="banda2(this.form,'down');" value=" - ">



Specializzazione</p>

<input type="text" name="capacita_art" size="5"> 
<input type="text" name="capacita_let" size="5"> 
<input type="text" name="capacita_lin" size="5"> 
<input type="text" name="capacita_psi" size="5"> 
<input type="text" name="capacita_mat" size="5"> 

TAG;
}
?>



<input type="submit" value="Continua" id="bottone"></p>
</form>

</body>
</html>

Tra le modifiche fatte, noterai la notazione heredoc di PHP (print <<<TAG e TAG

che permette di scrivere porzioni di codice in modo che PHP le consideri semplice HTML (quindi non devi escapizzare apici doppi o singoli e puoi utilizzare cmq delle variabili scrivendole tra parentesi graffe all'interno del pezzo di codice delimitato da print <<<TAG e TAG

. Questo ti semplifica parecchio la gestione dei blocchi condizionali, senza dover scrivere le parentesi graffe dei blocchi tra tag <?php e ?> e quindi uscire e rientrare ogni volta nella modalità PHP.
Poi avevi i valori degli attributi name di tutti i checkbox uguali, il che non è corretto (va bene quando hai dei radio buttons, ma non con i checkbox).

PS: avevi anche dei nomi dei campi con una lettera accentata (bottone_età2a e bottone_età_2b). Inoltre, i gestori di evento onclick, onfocus, onblur, ecc. scrivili sempre tutti minuscoli.

**Charlotte17** · 08-08-2006, 21:11

mi funziona ora il bottone continua..... ma non so perchè no va più il sistema dei checkbox... ne seleziono quanti voglio e non appaiono sotto i div..... ora provo a cercare l'errore.... :master: anche se per adesso non ne vedo!

Comunque grazie mille per avermi sistemato il codice ^_^ sei stato gentilissimo

**seed_squall_it** · 08-08-2006, 21:14

Hai copiato l'intero codice che ti ho postato? Perché ho aggiunto l'attributo id nel form...senza quello non funziona. A me quel codice funziona perfettamente... :master:

Discussione: checkbox... funzioni combinate

Strumenti discussione

Ricerca discussione

Visualizza

checkbox... funzioni combinate

Permessi di invio