Nascondere Radio Button in base a valore di lista a discesa

clickshe

il 13 lug 2017, 12:07

13 risposte

clickshe

Pochi posts

Iscritto da: mag, 2012

Messaggi:: 8

Nascondere Radio Button in base a valore di lista a discesa

13 lug 2017, 12:10

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

T
Tonmu
Pochi posts
Iscritto da
lug, 2017
Messaggi:
48
Re: Nascondere Radio Button in base a valore di lista a discesa
13 lug 2017, 12:35
Quanto ne sai di javascript?
C
clickshe
Pochi posts
Iscritto da
mag, 2012
Messaggi:
8
Re: Nascondere Radio Button in base a valore di lista a discesa
13 lug 2017, 12:41
Grazie per il pensiero.... NULLA,
...sono solo un povero cameraman
T
Tonmu
Pochi posts
Iscritto da
lug, 2017
Messaggi:
48
Re: Nascondere Radio Button in base a valore di lista a discesa
13 lug 2017, 12:54
Se ti interessa comprendere come si fa, il solo html non è sufficiente
C
clickshe
Pochi posts
Iscritto da
mag, 2012
Messaggi:
8
Re: Nascondere Radio Button in base a valore di lista a discesa
13 lug 2017, 13:01
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.
T
Tonmu
Pochi posts
Iscritto da
lug, 2017
Messaggi:
48
Re: Nascondere Radio Button in base a valore di lista a discesa
13 lug 2017, 13:14
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 .
C
clickshe
Pochi posts
Iscritto da
mag, 2012
Messaggi:
8
Re: Nascondere Radio Button in base a valore di lista a discesa
13 lug 2017, 13:20
Grazie Tommu, davvero grazie per il pensiero.
Ti farò sapere perchè devo correre a lavorare, ..stanotte farò i miei esperimenti.
Grazie di nuovo.

clickshe

Pochi posts

Iscritto da: mag, 2012

Messaggi:: 8

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

14 lug 2017, 11:41

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>

T
Tonmu
Pochi posts
Iscritto da
lug, 2017
Messaggi:
48
Re: Nascondere Radio Button in base a valore di lista a discesa
14 lug 2017, 13:08
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

clickshe

Pochi posts

Iscritto da: mag, 2012

Messaggi:: 8

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

15 lug 2017, 10:39

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>

T
Tonmu
Pochi posts
Iscritto da
lug, 2017
Messaggi:
48
Re: Nascondere Radio Button in base a valore di lista a discesa
15 lug 2017, 12:01
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) ?
C
clickshe
Pochi posts
Iscritto da
mag, 2012
Messaggi:
8
Re: Nascondere Radio Button in base a valore di lista a discesa
15 lug 2017, 12:19
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...)
T
Tonmu
Pochi posts
Iscritto da
lug, 2017
Messaggi:
48
Re: Nascondere Radio Button in base a valore di lista a discesa
15 lug 2017, 12:58
Ti basta aggiungere "document.getElementById('secondo').checked=true;" prima delle condizioni
C
clickshe
Pochi posts
Iscritto da
mag, 2012
Messaggi:
8
Re: Nascondere Radio Button in base a valore di lista a discesa
15 lug 2017, 13:10
..io direi che basta così... (speriamo)
GRAZIE.

Devi accedere o registrarti per scrivere nel forum

13 risposte