[javascirpt] mostra/nascondi select,non mi va

[nexus]

cia a tutti,premettendo che di java ne so a dir poco nulla,
sto cercando di realizzare un mostra/nascondi select in base al radio button premuto.
di base vedo un select, se premo l'altro radio button mi mostra il secondo select, se ripremo il primo radio button mi mostra il primo select..e cosi via.

come ho fatto io no va e tra l'altro mi risulta graficamente un td in piu'(nonostante abbia cercato di nasconderlo)sballandomi completamente la pagina. come posso fare?

<script language="JavaScript" type="text/JavaScript">
<!--
function Visualizza(valore)
{
   if(valore == 1)
   {
    document.getElementById('Campo1').style.visibility = "visible";
    document.getElementById('Campo2').style.visibility = "hidden";
   } 
   else
    if(valore == 2)
    {
      document.getElementById('Campo2').style.visibility = "visible";
      document.getElementById('Campo1').style.visibility = "hidden";
    }  
}
//-->
</script>
<?php
<td><h4>tipologia di arma:spada
<input name="atype" type="radio" value="spada" checked
onchange="javascript: Visualizza(this.options[this.selectedIndex].value)">

ascia 
<input name="atype" type="radio" value="ascia" 
onchange="javascript: Visualizza(this.options[this.selectedIndex].value)">
</td>


<tr>
<td id="Campo1" style="visibility: visible"><h4>spada                    
<select name="spada" class="menu02">
<option>bastarda</option>
<option>lunga</option>
<option>corta</option>
<option>a due mani</option>
</select>
</h4></td>

<td id="Campo2" style="visibility:hydden "><h4>ascia                   
<select name="ascia" class="menu02">
<option>una mano</option>
<option>da lancio</option>
<option>due mani</option>
<option>orchesca</option>
</select>
</h4></td>
</tr>

[Xinod]

la sintassi e' errata x campi di tipo radio,
mentre sarebbe corretta per una select

basta semplicemente
onclick="Visualizza(1)"
x spada e
onclick="Visualizza(2)"
x ascia

se lo scenario dovesse complicarsi (molte + armi) questo non sarebbe il modo migliore di procedere...
ciao

[nexus]

<?php
<td><h4>tipologia di arma:spada
<input name="atype" type="radio" value="spada" checked
onchange="java script: Visualizza(1)">

      ascia 
<input name="atype" type="radio" value="ascia" 
onchange="java script: Visualizza(2)">
</td>


<tr>
<td><h4>armi                  
<select name="spada" class="menu02" id="Campo1" style="visibility: hydden">
<option>bastarda</option>
<option>lunga</option>
<option>corta</option>
<option>a due mani</option>
</select>

<select name="ascia" class="menu02" id="Campo2" style="visibility:hydden" >
<option>una mano</option>
<option>da lancio</option>
<option>due mani</option>
<option>orchesca</option>
</select>
</h4></td>
</tr>

ok,funziona solo che ho uno strano problema.
appena carico la pagina non vedo nemmeno un select.
se clicco su ascia, mi compare il select nel posto giusto,ma appena lo premo si sposta piu' sotto.
se poi ripremo spada e poi vado a premere il select, si sposta il select nel posto dove lo vorrei io
hai un idea di cosa potrei aver sbalgiato?

adesso non so quante cene saranno, dipende tutto da quante ne trovano durante una sessione di D&D.
è un menu a tendina che mi metto per controllare dal portatile l'inventario, la velocità, e i danni fatti dai giocatori.

cosa mi consigli se si dovesse arrivare a 10 15 armi? puo' andare bene lo stesso?

[nexus]

ok forse ho capito quale possa essere il problema.
se faccio click sui radio button non mi da il risultato subito.
mi spiego meglio, premo su un radio button,e non succede nulla,clicco su un punto qualunque della pagina e allora mi esegue lo script java.

per il fatto che mi sposta il select, motlo probabilmente è che uso lo style visibility, quando in realtà dovrei andargli a dire di caricare o meno quella porzione di script HTML/PHP.

il problema è che non ho la minima idea di come fare

dovrei scrivere uan cosa del genrere:

<script language="JavaScript" type="text/JavaScript">
<!--
function Visualizza(valore)
{
   if(valore == 1)
   {
    document.getElementById('Campo1').style.visibility = "visible";
    document.getElementById('Campo2').style.visibility = "hidden";
   } 
   else
    if(valore == 2)
    {
      document.getElementById('Campo2').style.visibility = "visible";
      document.getElementById('Campo1').style.visibility = "hidden";
    }  
}
//-->
</script>
<?php
<td><h4>tipologia di arma:spada
<input name="atype" type="radio" value="spada" checked
onchange="java script: Visualizza(this.options[this.selectedIndex].value)">

      ascia 
<input name="atype" type="radio" value="ascia" 
onchange="java script: Visualizza(this.options[this.selectedIndex].value)">
</td>


<tr>
<?php if (valore==1){
echo"
<td><h4>spada                    
<select name='spada' class='menu02'>
<option>bastarda</option>
<option>lunga</option>
<option>corta</option>
<option>a due mani</option>
</select>
</h4></td>";
}
else if (valore==2){
echo "<td><h4>ascia                   
<select name="ascia" class="menu02">
<option>una mano</option>
<option>da lancio</option>
<option>due mani</option>
<option>orchesca</option>
</select>
</h4></td>";
}
</tr>

questo è piu o meno quello che vorrei realizzare..tralasciando il fatto che la condizione dovrei farla con java altrimenti non lo cambia in maniera dinamica.

non so se si possa magari creare una funzione in javascript che contiene html e che in base al radio premuto mi vada a cricare una funzione o l'altra

[Xinod]

chiarisciti le idee circa quello che si fa lato client e quello che si fa lato server

se vuoi parti di codice in risposta da qualsiasi linguaggio lato server dopo che il documento e' stato completamente caricato o ricarichi la pagina o carichi in frame/iframe/popup e passi i dati alla principale o usi ajax & simili

in tutti gli altri casi tutti i dati devono trovarsi gia' nel documento a caricamento avvenuto

quale via devi seguire?

[nexus]

allora, cerco di spiegarmi a parole che in altri modi non sono molto bravo.
vorrei avere una pagina(sto usando php al momento)dove ho un form con due radio button, al momento in cui premo o un radio button o l'altro devrebbe modificarmi il select sottostante.
mi va bene anche ricaricare la pagina.
ho cercato di modificare e riscrivere il tutto. alla fine diciamo che ho ottenuto il risultato che quando premo, mi carica una pagina nuova con il solo select

<script language="JavaScript" type="text/JavaScript">
function Visualizza(valore)
{
   if(valore == 1)
   {document.write("<select name=risp>");
document.write("<option>verde</option>");
document.write("<option>giallo</option>");
      }
}
</script>
<body>
vuoi scegliere?:
<input name="conf" type="radio" value="si" onclick="java script: Visualizza(1)">SI
input name="conf" type="radio" value="no" checked onclick="java script: Visualizza(0)">no
<script>
visualizza()
</script>
</body>

ecco una cosa del genere,ho provato ma come dicevo mi carica un altra pagina con il select, anche se cancello la parte visualizza()
se mi dici che si puo' fare ricaricando la pagina, ben venga.
basta sapere come fare

[Xinod]

cosi' non stai ricaricando la pagina ne' effettuando un nuova richiesta al server
stai scrivendo al volo un documento che, dal momento che quello che hai caricato e' completo, chiuso, lo sostituisce

se la mole di dati e' tale da obbligare a ricaricare e' meglio ricaricare (es. tutti i comuni italiani in base alla provincia)
idem se ti trovi + comodo a fornire output diversi lato server

altrimenti tutto nell' unica pagina e puro javascript a mostrare/nascondere

[nexus]

xinod,ti hciedo direttamente consiglio a te sul da farsi.
devo "semplicemente" far apparire un select
(non usando hidden perche ho notato che la parte nascosta comuqneu mi occupa spazio, e il secondo seletc mi va a spasso per la pagina)

che cambia a seconda del radio button premuto, che ricarichi la pagina o meno.

appena caricata la pagina

o spada     O ascia
 _______
|_______|tipo    <--select 1


se premo su ascia:
O spada     o ascia
 _______
|_______|tipo   <--select 2

ma non ho piu' idea di come fare

non so se puo' essere utile saperlo ma la pagina
è difatto una pagina fatta in html messa in un file con estensione php dato che questa è una pagina collegata ad un sito locale interamente in php

[nexus]

pensandoci penso di poter ovviare a gran parte di tutto mischiando le due cose.
se riesco a capire come far ricaricare la pagina con la pressione dei radiob. passando il valore 1 o 2 com evariabile di php il mio problema sarebbe risolto.
solo che girovagando qua e la non riesco a trovare qualcosa del tipo
onclick= link alla stessa pagina e $valore=1

a quel punto con una semplice condizione in php mi risolvo tutto.
avresti voglia di darmi un ultimo aiuto?
grazie

ok nel frattempo ho appena scoperto come far ricaricare la pagina
location.reload();
ma ora devo scoprire se posso ricaricarla inviando una variabile che php possa comprendere

[Xinod]

io intanto ti avevo preparato un esempio senza ricaricare la pagina

<html>
<head>
<title></title>
<style type="text/css">
<!--
table {
	border-collapse:separate;
	border:1px solid #f90;
}
td {
	border:1px solid #090;
}
.trSel {
	display:none;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function Visualizza(num){
	// modifica solo il numero totale delle select
	var totSel=2;

	var domBlock=(navigator.appName.toLowerCase().indexOf('msie')>-1)?'block':'table-row';
	for(var k=1;k<=totSel;k++){
		document.getElementById('tr'+k).style.display=(k==num)?domBlock:'none';
	}
}
window.onload=function(){
	var f=document.forms['selezioneArmi']
	for(var q=0;q<f.elements.length;q++){
		if(f.elements[q].name=='atype' && f.elements[q].checked) f.elements[q].checked=false;
	}
}
//-->
</script>
</head>
<body>
<form name="selezioneArmi">
<table>
  <tr>
    <th>tipologia di arma:spada<input name="atype" type="radio" value="spada" onclick="Visualizza(1)" />
      ascia <input name="atype" type="radio" value="ascia" onclick="Visualizza(2)" />
    </th>
  </tr>
<tr id="tr1" class="trSel"><td>
<select name="spada">
<option>bastarda</option>
<option>lunga</option>
<option>corta</option>
<option>a due mani</option>
</select>
</td></tr>
<tr id="tr2" class="trSel"><td>
<select name="ascia">
<option>una mano</option>
<option>da lancio</option>
<option>due mani</option>
<option>orchesca</option>
</select>
</td></tr>
</table>
</form>
</body>
</html>

ciao