[Javascript] Problema con reset

25-08-2006, 16.22.42

Ci sono a dietro da due ore e non riesco a trovare il baco in questo pezzettino di codice di Javascript (serve per il ricamo a punti contati, ma non è importante questo). Avviene il reset della form anche quando non si preme il pulsante di reset, ad esempio quando si cliak il tasto "Calcola!" dovrebbero uscire i numeri calcolati e restare lì, invece il form viene resettato subito. Ho provato anche a togliere tutto il codice e il pulsante di rest, ma fa lo stesso questo difetto.... Sto sclerandoci, grazie a chi mi dà una mano!!!!!!!!!

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//IT">
<html>
<head>
<title>Calcola la grandezza del tuo ricamo by xmcarter@email.it</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2" type="text/javascript">
<!--

function ClearForm(form){
    form.larghpunti.value = "";
    form.lunghpunti.value = "";
    form.larghcm.value = "";
    form.lunghcm.value = "";
}

function checkform(form) {
       if (form.larghpunti.value==0||form.lunghpunti.value==0){
            alert("\nPer favore, inserisci i punti.");
            return false;
       }
	   else if (form.tela.value==0){
	       alert("\nPer favore, scegli il tipo di tela.");
		   return false;
	   }
	   else return true;
	   }
	   
function calcolatela(misuratela, punti){
       cm = 10*(punti/misuratela);
	   return cm;
}
	   
function calcola(form) {
if (checkform(form)){
	form.larghcm.value=calcolatela(form.tela.value, form.larghpunti.value);
	form.lunghcm.value=calcolatela(form.tela.value, form.lunghpunti.value);
}
return;
}

-->
</script>
<script>
<!--
function printpage() {
	if (window.print) {
		window.print();
	} else {
		alert('Attenzione: il tuo browser non supporta questa funzione. Usa il menù per stampare.');
	}
}
// -->
</script>
<style type="text/css">
<!--
.nonsottolineato {
	text-decoration: none;
     a, a:hover, a:visited{
	 text-decoration: none;}
}
-->
</style>
</head>

<body>

<form method="post" name="puntocroce">
<table width="100%" border="1">
<tr> 
    <td width="32%">Larghezza (in punti)</td>
    <td width="31%">Lunghezza (in punti)</td>
        <td width="37%">Tipo di tela</td>
  </tr>
    <tr> 
      <td><input name="larghpunti" onfocus="this.form.larghpunti.value=''"></td>
      <td><input name="lunghpunti" onfocus="this.form.lunghpunti.value=''"></td>
      <td><select name="tela" id="tela" onfocus="this.form.tela.value=''">
          <option value="0" selected>seleziona la tela</option>
          <option value="44">Aida 44</option>
          <option value="55">Aida 55</option>
          <option value="72">Aida 72</option>
          <option value="92">Hardanger 92</option>
          <option value="46">Hardange 46</option>
          <option value="110">Emiane</option>
          <option value="73">Belfast</option>
        </select></td>
    </tr>
    <tr> 
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><input onclick="calcola(form)" type="submit" value="Calcola!"></td>
    </tr>
  <tr> 
    <td>Larghezza (in cm)</td>
    <td>Lunghezza (in cm)</td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td><input name="larghcm" type="text" id="larghcm"></td>
    <td><input name="lunghcm" type="text" id="lunghcm"></td>
	
	
      <td><a href="#" onClick="printpage(); return false">
        <input name="stampa" type="button" class="nonsottolineato" id="stampa" value="Stampa">
        </a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
	<input onclick="ClearForm(this.form)" value="Cancella" type="reset"></td>
  </tr>
</table>
  </form>
<p>&nbsp; </p>
</body>
</html>

25-08-2006, 20.08.01

Mmm... A occhio e croce vedo che il form non manda valore a una pagina successiva ma... viene gestito tutto in una pagina con javascript... prova a sostituire:

Codice HTML:

<input onclick="calcola(form)" type="submit" value="Calcola!">

con

Codice HTML:

<input onclick="calcola(form)" type="button" value="Calcola!">

25-08-2006, 20.11.08

Graaaaaazie!!!!!!!!
Perfetta!

Già che ci siamo, posso chiederti in che modo posso fargli approssimare il risultato da visualizzare a 1 o 2 cifre decimali?

Grazie mille!!!!!!!!!!

25-08-2006, 20.17.29

Prego figurati non c'è di che

.
Per arrotondare prova a modificare la funzione "calcolatela" con:

Codice HTML:

function calcolatela(misuratela, punti){
	   cm = 10*(punti/misuratela);
	   cm = Math.round(cm*100)/100;
	   return cm;
}

Prova

25-08-2006, 20.46.18

Perfetto, sei un mito (il Math.round mi toglieva i demicali, ma così è OK!).
Mi sa che non tii saresti mai immaginato di sistemare un codice Javascript per il punto croce, eh? ;)
BTW, bell'avatar, adoro i gatti!
Grazie ancora!

25-08-2006, 20.55.12

di nulla

**heracleum** · 25-08-2006, 21.34.33

Scusate..
posso tornare un attimo indietro al problema iniziale, che a mio avviso è stato solo "bypassato", saltato, ma c'è un modo molto più solido per farlo.
Tieni anche da conto che hai alcune caselle di testo nelle quali, se premuto il tasto "Enter" (Invio) può verificarsi nuovamente il problema (puoi provare, ma sono sicuro che si verifica)

Chiarisco la situazione, non è un "reset" ma il form viene letteralmente INVIATO (submit) e questo implica il ricaricamento della pagina che contiene il form, ok?
Quindi, per esaurire ulteriormente dubbi, di solito i form vengono usati per inviare dati ad un indirizzo URL che viene indicato tramite l'attributo action:
<form action="..url.." ...>

Se action non viene indicato il browser assume che si voglia inviare dati alla pagina stessa in cui ci si trova, quindi si ricarica la pagina inviando dati.
Questo invio ("submit") può avvenire tramite pressione di un tasto "submit" (che è la norma) ma anche premendo Invio in alcuni elementi del form.
Il tasto submit l'avete tolto evitando la prima "causa" di submit ma il secondo rimane.

Spero di esser stato abbastanza comprensibile.

Ora, io farei l'inverso! Invece di togliere cause di submit, GESTIREI il submit come si conviene, governandolo a dovere, cioè:

1) il tasto torna ad essere "submit" ma senza bisogno di gestirne l'onlick, quindi semplicemente:

Codice HTML:

<input type="submit" value="Calcola!">

2) il form gestisce qualsiasi evento riesca a generare un submit eseguendo la funzione di calcolo. Poi visto che a noi NON interessa inviare dati a nessuna pagina, neanche a sé stessa, evitiamo la prosecuzione del submit dichiarando di ritornare sempre "false" in casi di submit, si usa l'evento onsubmit=".." e non serve affatto neanche il method="post" a questo punto, dunque:

Codice HTML:

<form name="puntocroce" onsubmit="calcola(this); return false;">

return false teoricamente sarebbe più pratico farlo ritornare dalla function calcola stessa, com'è ora alla fine fa solo "return;" se facesse "return false;" potresti usare un più logico:
onsubmit="return calcola(this);"
Quindi in sostanza entrambi i modi dicono all'evento onsubmit, ritornando SEMPRE e comunque false, che l'invio dati ad un indirizzo non deve avvenire e di fermarsi.

Ora sinceramente non capisco come fa a funzionarti quando passi una variabile "form" un po' ovunque.. non so mi sfugge, cmq visto che il metodo calcola ora viene chiamato dall'onsubmit del tag FORM, posso benissimo utilizzare solo in questo caso il valore "this" (riferimento all'oggetto-tag corrente) cioè il form stesso.

25-08-2006, 22.15.14

Quindi una cosa del genere?

Codice:

<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//IT">
<html>
<head>
<title>Calcola la grandezza del tuo ricamo by xmcarter@email.it</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2" type="text/javascript">
function ClearForm(form){
    form.larghpunti.value = "";
    form.lunghpunti.value = "";
    form.larghcm.value = "";
    form.lunghcm.value = "";
}

function checkform(form) {
       if (form.larghpunti.value==0||form.lunghpunti.value==0){
            alert("\nPer favore, inserisci i punti.");
            return false;
       }
	   else if (form.tela.value==0){
	       alert("\nPer favore, scegli il tipo di tela.");
		   return false;
	   }
	   else return true;
	   }
	   
function calcolatela(misuratela, punti){
      cm = 10*(punti/misuratela);
	cm = Math.round(cm*100)/100;
	return cm;
}
	   
function calcola(form) {
if (checkform(form)){
	form.larghcm.value=calcolatela(form.tela.value, form.larghpunti.value);
	form.lunghcm.value=calcolatela(form.tela.value, form.lunghpunti.value);
}
return;
}

-->
</script>
<script>
<!--
function printpage() {
	if (window.print) {
		window.print();
	} else {
		alert('Attenzione: il tuo browser non supporta questa funzione. Usa il menù per stampare.');
	}
}
// -->
</script>
<style type="text/css">
<!--
.nonsottolineato {
	text-decoration: none;
     a, a:hover, a:visited{
	 text-decoration: none;}
}
-->
</style>
</head>

<body>

<p>Calcola la grandezza del tuo ricamo in base ai punti:</p>
<p>Inserisci i dati nella tabella azzurra, quindi clicka su calcola. I risultati 
  appariranno subito della tabella gialla. Per stampare questa pagina, in modo 
  da avere i tuoi risultati a portata di mano, clicka sul pulsante di stampa. 
  Se usi una tela le cui proporzioni non sono inserite in questa pagina, <a href="mailto:xmcarter@email.it">scrivimi</a>, 
  aggiunger&ograve; al pi&ugrave; presto la tua tela.<br>
</p>
<form name="puntocroce" onsubmit="calcola(this); return false;">
<table width="100%" border="1">
<tr> 
    <td width="32%">Larghezza (in punti)</td>
    <td width="31%">Lunghezza (in punti)</td>
        <td width="37%">Tipo di tela</td>
  </tr>
    <tr> 
      <td><input name="larghpunti" onfocus="this.form.larghpunti.value=''"></td>
      <td><input name="lunghpunti" onfocus="this.form.lunghpunti.value=''"></td>
      <td><select name="tela" id="tela" onfocus="this.form.tela.value=''">
          <option value="0" selected>seleziona la tela</option>
          <option value="44">Aida 44</option>
          <option value="55">Aida 55</option>
          <option value="72">Aida 72</option>
          <option value="92">Hardanger 92</option>
          <option value="46">Hardange 46</option>
          <option value="110">Emiane</option>
          <option value="73">Belfast</option>
        </select></td>
    </tr>
    <tr> 
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><input type="submit" value="Calcola!"></td>
    </tr>
  <tr> 
    <td>Larghezza (in cm)</td>
    <td>Lunghezza (in cm)</td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td><input name="larghcm" type="text" id="larghcm"></td>
    <td><input name="lunghcm" type="text" id="lunghcm"></td>
	
	
      <td><a href="#" onClick="printpage(); return false">
        <input name="stampa" type="button" class="nonsottolineato" id="stampa" value="Stampa">
        </a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
	<input onclick="ClearForm(this.form)" value="Cancella" type="reset"></td>
  </tr>
</table>
  </form>
<p>&nbsp; </p>
</body>
</html>

Grazie ad entrambi dell'aiuto, ho provato a cambiarlo e così mi sembra che funga molto meglio.

Il mio problema è che non ho mai studiato seriamente il Javascript e.... ehm! Si vede! ;D Sopportatemi, dai, il sito è quasi finito (è la 5^ volta che lo rifacico, ma non avevo mai usato così tanto JS).

Discussione: [Javascript] Problema con reset

LinkBack

Strumenti discussione

Display

[Javascript] Problema con reset

Regole di scrittura