Back to top

Autore Topic: Chronoforms - campi calcolati Javascript  (Letto 2875 volte)

Offline niko.gallo

  • Nuovo arrivato
  • *
  • Post: 5
    • Mostra profilo
Chronoforms - campi calcolati Javascript
« il: 18 Gen 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:

Codice: [Seleziona]
<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:

Codice: [Seleziona]
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

Offline vales

  • Global Moderator
  • Instancabile
  • *****
  • Post: 8012
  • Sesso: Maschio
    • Mostra profilo
Re:Chronoforms - campi calcolati Javascript
« Risposta #1 il: 19 Gen 2014, 09:17:34 »
forse puoi trovare degli spunti in questa vecchia ma attuale discussione

http://forum.joomla.it/index.php/topic,98717.msg473903.html#msg473903
Download e demo di Albo Pretorio On Line per Joomla 1.5 e Joomla 2.5 e 3
Moduli scuola On Line v1 per Joomla 3
http://valesweb.altervista.org

Offline niko.gallo

  • Nuovo arrivato
  • *
  • Post: 5
    • Mostra profilo
Re:Chronoforms - campi calcolati Javascript
« Risposta #2 il: 19 Gen 2014, 12:51:33 »
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

ciao e nuovamente grazie


Offline vales

  • Global Moderator
  • Instancabile
  • *****
  • Post: 8012
  • Sesso: Maschio
    • Mostra profilo
Re:Chronoforms - campi calcolati Javascript
« Risposta #3 il: 19 Gen 2014, 13:30:36 »
questi sono i codici di quel form nei rispettivi campi

html
Codice: [Seleziona]
<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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</div>
</div>

iavascripts
Codice: [Seleziona]
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
Download e demo di Albo Pretorio On Line per Joomla 1.5 e Joomla 2.5 e 3
Moduli scuola On Line v1 per Joomla 3
http://valesweb.altervista.org

Offline niko.gallo

  • Nuovo arrivato
  • *
  • Post: 5
    • Mostra profilo
Re:Chronoforms - campi calcolati Javascript
« Risposta #4 il: 21 Gen 2014, 09:39:37 »
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

« Ultima modifica: 21 Gen 2014, 09:41:42 da niko.gallo »

Offline vales

  • Global Moderator
  • Instancabile
  • *****
  • Post: 8012
  • Sesso: Maschio
    • Mostra profilo
Re:Chronoforms - campi calcolati Javascript
« Risposta #5 il: 21 Gen 2014, 18:59:51 »
No Onchange lo puoi mettere solo manualmente modificando il codice generato automaticamente da chronoform
Download e demo di Albo Pretorio On Line per Joomla 1.5 e Joomla 2.5 e 3
Moduli scuola On Line v1 per Joomla 3
http://valesweb.altervista.org

Offline niko.gallo

  • Nuovo arrivato
  • *
  • Post: 5
    • Mostra profilo
Re:Chronoforms - campi calcolati Javascript
« Risposta #6 il: 26 Gen 2014, 11:02:10 »
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

 



Web Design Bolzano Kreatif