radio button e.. visibility

borgo italia · 23 Mag 2009

ciao a tutti
non so se la sez va bene in quanto non so se mi servira js o php o...

ho un form di questo tipo

HTML:

<style type="text/css">
<!--
#sceltaSI {visibility: visible;}
#sceltaNO {visibility:hidden;}
-->
</style></head>
<body>
<!-- ..... -->
<form action="#" method="post">
scelta <input name="sc" type="radio" value="S" checked >SI&nbsp;&nbsp;&nbsp;<input name="sc" type="radio" value="N">NO
<br>
<div id="sceltaSI">
<input name="scelta_si" type="text" size="30" maxlength="30">
</div>
<div id="sceltaNO">
<input name="scelta_no" type="text" size="30" maxlength="30">
</div>
<input name="" type="submit" value="Invia">
</form>
<!-- ..... -->
</body>

quello che vorrei (non so se chiedo la luna) che in fuzione della selezione dell' input-radio diventasse visibile uno o l'altro degli input-text

è possibile una cosa del genere?

lotus · 23 Mag 2009

Certo che è possibile.

Devi modificare tramite javascript la propietà visibility.

Esempio:

document.getElementById("nomecampo").style.visibility="visible"

viceversa, per renderlo nascosto:

document.getElementById("nomecampo").style.visibility="hidden"

Quindi per risolvere il tuo problema devi:
1) Modificare i tuoi input field inserendo l'id a ciascuno (in alternativa il nome al form)
2) All'evento change del radiobutton devi invocare la funzione javascript che imposta la visibilità secondo quando indicato sopra.

Prova secondo questo input, se dovessi avere problemi cerco di farti un esempio completo.

Ciro

borgo italia · 23 Mag 2009

intanto grazie, provo e se non ci riesco riposto

borgo italia · 24 Mag 2009

ciao
non cavo il cosiddetto ragno da un buco posto quello che ho tentato (inutimente e con molte varianti) di fare

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>prova di visibilit&aacute;</title>
<script language="Javascript" type="text/javascript">
<!--
//le function non functiano però danno l'idea di quello che vorrei fare
function si(){
document.getElementById("prova.si").style.visibility="visible";
document.getElementById("prova.no").style.visibility="hidden";
}
function no(){
document.getElementById("prova.si").style.visibility="hidden";
document.getElementById("prova.no").style.visibility="visible";
}
function tutti(){
document.getElementById("prova.si").style.visibility="visible";
document.getElementById("prova.no").style.visibility="visible";
}
//-->
</script>
</head>
<body>
<form action="#" method="post" name="prova" id="prova">
     scelta
     <br><input name="sc" type="radio" value="S" checked onChange="si()">SI
     <br><input name="sc" type="radio" value="N" onChange="no()" >NO
     <br><input name="sc" type="radio" value="E" onChange="tutti()" >SI e NO

     <br>SI <input name="si" id="si" type="text" size="30" maxlength="30">
     <br>NO <input name="no" id="no" type="text" size="30" maxlength="30">

     <br><input name="Invia" type="submit" value="Invia">
</form>
</body>
</html>

il valore checked è sul primo checkbox alla prima chiamata della pagina, alle successive (tramite cookie) pùo essere su un altro check

non capisco, mentre con html/css, php, flash riesco a cavarmela, js non riesco a farmelo entrare nella zucca

p.s.
curiosità
lotus è un nuovo moderatore o un vecchio con nick nuovo??

lotus · 24 Mag 2009

Ciao ecco il codice in versione corretta.. provato e funziona.. Come vedi non avevi commesso nessun errore in particolare eccetto quello di non mettere l'id ai componenti (come ti avevo indicato) ed un " in +..

Come noterai in questo modo scompare il radiobutton ma rimane scritto
"SI" o "no". qualora dovessi riumoversi è semplice:
Inserisci le scritte all'interno di un tag span con un apposito id e dopo
modifica opportunamente le due funzioni javascript in modo da offuscare o visualizzare anche le scritte.

In ogni caso non scoraggiarti per javascript, se posso darti due consigli:
1) Un buon Editor Javascript
2) Usa un browser come firefox e nell'Opzione Controlla Errori troverai molte info per comprendere cosa non va nel tuo codice javascript...

Ciao, Ciro

Ps. sono nuovo..

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>prova di visibilitá</title>
<script>
function sceltasi()
{
alert("hai selezionato si");
document.getElementById("prova.si").style.visibility="visible";
document.getElementById("prova.no").style.visibility="hidden";
}

function sceltano()
{
alert("hai selezionato no");
document.getElementById("prova.si").style.visibility="hidden";
document.getElementById("prova.no").style.visibility="visible";
}

function tutti()
{
alert("hai selezionato tutti");
document.getElementById("prova.si").style.visibility="visible";
document.getElementById("prova.no").style.visibility="visible";
}

</script>

</head>
<body>
<form action="#" method="post" name="prova" id="prova">
scelta
<br><input id="prova.si" name="sc" type="radio" value="S" checked onchange="return sceltasi();">SI
<br><input id="prova.no" name="sc" type="radio" value="N" onchange="return sceltano();" >NO
<br><input name="sc" type="radio" value="E" onchange="return tutti();" >SI e NO

<br>SI <input name="si" id="si" type="text" size="30" maxlength="30">
<br>NO <input name="no" id="no" type="text" size="30" maxlength="30">

<br><input name="Invia" type="submit" value="Invia">
</form>
</body>
</html>

borgo italia · 25 Mag 2009

ciao e grazie:tifoso:
posto il codice come modificato se serve a qualcun altro

PHP:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>prova di visibilit&aacute;</title>
<script language="javascript" type="text/javascript">
<!--
function sceltasi()
{
//alert("hai selezionato si");
document.getElementById("prova.si").style.visibility="visible";
document.getElementById("prova.no").style.visibility="hidden";
}

function sceltano()
{
//alert("hai selezionato no");
document.getElementById("prova.si").style.visibility="hidden";
document.getElementById("prova.no").style.visibility="visible";
}

function tutti()
{
//alert("hai selezionato tutti");
document.getElementById("prova.si").style.visibility="visible";
document.getElementById("prova.no").style.visibility="visible";
}
-->
</script>

</head>
<body>
<?php
$prova="N";//messo $prova  in questa pagina non ci sono i cookie
//if(!isset($_COOKIE['siOno'])){
if($prova==""){
	$inS="checked";
	$inN="";
	$inSN="";
	$vis_S="style=\"visibility:visible;\"";
	$vis_N="style=\"visibility:hidden;\"";
}else{
	//switch($_COOKIE['siOno']){
	switch($prova){
		case "S":
			$inS="checked";
			$inN="";
			$inSN="";
			$vis_S="style=\"visibility:visible;\"";
			$vis_N="style=\"visibility:hidden;\"";
		break;
		case "N":
			$inS="";
			$inN="checked";
			$inE="";
			$vis_S="style=\"visibility:hidden;\"";
			$vis_N="style=\"visibility:visible;\"";
		break;
		case "E":
			$inS="";
			$inN="";
			$inE="checked";
			$vis_S="style=\"visibility:visible;\"";
			$vis_N="style=\"visibility:visible;\"";
		break;
		default:
			$inS="checked";
			$inN="";
			$inE="";
			$vis_S="style=\"visibility:visible;\"";
			$vis_N="style=\"visibility:hidden;\"";
		break;
	}
}//fine if selezione si o no
?>

<form action="#" method="post" name="prova" id="prova">
scelta
<br><input id="si" name="sc" type="radio" value="S" <?php echo $inS;?> onchange="return sceltasi();">SI
<br><input id="no" name="sc" type="radio" value="N" <?php echo $inN;?> onchange="return sceltano();" >NO
<br><input name="sc" type="radio" value="E" <?php echo $inE;?> onchange="return tutti();" >SI e NO
<div id="prova.si" <?php echo $vis_S;?> >
<br>SI <input name="si" id="p.si" type="text" size="30" maxlength="30">
</div>
<div id="prova.no" <?php echo $vis_N;?>>
<br>NO <input name="no" id="p.no" type="text" size="30" maxlength="30">
</div>
<br><input name="Invia" type="submit" value="Invia">
</form>
</body>
</html>

p.s.
pensavo lavato con perlana

borgo italia · 25 Mag 2009

ciao
una domanda ho diversi div da gestire, ora di <div id="prova.si"> ne posso mettere solo uno, quindi devo fare di <div id="prova.si1">, <div id="prova.si2">, eccetera e così pure nel js devo elencare tutti gli id,

function sceltano()
{
//alert("hai selezionato no");
document.getElementById("prova.si1").style.visibility="hidden";
document.getElementById("prova.si2").style.visibility="hidden";
//eccetera....
document.getElementById("prova.no1").style.visibility="visible";
document.getElementById("prova.no2").style.visibility="visible";
//eccetera....
}

mentre se usassi le classi non avrei questi problemi

esiste

document.getElementByClass ?
per cui

function sceltano()
{
//alert("hai selezionato no");
document.getElementByClass("prova.si").style.visibility="hidden";
document.getElementByClass("prova.no2").style.visibility="visible";
}

Cerca

Cerca

radio button e.. visibility

borgo italia

Super Moderatore

lotus

Utente Attivo

borgo italia

Super Moderatore

borgo italia

Super Moderatore

lotus

Utente Attivo

borgo italia

Super Moderatore

borgo italia

Super Moderatore

Discussioni simili