problema disattivazione radio in JS

**giacomofabbian** · 05-03-2012, 20.03.23

Ciao a tutti io ho questa tabella:

che aggiunge righe dinamicamente con questo script:

Codice:

<script language="JavaScript" type="text/javascript">
<!--
var num=2;
var size=15;

function accoda(){
        

        if (num ==10)
           size=22;
           else if(num==99)
                size=27;
	if(document.createElement && document.getElementById && document.getElementsByTagName) {

                var a="a"+num;
                
                var b="b"+num;
                var c="c"+num;
                var d="d"+num;
                var azionea="des(\"a\","+num+");";
                var azioneb="des(\"b\","+num+");";
                var azionec="des(\"c\","+num+");";
                var azioned="des(\"d\","+num+");";
              
                //alert(a);alert(b);alert(c);alert(d);

		// crea elementi
		
		var oTr=document.createElement("TR");                  //elemento tr
		
		var Tdprimo=document.createElement("TD");              // indice
		var Tdsecondo=document.createElement("TD");            //data
		var Tdterzo=document.createElement("TD");              //descrizione
		var Tdquarto=document.createElement("TD");             //cassa dare
		var Tdquinto=document.createElement("TD");             //cassa avere
		var Tdsesto=document.createElement("TD");              //banca dare
		var Tdsettimo=document.createElement("TD");            //banca avere
		var Tdottavo=document.createElement("TD");             //importo
		
		var primo=document.createElement("INPUT");             //  indice
		var secondo=document.createElement("INPUT");           //data giorno
		var slash1=document.createTextNode(" / ");             // slash 1
                var terzo=document.createElement("INPUT");             //data mese
                var slash2=document.createTextNode(" / ");             // slash 2
                var quarto=document.createElement("INPUT");            //data anno
                var quinto=document.createElement("INPUT");            //descrizione
                var sesto=document.createElement("INPUT");             //cassa dare
		var settimo=document.createElement("INPUT");           //cassa avere
		var ottavo=document.createElement("INPUT");            //banca dare
                var nono=document.createElement("INPUT");              //banca avere
		var decimo=document.createElement("INPUT");            //importo
		
                
		// setta attributi
  		primo.setAttribute("type","text");                     // indice
		primo.setAttribute("name","indice[]");                 // indice
                primo.setAttribute("value",num);                       // indice  
		primo.setAttribute("size","1");                        // indice
		primo.setAttribute("style","width:"+size+";");         // indice
		primo.setAttribute("readonly","readonly");             // indice

		
		secondo.setAttribute("type","text");                   // data giorno
		secondo.setAttribute("name","giorno[]");               // data giorno
                secondo.setAttribute("value","gg");                    // data giorno
                secondo.setAttribute("size","2");                      // data giorno
		secondo.setAttribute("style","width:30px");            // data giorno
                secondo.setAttribute("maxlength","2");                 // data giorno

                terzo.setAttribute("type","text");                     // data mese
		terzo.setAttribute("name","mese[]");                   // data mese
                terzo.setAttribute("value","mm");                      // data mese
                terzo.setAttribute("size","2");                        // data mese
		terzo.setAttribute("style","width:30px");              // data mese
                terzo.setAttribute("maxlength","2");                   // data mese


	        quarto.setAttribute("type","text");                    // data anno
		quarto.setAttribute("name","anno[]");                  // data anno 
                quarto.setAttribute("value","aaaa");                   // data anno
                quarto.setAttribute("size","4");                       // data anno
		quarto.setAttribute("style","width:40px");             // data anno
                quarto.setAttribute("maxlength","4");                  // data anno


                quinto.setAttribute("type","text");                    // descrizione
		quinto.setAttribute("name","descrizione[]");           // descrizione
                quinto.setAttribute("size","30");                      // descrizione
		quinto.setAttribute("maxlength","40");                 // descrizione

                sesto.setAttribute("type","radio");                    // cassa dare
		sesto.setAttribute("name","darecassa[]");              // cassa dare
                sesto.setAttribute("value","cd");                      // cassa dare
                sesto.setAttribute("id",a);                      // cassa dare
		sesto.setAttribute("onclick",azionea);           // cassa dare


                settimo.setAttribute("type","radio");                  // cassa avere
		settimo.setAttribute("name","averecassa[]");           // cassa avere
                settimo.setAttribute("value","cs");                    // cassa avere
                settimo.setAttribute("id",b);                    // cassa avere
		settimo.setAttribute("onclick",azioneb);         // cassa avere

		ottavo.setAttribute("type","radio");                   // banca dare
		ottavo.setAttribute("name","darebanca[]");             // banca dare
                ottavo.setAttribute("value","bd");                     // banca dare
                ottavo.setAttribute("id",c);                     // banca dare
		ottavo.setAttribute("onclick",azionec);              // banca dare

                nono.setAttribute("type","radio");                     // banca avere
		nono.setAttribute("name","averebanca[]");              // banca avere
                nono.setAttribute("value","bc");                       // banca avere
                nono.setAttribute("id",d);                       // banca avere
		nono.setAttribute("onclick",azioned);                // banca avere

                decimo.setAttribute("type","text");                    // importo
		decimo.setAttribute("name","importo[]");               // importo
                decimo.setAttribute("size","8");                       // importo
		decimo.setAttribute("maxlength","8");                  // importo


		
                
		// appendi al relativo padre
		Tdprimo.appendChild(primo);
		Tdsecondo.appendChild(secondo);
                Tdsecondo.appendChild(slash1);
                Tdsecondo.appendChild(terzo);
                Tdsecondo.appendChild(slash2);
                Tdsecondo.appendChild(quarto);
                Tdterzo.appendChild(quinto);
                Tdquarto.appendChild(sesto);
                Tdquinto.appendChild(settimo);
                Tdsesto.appendChild(ottavo);
                Tdsettimo.appendChild(nono);
                Tdottavo.appendChild(decimo);
                
        
                //elemento td
		oTr.appendChild(Tdprimo);
		oTr.appendChild(Tdsecondo);
                oTr.appendChild(Tdterzo);
                oTr.appendChild(Tdquarto);
                oTr.appendChild(Tdquinto);
                oTr.appendChild(Tdsesto);
                oTr.appendChild(Tdsettimo);
                oTr.appendChild(Tdottavo);

                //elemento tr
		document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr);

		// incrementa variabile globale
		num++
	}
}

function rimuovi(){
	if(document.removeChild && document.getElementById && document.getElementsByTagName) {
		// se non e' la prima riga
		if(num>2){
			// riferimento al tbody
			var tb=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
			// riferimento all' ultimo TR
			var lastTr=tb.getElementsByTagName('TR')[(tb.getElementsByTagName('TR').length)-1]
			// rimuovi
			tb.removeChild(lastTr);
			// decrementa variabile globale
			num--
		}
	}
}
//-->
</script>

la funzione dei radio e che può esserne selezionato solo uno per riga con questa funzione javascript:

Codice:

function des(cosa,n){
alert(cosa);
alert(n);
var na= "a"+n;
var nb= "b"+n;
var nc= "c"+n;
var nd= "d"+n;

var elementa="document.getElementById(\""+na+"\")";
var elementb="document.getElementById(\""+nb+"\")";
var elementc="document.getElementById(\""+nc+"\")";
var elementd="document.getElementById(\""+nd+"\")";

alert(nb);
alert(elementb);           
            if (cosa=="a"){
              
                         elementb.checked = false;     // abilito tutto fuorchè A
                         elementc.checked = false;
                         elementd.checked = false;
            }
            else if (cosa=="b"){
                 elementa.checked= false;     // abilito tutto fuorchè B
                 elementc.checked= false;
                  elementd.checked= false;
                  }
            else if (cosa=="c"){
                 elementa.checked= false;     // abilito tutto fuorchè C
                 elementb.checked= false;
                 elementd.checked= false;
                 }
            else{
                 elementa.checked= false;      //abilito tutto fuorchè D
                 elementb.checked= false;
                 elementc.checked= false;
                 }
}

Il problema è che non funziona bene si possono selezionare solo un radio per colonna.

**saitfainder** · 06-03-2012, 11.35.41

Il browser permette che ci sia un solo radio selezionato tra quelli che hanno lo stesso attributo "name". Probabilmente il tuo script contrasta con questo funzionalità.

**giacomofabbian** · 06-03-2012, 13.27.08

Originalmente inviato da saitfainder

Il browser permette che ci sia un solo radio selezionato tra quelli che hanno lo stesso attributo "name". Probabilmente il tuo script contrasta con questo funzionalità.

Lo script all'inizio funzionava poi quindi l'ho portato a livello n con il primo script non funziona più...

**giacomofabbian** · 18-03-2012, 09.57.37

MI scuso per non aver scritto nello stesso post...ma penso non sia piu possibile perchè e passato troppo tempo.
Comunque riguardando e riguardando questo codice mi viene il dubbio che il problema sta nelle virgolette, o meglio come vengono concatenate le strighe.
Provate a dare un occhiata perchè non so più a che pensare

REDIT:
Ho corretto un paio di errori :
Non so come mi scambia l'id mi fa 1a al posto di a1

Codice HTML:

var na= "a"+n;
var nb= "b"+n;
var nc= "c"+n;
var nd= "d"+n;

Quindi ho messo prima il numero poi la lettera modificando il codice qui sopra.
Poi avevo trattato come stringhe del codice javascript qui:

Codice HTML:

var elementa="document.getElementById(\""+na+"\")";
var elementb="document.getElementById(\""+nb+"\")";
var elementc="document.getElementById(\""+nc+"\")";
var elementd="document.getElementById(\""+nd+"\")";

Ho tolto quindi, tutte le virgolette e slash.
Ora mi funziona per la prima riga ma per le altre no, che è gia un passo in avanti.

**giacomofabbian** · 18-03-2012, 12.18.43

REREEDIT:

Finalmente ne sono venuto fuori. Posto il codice in caso a qualcuno interessi:

Codice HTML:

<script language="JavaScript" type="text/javascript">

var num=2;
var size=15;
function accoda(){
        

        if (num ==10)
           size=22;
           else if(num==99)
                size=27;
	if(document.createElement && document.getElementById && document.getElementsByTagName) {

                var a="a"+num;
                
                var b="b"+num;
                var c="c"+num;
                var d="d"+num;
                var azionea="des('a',"+num+");";
                var azioneb="des('b',"+num+");";
                var azionec="des('c',"+num+");";
                var azioned="des('d',"+num+");";
              
               

		
		var oTr=document.createElement("TR");                 
		
		var Tdprimo=document.createElement("TD");             
		var Tdsecondo=document.createElement("TD");         
		var Tdterzo=document.createElement("TD");             
		var Tdquarto=document.createElement("TD");           
		var Tdquinto=document.createElement("TD");            
		var Tdsesto=document.createElement("TD");             
		var Tdsettimo=document.createElement("TD");          
		var Tdottavo=document.createElement("TD");            
		
		var primo=document.createElement("INPUT");           
		var secondo=document.createElement("INPUT");         
		var slash1=document.createTextNode(" / ");          
                var terzo=document.createElement("INPUT");           
                var slash2=document.createTextNode(" / ");            
                var quarto=document.createElement("INPUT");          
                var quinto=document.createElement("INPUT");         
                var sesto=document.createElement("INPUT");             
		var settimo=document.createElement("INPUT");           
		var ottavo=document.createElement("INPUT");            
                var nono=document.createElement("INPUT");              
		var decimo=document.createElement("INPUT");           
		
                
  		primo.setAttribute("type","text");                    
		primo.setAttribute("name","indice[]");                
                primo.setAttribute("value",num);                      
		primo.setAttribute("size","1");                        
		primo.setAttribute("style","width:"+size+";");        
		primo.setAttribute("readonly","readonly");            

		
		secondo.setAttribute("type","text");                  
		secondo.setAttribute("name","giorno[]");            
                secondo.setAttribute("value","gg");                   
                secondo.setAttribute("size","2");                     
		secondo.setAttribute("style","width:30px");          
                secondo.setAttribute("maxlength","2");                

                terzo.setAttribute("type","text");                    
		terzo.setAttribute("name","mese[]");                   
                terzo.setAttribute("value","mm");                     
                terzo.setAttribute("size","2");                        
		terzo.setAttribute("style","width:30px");              
                terzo.setAttribute("maxlength","2");                 


	        quarto.setAttribute("type","text");                    
		quarto.setAttribute("name","anno[]");                  // data anno 
                quarto.setAttribute("value","aaaa");                   // data anno
                quarto.setAttribute("size","4");                       // data anno
		quarto.setAttribute("style","width:40px");             // data anno
                quarto.setAttribute("maxlength","4");                  // data anno


                quinto.setAttribute("type","text");                    // descrizione
		quinto.setAttribute("name","descrizione[]");           // descrizione
                quinto.setAttribute("size","30");                      // descrizione
		quinto.setAttribute("maxlength","40");                 // descrizione

                sesto.setAttribute("type","checkbox");                    // cassa dare
		sesto.setAttribute("name","darecassa[]");              // cassa dare
                sesto.setAttribute("value","cd");                      // cassa dare
                sesto.setAttribute("id",a);                      // cassa dare
		sesto.setAttribute("onclick",azionea);           // cassa dare


                settimo.setAttribute("type","checkbox");                  // cassa avere
		settimo.setAttribute("name","averecassa[]");           // cassa avere
                settimo.setAttribute("value","cs");                    // cassa avere
                settimo.setAttribute("id",b);                    // cassa avere
		settimo.setAttribute("onclick",azioneb);         // cassa avere

		ottavo.setAttribute("type","checkbox");                   // banca dare
		ottavo.setAttribute("name","darebanca[]");             // banca dare
                ottavo.setAttribute("value","bd");                     // banca dare
                ottavo.setAttribute("id",c);                     // banca dare
		ottavo.setAttribute("onclick",azionec);              // banca dare

                nono.setAttribute("type","checkbox");                     // banca avere
		nono.setAttribute("name","averebanca[]");              // banca avere
                nono.setAttribute("value","bc");                       // banca avere
                nono.setAttribute("id",d);                       // banca avere
		nono.setAttribute("onclick",azioned);                // banca avere

                decimo.setAttribute("type","text");                    // importo
		decimo.setAttribute("name","importo[]");               // importo
                decimo.setAttribute("size","8");                       // importo
		decimo.setAttribute("maxlength","8");                  // importo

		// appendi al relativo padre
		Tdprimo.appendChild(primo);
		Tdsecondo.appendChild(secondo);
                Tdsecondo.appendChild(slash1);
                Tdsecondo.appendChild(terzo);
                Tdsecondo.appendChild(slash2);
                Tdsecondo.appendChild(quarto);
                Tdterzo.appendChild(quinto);
                Tdquarto.appendChild(sesto);
                Tdquinto.appendChild(settimo);
                Tdsesto.appendChild(ottavo);
                Tdsettimo.appendChild(nono);
                Tdottavo.appendChild(decimo);
                
        
                //elemento td
		oTr.appendChild(Tdprimo);
		oTr.appendChild(Tdsecondo);
                oTr.appendChild(Tdterzo);
                oTr.appendChild(Tdquarto);
                oTr.appendChild(Tdquinto);
                oTr.appendChild(Tdsesto);
                oTr.appendChild(Tdsettimo);
                oTr.appendChild(Tdottavo);

                //elemento tr
		document.getElementById('tabella').getElementsByTagName('TBODY')[0].appendChild(oTr);

		// incrementa variabile globale
		num++
	}
}

function rimuovi(){
	if(document.removeChild && document.getElementById && document.getElementsByTagName) {
		// se non e' la prima riga
		if(num>2){
			// riferimento al tbody
			var tb=document.getElementById('tabella').getElementsByTagName('TBODY')[0];
			// riferimento all' ultimo TR
			var lastTr=tb.getElementsByTagName('TR')[(tb.getElementsByTagName('TR').length)-1]
			// rimuovi
			tb.removeChild(lastTr);
			// decrementa variabile globale
			num--
		}
	}
}

</script>
<script type="text/javascript">
function des(cosa,n){

var na= "a"+n;
var nb= "b"+n;
var nc= "c"+n;
var nd= "d"+n;

var elementa=document.getElementById(na);
var elementb=document.getElementById(nb);
var elementc=document.getElementById(nc);
var elementd=document.getElementById(nd);


        
            if (cosa=="a"){
              
                 elementb.checked= false;     // abilito tutto fuorchè A
                 elementc.checked= false;
                 elementd.checked= false;
                        
            }
            else if (cosa=="b"){
           
                 elementa.checked= false;     // abilito tutto fuorchè B
                 elementc.checked= false;
                 elementd.checked= false;
                  }
            else if (cosa=="c"){
          
                 elementa.checked= false;     // abilito tutto fuorchè C
                 elementb.checked= false;
                 elementd.checked= false;
                 }
            else{
            //alert("sono qui d");  
                 elementa.checked= false;      //abilito tutto fuorchè D
                 elementb.checked= false;
                 elementc.checked= false;
                 }
}
 
</script>

ecco i 2 script

Codice HTML:

<form >
<TABLE ><TD>
  <tr>
      
        
         <td><input type= "checkbox" onclick= "des('a',1);" id= "a1" value="cd"name="darecassa[]"></td>
         <td><input type= "checkbox" onclick= "des('b',1);" id= "b1" value="ca"name="averecassa[]"></td>
          
          <td><input type= "checkbox" onclick= "des('c',1); "id= "c1" value="bd" name="darebanca[]"></td>
          <td><input type= "checkbox" onclick= "des('d',1); "id= "d1" value="ba" name="averebanca[]"></td>
<td><input type="text" maxlength="8" size="8" name="importo[]"></td>
 
</tr>
  
</table>

<input type="button" value="Aggiungi riga" onclick="accoda()"> <input type="button" value="Rimuovi riga" onclick="rimuovi()">

</form>
</table>

e il blocco html.
SUppongo, che il problema stava nella scelta dei radio, in quanto dava problemi sulle righe successive cioè con una tabella come questa:
a1 b1 c1

a2 b2 c2
mi permetteva di selezionare solo a1 e non a2 anche.

Spero di essermi spiegato.

P.S: Ho dovuto postare un nuovo messaggio perchè superavo il numero di caratteri.

Discussione: problema disattivazione radio in JS

LinkBack

Strumenti discussione

Display

problema disattivazione radio in JS

Regole di scrittura