Caricare campi diversi all'interno di una form

**blur** · 31-01-2017, 12:52

Ciao,

ho questo esempio:

codice:

<html><head>
<script type="text/javascript">
function printResult()
{
    var selectedVal = document.forms[0].list.options[document.forms[0].list.selectedIndex].value;
    document.getElementById("showResult").innerText = "Your number is: " + selectedVal;
    
   
    return false; //dont submit the form
}
</script>
</head>
<body>
<form action="" onSubmit="return printResult(this);">
<select name="list" onChange="printResult();">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<input type="submit" value="Submit">
  </form>
<span id="showResult"></span>
</body>
</html>

In pratica, quello che desidero fare ï¿½:
Effettuata la scelta dalla <select>, vorrei caricare campi form diversi per ogni scelta
esempio:
value = "1" visualizzo all'interno del form i campi a,b,c
value = "2" visualizzo i campi e,f,g
etc etc

Lo script mi permette di NON ricaricare la pagina e questo ï¿½ essenziale. Non so come mettere all'interno di selectedVal i valori desiderati ( i campi) e stamparli a seconda della scelta.
Potete aiutarmi?

Grazie

**marino51** · 31-01-2017, 17:28

potresti mettere tutti i campi nel form ma non visibili (type="hidden") e visualizzarli in funzione della selezione
potresti anche racchiuderli in div sempre non visibili,
valuta il diverso comportamento delle soluzioni con degli esempi

**blur** · 31-01-2017, 18:47

Originariamente inviata da marino51

potresti mettere tutti i campi nel form ma non visibili (type="hidden") e visualizzarli in funzione della selezione
potresti anche racchiuderli in div sempre non visibili,
valuta il diverso comportamento delle soluzioni con degli esempi

Ciao e grazie della risposta.
Se dovessi fare tutto via PHP userei il metodo GET e poi tramite switch in base al valore che ho, filtro i campi da visualizzare ma questo comporta dover ricaricare la pagina perdendo quello impostato nei campi precedenti. Per questo devo usare JS ma la forma non la conosco.
Un esempio?
grazie

**Little Hawk** · 02-02-2017, 21:21

Qualcosa del genere?

codice:

<html>


<head>
	<style>
		.fields {
			display: none;
		}
	</style>


	<script type="text/javascript">
		function printResult() {
			var selectedVal = document.forms[0].list.options[document.forms[0].list.selectedIndex].value;
			var fieldGroups = document.getElementsByClassName("fields");


			for (var i = 0; i < fieldGroups.length; i++) {
				fieldGroups[i].style.display = "none";
			}


			document.getElementById("fields" + selectedVal).style.display = "block";
			document.getElementById("showResult").innerText = "Your number is: " + selectedVal;


			return false; //dont submit the form
		}
	</script>
</head>


<body>
	<form action="" onSubmit="return printResult(this);">
		<select name="list" onChange="printResult();">
	    <option value="1">1</option>
	    <option value="2">2</option>
	    <option value="3">3</option>
		</select>


		<div id="fields1" class="fields">
			<input type="text" value="Field 1 of group 1">
			<input type="text" value="Field 2 of group 1">
		</div>


		<div id="fields2" class="fields">
			<input type="text" value="Field 1 of group 2">
			<input type="text" value="Field 2 of group 2">
		</div>


		<div id="fields3" class="fields">
			<input type="text" value="Field 1 of group 3">
			<input type="text" value="Field 2 of group 3">
		</div>




		<input type="submit" value="Submit">
	</form>
	<span id="showResult"></span>
</body>


</html>

**blur** · 03-02-2017, 11:54

Ciao Little Hawk

si, come partenza può andare bene. Grazie mille!!

Discussione: Caricare campi diversi all'interno di una form

Strumenti discussione

Ricerca discussione

Visualizza

Caricare campi diversi all'interno di una form

Permessi di invio