Nascondere Radio Button in base a valore di lista a discesa

di il
13 risposte

Nascondere Radio Button in base a valore di lista a discesa

Saluti, è il mio primo post dopo anni che seguo il forum...

Ovviamente sono a chiedere aiuto:
ho cercato molto, ma un esempio analogo a ciò che mi occorre non sono riuscito a trovarlo.

In un form, ho una lista a discesa con 6 valori e 3 radio button ad essa relativi;
vorrei che per due specifici valori scelti nella lista a discesa uno dei 3 radio button mi si disabilitasse
o, meglio, restasse proprio nascosto.
Inoltre ad ogni cambio di valori nella lista a discesa mi si autoimposti come selezionato il radio button "2".

Esempio
valore lista = "A" o "B" o "E" o "F" >> tutti i radio attivi
valori lista = "C" o "D" >> attivi solo i radio "2" e "3"

Ho abbozzato il seguente codice, gentilmente e con grande faccia tosta,
qualche anima pia, potrebbe adattarlo alla mia richiesta?
<table width="auto" border="0">
	<tr>
		<td> </td>
		<td colspan="2"><b>modulo</b><br></td>
	</tr>
	<tr>
		<td> </td>
		<td>  * i campi contrassegnati dall'asterisco sono obbligatori<br></td>
	</tr>
	<tr> 
		<td align="right"> * nome: </td>
		<td><input type="text" name="nome" size="45" value=""></td>
		<td> </td>
	</tr>
	<tr> 
		<td align="right"> * cognome: </td>
		<td><input type="text" name="cognome" size="45" value=""></td>
		<td> </td>
	</tr>
	<tr>
		<td align="right">* Lista </td>
		<td>
			<select name="lista_1">
				<option value="A">AAAAA</option>
				<option value="B">BBBBB</option>
				<option value="C">CCCCC</option>
				<option value="D">DDDDD</option>
				<option value="E">EEEEE</option>
				<option value="F">FFFFF</option>
									
																
				<form action="">
                <input type="radio" name="radio" value="1">* 11111
				<input type="radio" name="radio" value="2">* 22222							
				<input type="radio" name="radio" value="3">* 33333
				</form>
					

				<td> </td>
			</select>
		</td>
	</tr>
					
	<tr>
		<td> </td>
		<td><br><input type="submit" value="invia"><br><br></td>
		<td> </td>
	</tr>
		<tr>
		<td> </td>
		<td>
			ogni richiesta è subordinata a conferma<br><br>
		</td>
	</tr>
</table>

13 Risposte

  • Re: Nascondere Radio Button in base a valore di lista a discesa

    Quanto ne sai di javascript?
  • Re: Nascondere Radio Button in base a valore di lista a discesa

    Grazie per il pensiero.... NULLA,
    ...sono solo un povero cameraman
  • Re: Nascondere Radio Button in base a valore di lista a discesa

    Se ti interessa comprendere come si fa, il solo html non è sufficiente
  • Re: Nascondere Radio Button in base a valore di lista a discesa

    Grazie Tonmu, avevo immaginato che html non fosse sufficiente,
    ma un esempio da studiare o modificare o insomma per cercare di capire come muovermi,
    dove potrei trovarlo?
    chiaramente studiarmi una funzione condizionale sanza sapere da dove partire è un problema, lo ammetto.
  • Re: Nascondere Radio Button in base a valore di lista a discesa

    Questo codice dovrebbe fare tutto ciò che chiedi (devi aggiungere l'id all'input e onchanghe="cambia()" alla select)
    <script type="text/javascript">
    function cambia(){
    	var x = document.getElementById('lista_1').value;
    	if (x == 'C' || x=='D') {
    		document.getElementById('primo').disabled=true;
    		document.getElementById('primo').checked=false;
    
    	}
    	else {
    		document.getElementById('primo').removeAttribute('disabled')
    	}
    }
    </script>
    Se ti interessa approfondire ti consiglio di iniziare da questo sito della w3c school dove trovi molti esempi .
  • Re: Nascondere Radio Button in base a valore di lista a discesa

    Grazie Tommu, davvero grazie per il pensiero.
    Ti farò sapere perchè devo correre a lavorare, ..stanotte farò i miei esperimenti.
    Grazie di nuovo.
  • Re: Nascondere Radio Button in base a valore di lista a discesa

    Tonmu, la condizione della funzione a mio avviso non fa una piega, ma non stato capace di farla funzionare.
    Io l'ho integrata cosi... tu hai provato ad integrarla all'html che ho allegato all'inizio?
    
    
    <html>
      <head>
    
    <script type="text/javascript">
    function cambia(){
       var x = document.getElementById('lista_1').value;
       if (x == 'C' || x=='D') {
          document.getElementById('primo').disabled=true;
          document.getElementById('primo').checked=false;
    
       }
       else {
          document.getElementById('primo').removeAttribute('disabled')
       }
    }
    </script>
      </head>
    
    
    
    
    <table width="auto" border="0">
    
    	<tr>
    		<td> </td>
    		<td colspan="2"><b>modulo</b><br></td>
    	</tr>
    	<tr>
    		<td> </td>
    		<td>  * i campi contrassegnati dall'asterisco sono obbligatori<br></td>
    	</tr>
    	<tr> 
    		<td align="right"> * nome: </td>
    		<td><input type="text" name="nome" size="45" value=""></td>
    		<td> </td>
    	</tr>
    	<tr> 
    		<td align="right"> * cognome: </td>
    		<td><input type="text" name="cognome" size="45" value=""></td>
    		<td> </td>
    	</tr>
    	<tr>
    		<td align="right">* Lista </td>
    		<td>
    		
    
    
    
    			<select name="lista_1" onchange="cambia()">
    				<option value="A">AAAAA</option>
    				<option value="B">BBBBB</option>
    				<option value="C">CCCCC</option>
    				<option value="D">DDDDD</option>
    				<option value="E">EEEEE</option>
    				<option value="F">FFFFF</option>
    									
    
    					
    				<form action=""  >
                    <input type="radio" id="primo" name="radio" value="1">* 11111
    				<input type="radio" name="radio" value="2">* 22222				
    				<input type="radio" name="radio" value="3">* 33333
    				</form>
    					
    
    					
    			</select>
    		</td>
    	</tr>
    					
    	<tr>
    		<td> </td>
    		<td><br><input type="submit" value="invia"><br><br></td>
    		<td> </td>
    	</tr>
    		<tr>
    		<td> </td>
    		<td>
    			ogni richiesta è subordinata a conferma<br><br>
    		</td>
    	</tr>
    </table>
    
    </html>
    
  • Re: Nascondere Radio Button in base a valore di lista a discesa

    Il problema sta qui
    <select name="lista_1" onchange="cambia()">
    nella funzione abbiamo
       var x = document.getElementById('lista_1').value; 
    alla variabile x si assegna il valore dell'elemento con ID = "lista_1" però nel documento non c'è, quindi devi aggiungere l'id "lista_1" alla select
  • Re: Nascondere Radio Button in base a valore di lista a discesa

    Grazie per la supervisione.
    Adesso funziona perfettamente.

    Ho aggiunto una piccola stringa in testa allo script perchè al reload della pagina
    la condizione non veniva più riconosciuta e ed il radio diventava cliccabile anche se
    non avrebbe dovuto esserlo.
    Ho anche aggiunto altre condizioni: non so se si può abbreviare o semplificare lo script,
    ma così, comunque, già assolve il proprio compito secondo le mia esigenze.

    Grazie !

    Mi rimane incompiuta la possibilità che si reimposti sempre il radio2 se cambio il valore nella lista
    Ho provato aggiungendo un altra funzione con un altro onchange e ci sono riuscito, ma rimane
    sempre bloccato sul radio2 e non riesco più a "commutare" tra i vari radio.
    (Il codice di questo ultimo esperimento non lo posto per lasciare pulite solo le variazioni funzionanti)
    
    
      <head>
        <body onload="cambia()">
    <script type="text/javascript">
    function cambia(){
       var x = document.getElementById('lista_1').value;
       
        if (x == 'A') {
        document.getElementById('primo').disabled=true;
        document.getElementById('primo').checked=false;
        document.getElementById('secondo').disabled=true;
        document.getElementById('secondo').checked=false;
        document.getElementById('terzo').disabled=true;
        document.getElementById('terzo').checked=false;
    	}	
       
       else if (x == 'C' || x=='D') {
          document.getElementById('primo').disabled=true;
          document.getElementById('primo').checked=false;
          document.getElementById('secondo').removeAttribute('disabled')
    	  document.getElementById('terzo').removeAttribute('disabled')
    	  }
    
       else {
          document.getElementById('primo').removeAttribute('disabled')
    	  document.getElementById('secondo').removeAttribute('disabled')
    	  document.getElementById('terzo').removeAttribute('disabled')
       }
    }
    </script>
        </body>
      </head>
    
  • Re: Nascondere Radio Button in base a valore di lista a discesa

    Non ho capito cosa intendi per reimpostare, il radio2 si deve azzerare a ogni cambio della lista oppure deve essere selezionato a ogni cambio (se possibile) ?
  • Re: Nascondere Radio Button in base a valore di lista a discesa

    Tranne che per il valore "A" della lista,
    per default,
    quindi ogni volta che cambio un valore nella lista, deve risettarsi sul 2.
    se l'utente lo imposta su un altro valore (1 o 3) e poi cambia il valore nella lista, deve reimpostarsi =2

    (..se possibile...)
  • Re: Nascondere Radio Button in base a valore di lista a discesa

    Ti basta aggiungere "document.getElementById('secondo').checked=true;" prima delle condizioni
  • Re: Nascondere Radio Button in base a valore di lista a discesa

    ..io direi che basta così... (speriamo)
    GRAZIE.
Devi accedere o registrarti per scrivere nel forum
13 risposte