Salve a tutti, premetto che non sono molto pratica con JS ed effettuando una ricerca nel forum non ho trovato un problema simile al mio.
Mi sono fermata alla creazione del seguente modulo di invio:
il mio problema e che vorrei fare in modo da far cambiare colore da rosso a verde e viceversa i campi attivati dalla select , enabled=verde disabled=rosso, in piu' solo i campi attivi diverrebbero obbligatori oltre che di colore verde.Codice PHP:<html>
<head>
<style>
.rosso {background: red}
.verde {background: green}
</style>
<script language="JavaScript" type="text/javascript">
function test(value) {
if (value == '1') {
document.getElementById('campo1').disabled = true;
document.getElementById('campo2').disabled = true;
document.getElementById('campo3').disabled = true;
document.getElementById('campo4').disabled = true;
document.getElementById('campo5').disabled = true;
document.getElementById('campo6').disabled = true;
}
if (value == '2') {
document.getElementById('campo1').disabled = false;
document.getElementById('campo2').disabled = true;
document.getElementById('campo3').disabled = false;
document.getElementById('campo4').disabled = true;
document.getElementById('campo5').disabled = true;
document.getElementById('campo6').disabled = true;
}
if (value == '3') {
document.getElementById('campo1').disabled = true;
document.getElementById('campo2').disabled = true;
document.getElementById('campo3').disabled = false;
document.getElementById('campo4').disabled = true;
document.getElementById('campo5').disabled = true;
document.getElementById('campo6').disabled = false;
}
if (value == '4') {
document.getElementById('campo1').disabled = true;
document.getElementById('campo2').disabled = false;
document.getElementById('campo3').disabled = false;
document.getElementById('campo4').disabled = false;
document.getElementById('campo5').disabled = true;
document.getElementById('campo6').disabled = true;
}
if (value == '5') {
document.getElementById('campo1').disabled = true;
document.getElementById('campo2').disabled = true;
document.getElementById('campo3').disabled = true;
document.getElementById('campo4').disabled = true;
document.getElementById('campo5').disabled = false;
document.getElementById('campo6').disabled = true;
}
}
function controlla1()
{
var controllo=false;
//validazione select
if (document.prot.select1.selectedIndex == 0)
{
controllo=true;
alert("Non hai specificato il Test");
}
if (controllo){return false}else{return true}
}
</script>
</head>
<body>
<form name="prot" method="post" OnSubmit="return controlla1(this)" action="invia.php">
<select id="select1" onchange="test(this.value)">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
</select>
<input type="text" id="campo1" size="8" CLASS="rosso">
<input type="text" id="campo2" size="8" CLASS="rosso">
<input type="text" id="campo3" size="8" CLASS="rosso">
<input type="text" id="campo4" size="8" CLASS="rosso">
<input type="text" id="campo5" size="8" CLASS="rosso">
<input type="text" id="campo6" size="8" CLASS="rosso">
<input type="submit" Value="Invia" name="Inv"></p>
</form>
</body>
</html>
Esempio, se dalla select scelgo test3, saranno attivi i campi 3 e 6 e diventeranno di colore verde e il form non potra' essere inviato fino a quando questi ultimi non saranno riempiti.
Non so se e possibile farlo anche senza utilizzare gli style e facendo solo una funzione in JS.
Spero che mi possiate aiutare
Grazie in anticipo per le risposte
Saluti
Milena

, premetto che non sono molto pratica con JS ed effettuando una ricerca nel forum non ho trovato un problema simile al mio.
Rispondi quotando