Problema tra Form e Javascript

di
skizzo66
il
1 risposte
S
skizzo66
Pochi posts
Iscritto da
mar, 2017
Messaggi:
30

Problema tra Form e Javascript

Ragazzi ho un problema al quale non riesco a venire a capo. In tutte le mie pagine web per qualche motivo i form non funzionano, ora vi spiego i dettagli. Pagine web fatte da prof, come questa, funzionano perfettamente:
<html>
 <head>
  <title>form</title>
  <script type="text/javascript">
		function Stampa () 
		{
			b="";
			a=f1.nome.value + " " + f1.cognome.value ;
			if (f1.hobby1.checked)
				b=b+" sport";
			if (f1.hobby2.checked)
				b=b+" lettura";
			if (f1.hobby3.checked)
				b=b+ " cinema";
			if (f1.hobby4.checked)
				b=b+ " Internet";
			if (f1.sesso[0].checked)
				c=f1.sesso[0].value
			else
				c=f1.sesso[1].value
				
			if (f1.paese.options[0].selected)
				d=f1.paese.options[0].value
			else
				d=f1.paese.options[1].value
				
			document.write ("nome e cognome "+ a + "<br> "+ "hobbies " + b +"<br>"+ "sesso " +c + "<br>"+ "provenienza "+d );
			
			
			}
</script>
</head>
 <body>
   
 <form method="post" action="xxx" name="f1" onreset="return confirm('sicuro?')">

  <!-- CASELLE DI TESTO -->
  Nome
  <input type="text" name="nome" id="nome">
  Cognome
  <input type="text" name="cognome" id="cognome"><br>
  
  <!-- SELECTBOX -->
  Paese<br>
  <select name="paese" id="paese">
  <option value="Italia">Italia</option>
  <option value="Estero">Estero</option>
  </select><br>

  <!-- RADIO -->
  Sesso<br>
  <input type="radio" name="sesso" id="m" value="M" CHECKED> M<br>
  <input type="radio" name="sesso" id="f" value="F"> F<br>

  <!-- CHECKBOX -->
  Hobby<br>
  <input type="checkbox" name="hobby1" id="sport" value="S" CHECKED> Sport<br>
  <input type="checkbox" name="hobby2" id="lettura" value="L"> Lettura<br>
  <input type="checkbox" name="hobby3" id="cinema" value="C"> Cinema<br>
  <input type="checkbox" name="hobby4" id="internet" value="I"> Internet<br>

  <!-- TEXTAREA -->
  Commento<br>
  <textarea name="commento" rows="5" cols="30"></textarea>
  <br><br>

  <!-- SUBMIT -->
  <input type="button" name="stampa" value="stampa i dati" onclick="Stampa()">
  <input type="reset" name="annulla" value="Cancella" >
  
</form>

 </body>
 </html>
(Per quanto possa esser brutta è solo un esempio). Nelle mie pagine invece l'oggetto Form, che ha un nome, in questo caso l'ho chiamato "f1" non è mai definito. All'avvio della pagina i form non si avviano e non posso gestire l'interazione con l'utente. Non riesco a capire cosa non va. Per quanto riguarda i form io credo di aver replicato fedelmente il modo di funzionamento giusto: all'interno del tag <script> richiamo un elemento del form facendo "f1.name.value" e dovrebbe funzionare, nel listato del professore funziona, perchè a me invece da non definito "f1"?

Questo è il codice:
<html>

	<head>
		
		<meta charset = "UTF-8">
		
		<title> Verifica Rizzo Fila 1</title>
		
		<script type = "text/javascript">
		
		
			var a = f1.num1.value; //Prelevo gli input come stringhe
			var b = f1.num2.value;
			var c = f1.num3.value;
			
			
			var array = [];
			array.push(a);
			array.push(b);
			array.push(c);
		
			function Dispari() //numero di cifre dispari nei 3 numeri
			{
			
				var num_dispari = 0;
				
				var arrayA = []; //Inserisco le cifre nei rispettivi array
				var arrayB = [];
				var arrayC = [];
				
				arrayA = a.split("");
				arrayB = b.split("");
				arrayC = c.split("");
				
				for (var i = 0; i < arrayA.length; i++)
				{
				
					if ((parseInt(arrayA[i]) % 2) != 0)
					{
					
						num_dispari++;
					
					}
				
				}
				
				
				for (var i = 0; i < arrayB.length; i++)
				{
				
					if ((parseInt(arrayB[i]) % 2) != 0)
					{
					
						num_dispari++;
					
					}
				
				}
				
				for (var i = 0; i < arrayC.length; i++)
				{
				
					if ((parseInt(arrayC[i]) % 2) != 0)
					{
					
						num_dispari++;
					
					}
				
				}
				
				f1.dispari.value = num_dispari;
				
			
			}
			
			
			function Minore()
			{
			
				//Determino la cifra minima
				var min = 100000;
				
				for (var i = 0; i < 3; i++)
				{
				
					if (parseInt(array[i]) < min)
					{
					
						min = parseInt(array[i]);
					
					}
				
				}
				
				//Trovo la cifra minima del numero
				var cifra_minima = 10;
				var cifreMinimo = [];
				cifreMinimo = min.split("");
				
				for (var i = 0; i < cifreMinimo.length; i++)
				{
				
					if (parseInt(cifreMinimo[i]) < cifra_minima)
					{
					
						cifra_minima = parseInt(cifreMinimo[i]);
					
					}
				
				}
				
				f1.minima.value = cifra_minima;
				
				
				//Determino la cifra massima
				var cifra_massima = 0;
				
				for (var i = 0; i < cifreMinimo.length; i++)
				{
				
					if (parseInt(cifreMinimo[i]) > cifra_massima)
					{
					
						cifra_massima = parseInt(cifreMinimo[i]);
					
					}
				
				}
				
				f1.massimo.value = cifra_massima;
			
			}
			
			
			function SommaPari()
			{
			
				//Determino il massimo
				var max = 0;
				var somma_pari = 0;
				
				for (var i = 0; i < 3; i++)
				{
				
					if (parseInt(array[i]) > max)
					{
					
						max = parseInt(array[i]);
					
					}
				
				}
				
				//Determino la somma dei pari
				for (var i = 0; i < 3; i++)
				{
				
					if((array[i] != max) && ((array[i] % 2) == 0)) //Se e' pari e diverso dal massimo
					{
					
						somma_pari = somma_pari + array[i];
					
					}
				
				}
				
				f1.sommaPari.value = somma_pari;
			
			}
			
			
			function Equazione()
			{
			
				if (parseInt(a) == 0) //Se il primo numero e' zero allora l'equazione non e di primo grado
				{
				
					alert("Il coefficiente a e' zero quindi l'equazione non e' di secondo grado");
				
				}
				
				else
				{
				
					var discriminante = (parseInt(b) * parseInt(b)) - (4 * parseInt(a) * parseInt(c));
					
					f1.discriminante.value = discriminante;
					
					if (discriminante > 0)
					{
					
						f1.HaSoluzioni.value = "Si";
						f1.numSoluzioni.value = "2";
					
					}
					
					else if (discriminante = 0)
					{
					
						f1.HaSoluzioni.value = "Si";
						f1.numSoluzioni.value = "1";
					
					}
					
						if (discriminante < 0)
					{
					
						f1.HaSoluzioni.value = "No";
						f1.numSoluzioni.value = "0";
					
					}
					
					
				
				}
			
			}
		
		</script>
	
	</head>

	<body>
	
		<form name = "f1" method = "POST">
		
			<fieldset>
			
				<legend> Input </legend>
				
				Numero 1 <input type = "text" name = "num1"> <br> <br>
				Numero 2 <input type = "text" name = "num2"> <br> <br>
				Numero 3 <input type = "text" name = "num3"> <br> <br> <br>
				
				
			
			</fieldset>
			
			<fieldset>
			
				<legend> Elaborazione </legend>

				Cifre dispari totali nei 3 numeri <input type = "text" name = "dispari"><input type = "submit" name = "dispari1" value = "Dispari" onclick = "Dispari()"> <br> <br>
				Cifra minima del minore dei 3 numeri <input type = "text" name = "minima"> <input type = "submit" name = "minima1" value = "Minima e Massima" onclick = "Minore()"><br> <br>
				Cifra massima del minore dei 3 numeri <input type = "text" name = "massimo"> <br> <br>
				Somma dei numeri pari minori del maggior numero inserito <input type = "text" name = "sommaPari"> <input type = "submit" name = "SommadeiPari" value = "Somma dei pari"	onclick = "SommaPari()">	<br> <br>
				Discriminante dell'eventuale equazione di secondo grado <input type = "text" name = "discriminante"> <br> <br>
				L'equazioni ha soluzioni? <input type = "text" name = "HaSoluzioni"> <input type = "submit" name = "Equazioni" value = "Calcola Equazione" onclick = "Equazione()"> <br> <br>
				Quante soluzioni? <input type = "text" name = "numSoluzioni"> <br> <br>
			
			</fieldset>
		
		
		</form>
	
	</body>


</html>

1 Risposte

  • B
    Bazzilla
    Pochi posts
    Iscritto da
    gen, 2018
    Messaggi:
    3

    Re: Problema tra Form e Javascript

    Nelle mie pagine invece l'oggetto Form, che ha un nome, in questo caso l'ho chiamato "f1" non è mai definito.
    Il form "f1" è definito, ma non nel momento in cui cerchi di referenziarlo tu.
    Nella logica a cascata degli elementi di una pagina HTML, il tuo codice javascript viene eseguito PRIMA che l'oggetto form "f1" sia referenziabile, perchè il codice si trova nell'HEAD.
    Il codice javascript può interagire con il DOM solo dopo che la pagina è stata caricata.

    In pratica tu stai raccogliendo il valore dei campi di input num1, num2 e num3 quando questi ancora non esistono.

    Se vuoi che le variabili globali a, b, c ed array contengano i valori aggiornati dei campi di input, devi fare in modo che la lettura avvenga quando ti servono, ma soprattutto, quando esistono.

    Per esempio, puoi farti una funzione tipo: 
    
function LeggiValori()
{
   window.a = f1.num1.value; //Prelevo gli input come stringhe
   window.b = f1.num2.value;
   window.c = f1.num3.value;
            
   window.array = [];
   array.push(a);
   array.push(b);
   array.push(c);
}
    e chiamerai questa LeggiValori in cima a ogni tua funzione di calcolo, ad esempio: 
    
function Dispari()
{
   LeggiValori();
   ...
   ...
}
Devi accedere o registrarti per scrivere nel forum
1 risposte