Joomla.it Forum
Componenti per Joomla! => Gestione Form => : vales 12 Apr 2009, 00:38:12
-
In Chronoforms è possibile calcolare il valore di alcuni campi in funzione dei valor inseriti in altri campi.
E' questa una potente funzionalità che consente importanti utilizzazioni del componente.
La soluzione è l'utilizzo del linguaggio Javascript.
Si procede come nel seguente esempio:
1) si crea una funzione Javascript come questa che verrà richiamata quando si inseriscono i valori nei campi desiderati
function updatethis(form) {
form.elements['Field3'].value = form.elements['Field1'].value * form.elements['Field2'].value);
}in questo caso la funzione calcola il campo Field3 come prodotto di Field1 * Field2
Il codice di questa funzione va inserito nella Tab Form code, del form creato, nella voce Form JavaScript dopo aver premuto +
2) si passa ora in Tab Form code alla voce Form HTML, sempre dopo aver premuto +, e nei campi input che ci interessano va inserita la chiamata della funzione Javascript, sopra citata, come nel seguente esempio
<input type="text" name="Field1" onChange="updatethis(this.form);"><br />
<input type="text" name="Field2" onChange="updatethis(this.form);"><br />
<input type="text" name="Field3"><br />
Con questo esempio quando cambiano in Field1 e Field2 verrà calcolato automaticamente Field3
Conoscendo il linguaggio Javascript si potranno ottenere delle funzionalità molto potenti .. e qui si apre un altro mondo nell'uso di Chronoforms.
Esempio collaudato in locale.
-
Molto interessante, scusa ma non sono proprio pratico. Stò seguendo le tue istruzioni ma il codice per richiamare il javascript va inserito come? Una riga per field e quindi tre separate oppure tutte e tre insieme o come?
Non ho capito questo passaggio...
Grazie
-
Il codice di questa funzione va inserito nella Tab Form code, del form creato, nella voce Form JavaScript dopo aver premuto +
Come in questa immagine e nell'area a destra inserisci il codice Javascript
[allegato eliminato da un amministratore essendo passati più di 365 giorni]
-
function updatethis(form) {
form.elements['costo_totale'].value = form.elements['costo_base'].value + form.elements['costo_iscrizione'].value);
}
questo l'ho messo dove hai detto tu,
ma questo?
<input type="text" name="Field1" onChange="updatethis(this.form);"><br />
<input type="text" name="Field2" onChange="updatethis(this.form);"><br />
<input type="text" name="Field3"><br />
Io ho provato così ma nn si aggiorna il campo desiderato...
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Quota Base</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_12" name="costo_base" type="text" onChange="updatethis(this.form) />
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Quota Base :: Quota Base</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Quota Iscrizione</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_13" name="costo_iscrizione" type="text" onChange="updatethis(this.form) />
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Quota Iscrizione :: Quota Iscrizione</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Totale</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_15" name="costo_totale" type="text" />
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Totale :: Totale</div>
</div>
<div class="cfclear"> </div>
</div>dove sbaglio?? perdonami ma nn ci capisco molto di codice...
-
Quello mio è un'esempio con tre campi, in cui il terzo campo è il prodotto dei primi due. Non puoi trasferire l'intero codice nel tuo.
Devi solo inserire la chiamata alla funzione
onChange="updatethis(this.form);"
nei tuoi campi che entrano in gioco nel calcolo.
A proposito ho visto che non hai trascritto bene la chiamata mancano il punto e virgola e gli apicini finali.
-
si si, io ho provato a portarlo al mio form ma nn mi aggiorna il valore del terzo campo e non capisco dove posso sbagliare. Ho sistemato il punto e virgola e gli apici...
Dovrebbe aggiornarsi quando passo da un campo all'altro? scusami ma proprio nn ne vengo fuori...
-
Ho visto che il tuo codice è un po' complicato.
Io proverei da un form semplice semplice per accertare il funzionamento e poi implementare le cose più complicate.
-
ciao più che altro mi sa che devi anche assegnare dei valori ad uno dei due campi della moltiplicazione.
ad esempio io ho come primo campo servizio uno, secondo: quante persone, e poi il terzo il totale.
Ma credo che per funzionare bisogna assegnare un valore numerico al primo campo, in modo che poi la moltiplicazione con il numero di pax dia un prezzo totale..
la mia domanda è: come si fa ad assegnare al primo un valore numerico?
grazie a tutti
-
Qualcuno è forse riuscito a farlo funzionare non in locale?
Grazie
-
Benvenuto in Joomla mix2000,
la soluzione proposta è in javascript, è quindi indipendente dal server.
-
Certo Vales,
grazie per la tua immediata risposta.
Però, non so perchè, a me in locale funziona e sul server no......
.....ma lo scoprirò anche a costo di perderci un paio di notti.
Grazie ancora.
-
Io ho provato, esattamente come questo esempio, e non funziona, ne in locale ne in remoto. Eppure non c'è niente di difficile, quindi non capisco cosa stò sbagliando.