Joomla.it Forum
Componenti per Joomla! => Gestione Form => : niko.gallo 18 Jan 2014, 20:15:59
-
ciao,
premetto che è un esempio che ho raccolto su internet e una volta capito come farlo funzionare lo personalizzo.
-il tutto mi serve perchè voglio costruire un form per costruire una fattura.-
ho creato un form e nella sezione "OnLoad" ho inserito i seguenti action:
1. Custom code:
<table style="font-family:arial;font-size:12px" width="350px" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr bgcolor="#A00">
<td width="5%" style="padding: 4px;"><font color="#FFF"><b>Antal</b></font>
</td>
<td width="35%" style="padding: 4px;"><font color="#FFF"><b>Produkt</b></font>
</td>
<td colspan="2" width="18%" style="padding: 4px;"><font color="#FFF"><b>Pris/st</b></font>
</td>
<td width="18%" style="padding: 4px;"><font color="#FFF"><b>Summa</b></font>
</td>
</tr>
<tr>
<td>
<input name="quantity" id="ant1" size="5" type="text">
</td>
<td>Original Dalagåvan</td>
<td class="pris1" style="text-align: right; padding-right: 3px;">
<input name="gava" type="text" id="dgorig" size="5" value="440" />
</td>
<td width="10px">kr</td>
<td>
<input name="summa1" id="sum1" size="10" type="text">
</td>
</tr>
<tr>
<td>
<input name="antal2" id="ant2" size="5" type="text">
</td>
<td>Lyx Dalagåvan</td>
<td class="pris2" style="text-align: right; padding-right: 3px;">
<input name="gava" type="text" id="dglyx" size="5" value="550" />
</td>
<td>kr</td>
<td>
<input name="summa2" id="sum2" size="10" type="text">
</td>
</tr>
<tr>
<td>
<input name="antal3" id="ant3" size="5" type="text">
</td>
<td>Lilla Dalagåvan</td>
<td class="pris3" style="text-align: right; padding-right: 3px;">
<input name="gava" type="text" id="dglilla" size="5" value="220" />
</td>
<td>kr</td>
<td>
<input name="summa3" id="sum3" size="10" type="text">
</td>
</tr>
<tr>
<td colspan="4" style=" text-alignpx: right; padding-right: 5px;"><span style="font-weight: bold;">Total summa:</span>
</td>
<td>
<input name="total" id="total" size="10" type="text" />
</td>
</tr>
</tbody>
</table>
<br>
<button id="calculate">Calculate</button>
2. Load JS:
var button = document.getElementById('calculate');
button.onclick = function(){
var ant1 = document.getElementById('ant1').value,
ant2 = document.getElementById('ant2').value,
ant3 = document.getElementById('ant3').value;
var const1 = document.getElementById('dgorig').value,
const2 = document.getElementById('dglyx').value,
const3 = document.getElementById('dglilla').value;
var sum1 = document.getElementById('sum1'),
sum2 = document.getElementById('sum2'),
sum3 = document.getElementById('sum3');
var total = document.getElementById('sum3');
sum1 = sum1.value = ant1 * const1;
sum2 = sum2.value = ant2 * const2;
sum3 = sum3.value = ant3 * const3;
document.getElementById('total').value = sum1 + sum2 + sum3;
};
dovrebbe klikkando calcolare le celle sum1, sum2,sum3 e total
-
forse puoi trovare degli spunti in questa vecchia ma attuale discussione
http://forum.joomla.it/index.php/topic,98717.msg473903.html#msg473903
-
ciao vales,
grazie per la risposta.
sono andato sul tred che mi hai consigliato e il codice postato in quei post non mi funziona.
il mio desiderata è proprio il link demo postato da te
http://valesweb.altervista.org/index.php?option=com_chronocontact&chronoformname=preventivi (http://valesweb.altervista.org/index.php?option=com_chronocontact&chronoformname=preventivi)
ciao e nuovamente grazie
-
questi sono i codici di quel form nei rispettivi campi
html
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Base</label>
<input class="cf_inputbox required validate-number" maxlength="10" size="10" title="inserire un numero" id="text_0" name="base" type="text" onChange="updatethis(this.form);" value=""/>
<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">Base :: inserire la misura della 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;">Altezza</label>
<input class="cf_inputbox required validate-number" maxlength="10" size="10" title="Inserire un numero valido" id="text_1" name="altezza" type="text" onChange="updatethis(this.form);" value=""/>
<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">Altezza :: Inserire la misura dell'altezza</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Area</label>
<input class="cf_inputbox" maxlength="10" size="10" title="" id="text_2" name="area" type="text" value="0" readonly="readonly"/>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Tipo di carta</label>
<select class="cf_inputbox validate-selection" id="select_4" size="1" title="" name="carta" onChange="updatethis(this.form);">
<option value="0">Seleziona</option>
<option value="10">Lucida (10€/mq)</option>
<option value="6">Opaca (6€/mq)</option>
<option value="8">Fine (8€/mq)</option>
</select>
<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">Tipo di carta :: Scegli il tipo di carta</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Vuoi le asole saldate?</label>
<select class="cf_inputbox" id="select_6" size="1" title="" name="asole" onChange="updatethis(this.form);">
<option value="">Seleziona</option>
<option value="LS">Lato superiore</option>
<option value="LI">Lato inferiore</option>
<option value="LD">Lato destro</option>
<option value="LSN">Lato sinistro</option>
<option value="LSI">Lati superiore e inferiore</option>
<option value="LDS">Lati destro e sinistro</option>
</select>
<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">Vuoi le asole saldate? :: Scegli la posizione delle asole saldate</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="10" size="10" title="" id="text_5" name="totale" type="text" value="0" readonly="readonly"/>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="Aggiorna calcolo" name="button_7" type="button" />
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="Invia" name="button_3" type="submit" /><input type="reset" name="reset" value="Reset"/>
</div>
<div class="cfclear"> </div>
</div>
iavascripts
function updatethis(form) {
var costo = 0;
form.elements['area'].value = form.elements['base'].value * form.elements['altezza'].value;
if ((form.elements['asole'].value=="LD") || (form.elements['asole'].value=="LSN")) costo =(form.elements['base'].value * 2.5);
if ((form.elements['asole'].value=="LI") || (form.elements['asole'].value=="LS")) costo=(form.elements['altezza'].value * 2.5);
if (form.elements['asole'].value=="LSI") costo=(form.elements['base'].value * 2 * 2.5);
if (form.elements['asole'].value=="LDS") costo=(form.elements['altezza'].value * 2 * 2.5);
if (form.elements['asole'].value=="") costo=0;
form.elements['totale'].value = costo + (form.elements['area'].value * form.elements['carta'].value);
}
tieni conto che quello è chronoforms v3, ma aldilà del codice quello che conta è il metodo che può essere adattato e utilizzato in altre situazioni
-
ciao vales,
grazie per la risposta.
premetto che mi sto studiando un po' di JS.
sono consapevole di essere su CF3 e il mio dilemma è che non riuscivo a eseguire (cosa che ora sono riuscito a fare) il codice JS.
una cosa che non capisco se è possibile fare e aggiungere la proprietà onChange attraverso l'interfaccia a oggetti senza intervenire sul codice?
ti aggiorno su futuri sviluppi.
grazie ancora
Niko
-
No Onchange lo puoi mettere solo manualmente modificando il codice generato automaticamente da chronoform
-
Ciao vales
Un'altra cosa che vorrei chiederti, OT, mi consigli di usare
Il component PDF di chronoforms?
P.s. il codice che mi hai postato non mi funziona.
Grazi niko