Forums

ChronoForms v8 is now WordPress ready, ChronoMails is out

How can I make a simple calculation in a form?

LAMF 25 Jun, 2013

Hi,
I have a custom form where visitors should be able to fill in a simple order form here:
http://46.22.118.166/~dalagava/index.php/bestall/foretag
When the numbers of product is filled in the total shall be automatically calculated in the last cell, is that possible and if how do I set it up?

Best regards,
Micke

GreyHead 25 Jun, 2013

Hi Micke,

You can do the calculations using JavaScript.

Bob

LAMF 25 Jun, 2013

You mean setting up a javascript in the Custom Element element?

GreyHead 25 Jun, 2013

Hi Micke,

Yes, but in a Load JS action for preference.

Bob

LAMF 25 Jun, 2013

Hi,
Ok I see so if I find a javascript that does this somewhere I can just paste it in the Load JS action?
I am pretty useless in javascripting so if anyone has any suggestions I'm all ears.

LAMF 25 Jun, 2013

Hi again,
I have tried to set it up but no luck 😢

This is the form html:

<div class="ccms_form_element cfdiv_header" id="id1_container_div"  style="font-family: Arial; font-size: 12px;"><h2 style="font-family: Cambria; color: #A00;">Orderbekräftelse - Dalagåvan</span></h2>
<p><strong>Här är en kopia på er beställning.</strong></p>
<p>Om ni inte lagt denna beställning är det viktigt att ni kontaktar oss så vi inte hinner skicka produkterna.</p>
<div class="clear"></div></div>
<div class="ccms_form_element cfdiv_select" id="input_select_141_container_div" style="">
<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>{antal1}</td>
                         <td>Original Dalagåvan</td>
                          <td class="pris1" style="text-align: right; padding-right: 3px;"> 440</td>
                          <td width="10px">kr</td>
						  <td>{summa1}</td>
						</tr>
                        <tr> 
                          <td> {antal2}</td>                            
                          <td>Lyx Dalagåvan</td>
                          <td class="pris2" style="text-align: right; padding-right: 3px;">550</td>
                          <td>kr</td>
                          <td>{summa2}</td>
                          </tr>
                        <tr> 
                          <td>  {antal3}</td>
						  <td> Lilla Dalagåvan</td>
                          <td class="pris3" style="text-align: right; padding-right: 3px;">220</td> 
                          <td>kr</td>
                          <td>{summa3} </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="" /></td>
                        </tr>
                        </tbody></table>
                       <br /></div><div class="ccms_form_element cfdiv_select" id="input_select_171_container_div" style=""><label>Välj betalningssätt:</label>{input_select_17}
<div class="clear"></div><div id="error-message-input_select_17"></div></div><div class="ccms_form_element cfdiv_text" id="foretag1_container_div" style=""><label>Företagsnamn:</label>{foretag}
<div class="clear"></div><div id="error-message-foretag"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_161_container_div" style=""><label>Organisationsnr:</label>{input_text_16}
<div class="clear"></div><div id="error-message-input_text_16"></div></div><div class="ccms_form_element cfdiv_text" id="namn1_container_div" style=""><label>Kontaktperson</label>{namn}
<div class="clear"></div><div id="error-message-namn"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_111_container_div" style=""><label>Leveransadress</label>{input_text_11}
<div class="clear"></div><div id="error-message-input_text_11"></div></div><div class="ccms_form_element cfdiv_text" id="ort1_container_div" style=""><label>Postnr och Ort</label>{ort}
<div class="clear"></div><div id="error-message-ort"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_121_container_div" style=""><label>Fakturaadress:</label>{input_text_12}
<div class="small-message">Om annan än leveransadressen</div><div class="clear"></div><div id="error-message-input_text_12"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_131_container_div" style=""><label>Postnr och Ort</label>{input_text_13}
<div class="small-message">Om annan än leveransadress</div><div class="clear"></div><div id="error-message-input_text_13"></div></div><div class="ccms_form_element cfdiv_text" id="tel1_container_div" style=""><label>Telefon</label>{tel}
<div class="clear"></div><div id="error-message-tel"></div></div><div class="ccms_form_element cfdiv_text" id="epost1_container_div" style=""><label>Epost</label>{epost}
<div class="clear"></div><div id="error-message-epost"></div></div><div class="ccms_form_element cfdiv_textarea" id="message1_container_div" style=""><label>Meddelande</label>{message}
<div class="clear"></div><div id="error-message-message"></div></div><div class="ccms_form_element cfdiv_submit" id="submit1_container_div" style="text-align:left">
 <div class="clear"></div><div id="error-message-submit"></div></div><div class="ccms_form_element cfdiv_empty" id="empty_container_div" style=""><div class="clear"></div><div id="error-message-empty"></div></div>

And I go this jQuery code from another forumthat I pasted into a Load JS action in the On Load field:

function SetPrices() {
var TotalSum = 0;
for (var x=1;x<=3.length;x++) {
    var Quantity = $("input[name='antal" + x + "']").val();
    var Price = $(".pris" + x).text().replace(" ", "");
    var TotalPrice = Quantity * Price;        
    $("input[name='summa" + x + "']").val(TotalPrice);
    TotalSum += TotalPrice;
}

$("input[name='total']").val(TotalSum);
}

SetPrices();
$("input[name^='antal']").change(function(){ SetPrices(); });

But nothing happens.

LAMF 26 Jun, 2013

Are there any samples here in this forum that I can go from?
I have absolutely no clue what to do to get it working. 😟

LAMF 26 Jun, 2013

I have tried to browse around here finding a solution but none that seem to meet my simple requirements.
Does it work with jQuery or not in chronoforms?
If anyone has a javascript that can do the task for me I would be very happy.
it would be a shame if I had to install yet another extension to solve this issue.

LAMF 26 Jun, 2013

I have edited the form and also the javascript with some help but it still wont work, what is wrong.
How do I activate the javascript i the form? I know it works but not in my form... please some hints.

The form:

<div class="ccms_form_element cfdiv_header" id="id1_container_div" style=""><h2 class="dag-postheader"><span class="dag-postheadericon">Beställning - Företagskund</span></h2>
<p>Välj här nedan den eller de produkter ni vill beställa.</p>
<p>Välj betalningssätt och fyll sedan i formuläret nedan och skicka beställningen.</p>
<p>Första beställningen sker allltid via förskottsbetalning till vårt bankgiro. Totalsumma inklusive frakt kommer med orderbekräftelse efter att vi gått igenom er order manuellt.</p>
<p>Återkommande beställningar kan ske mot faktura som då skickas ut separat i samband med att er order skickas.</p><div class="clear"></div></div>
<div class="ccms_form_element cfdiv_select" id="input_select_141_container_div" style="">
<p> </p>
<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="180" />
        </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="360" />
        </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="75" />
        </td>
        <td>kr</td>
        <td>
            <input name="summa3" id="sum3" size="10" type="text">
        </td>
    </tr>
    <tr>
        <td colspan="2"><button class="dag-button" id="calculate">Beräkna</button>
        </td>
        <td colspan="2"><span style="font-weight: bold; text-align: right;">Totalt:</span>
        </td>
        <td>
            <input name="total" id="total" size="10" type="text" />
        </td>
    </tr>
</tbody>
            </table>
        <br>
                        <p> </p>
<div class="clear"></div><div id="error-message-input_select_14"></div></div><div class="ccms_form_element cfdiv_select" id="input_select_171_container_div" style=""><label>Välj betalningssätt:</label><select size="1" class=" validate['required']" title="" name="input_select_17">
<option value="">Välj betalningssätt</option>
<option value="Faktura">Faktura</option>
<option value="Förskottsbetalning">Förskottsbetalning</option>
</select>
<div class="clear"></div><div id="error-message-input_select_17"></div></div><div class="ccms_form_element cfdiv_text" id="foretag1_container_div" style=""><label>Företagsnamn:</label><input maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="foretag" />
<div class="clear"></div><div id="error-message-foretag"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_161_container_div" style=""><label>Organisationsnr:</label><input maxlength="150" size="30" class=" validate['required','alphanum']" title="" type="text" value="" name="input_text_16" />
<div class="clear"></div><div id="error-message-input_text_16"></div></div><div class="ccms_form_element cfdiv_text" id="namn1_container_div" style=""><label>Kontaktperson</label><input maxlength="150" size="45" class=" validate['required']" title="" type="text" value="" name="namn" />
<div class="clear"></div><div id="error-message-namn"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_111_container_div" style=""><label>Leveransadress</label><input maxlength="150" size="30" class="" title="" type="text" value="" name="input_text_11" />
<div class="clear"></div><div id="error-message-input_text_11"></div></div><div class="ccms_form_element cfdiv_text" id="ort1_container_div" style=""><label>Postnr och Ort</label><input maxlength="150" size="45" class="" title="" type="text" value="" name="ort" />
<div class="clear"></div><div id="error-message-ort"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_121_container_div" style=""><label>Fakturaadress:</label><input maxlength="150" size="30" class="" title="" type="text" value="" name="input_text_12" />
<div class="small-message">Om annan än leveransadressen</div><div class="clear"></div><div id="error-message-input_text_12"></div></div><div class="ccms_form_element cfdiv_text" id="input_text_131_container_div" style=""><label>Postnr och Ort</label><input maxlength="150" size="30" class="" title="" type="text" value="" name="input_text_13" />
<div class="small-message">Om annan än leveransadress</div><div class="clear"></div><div id="error-message-input_text_13"></div></div><div class="ccms_form_element cfdiv_text" id="tel1_container_div" style=""><label>Telefon</label><input maxlength="150" size="45" class="" title="" type="text" value="" name="tel" />
<div class="clear"></div><div id="error-message-tel"></div></div><div class="ccms_form_element cfdiv_text" id="epost1_container_div" style=""><label>Epost</label><input maxlength="150" size="45" class=" validate['required','email']" title="" type="text" value="" name="epost" />
<div class="clear"></div><div id="error-message-epost"></div></div><div class="ccms_form_element cfdiv_textarea" id="message1_container_div" style=""><label>Meddelande</label><textarea cols="45" rows="15" class="" title="" name="message"></textarea>
<div class="small-message">Frivilligt.</div><div class="clear"></div><div id="error-message-message"></div></div><div class="ccms_form_element cfdiv_custom" id="input_id_7_container_div" style="">{ReCaptcha}<div class="clear"></div><div id="error-message-input_custom_7"></div></div>
<p> </p><div class="ccms_form_element cfdiv_submit" id="submit1_container_div" style="text-align:left"><input name="submit" class="dag-button" value="Skicka" type="submit" />
 <input type='reset' name='reset' class='dag-button' value='Rensa' /><div class="clear"></div><div id="error-message-submit"></div></div><div class="ccms_form_element cfdiv_empty" id="empty_container_div" style=""><div class="clear"></div><div id="error-message-empty"></div></div>
<p> </p>

And the javascript:

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;

};

LAMF 27 Jun, 2013

I solved it and here's the neat solution for those who might be intersted.
Form (only the order form part with calculation function):

<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="antal1" id="ant1" size="5" type="text" onchange="pricefunc()">
        </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="180" />
        </td>
        <td width="10px">kr</td>
        <td>
            <input name="summa1" id="sum1" size="10" type="text" onchange="pricefunc()">
        </td>
    </tr>
    <tr>
        <td>
            <input name="antal2" id="ant2" size="5" type="text" onchange="pricefunc()">
        </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="360" />
        </td>
        <td>kr</td>
        <td>
            <input name="summa2" id="sum2" size="10" type="text" onchange="pricefunc()">
        </td>
    </tr>
    <tr>
        <td>
            <input name="antal3" id="ant3" size="5" type="text" onchange="pricefunc()">
        </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="75" />
        </td>
        <td>kr</td>
        <td>
            <input name="summa3" id="sum3" size="10" type="text" onchange="pricefunc()">
        </td>
    </tr>
    <tr>
        <td colspan="2"> 
        </td>
        <td colspan="2"><span style="font-weight: bold; text-align: right;">Totalt:</span>
        </td>
        <td>
            <input name="total" id="total" size="10" type="text" onchange="pricefunc()" />
        </td>
    </tr>
</tbody>
            </table>

And now the javascript to be added in the Load JS action in the On Load event:

function pricefunc(){
    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;

};

This topic is locked and no more replies can be posted.