Buy Now
Sign in

Using Custom Jquerry from CF ver 5 in CF ver 6

S
sbrant
I'm rebuilding ver 5 forms in ver 6 to stay up to date. WOW - are there some changes! I'm sure they will all be great when I get used to them.

Lots pf name changes are a bit confusing - simple things like Date Picker changed to Calendar - confusing. ANYWAY - on to my questions.

My CF5 form used custom jQuerry in Setup using Load JavaScript in On Load. I see in CF6, there are now Events in designer that can probably take care of my need - but I'd like to skip having to set events per item and use the old code.

I believe Load JavaScript has been replaced with Custom code. I've tried using this OnLoad - with no go.

I also tried adding a Javascript Custom in Designer both at the beginning of the form and end with Add inside Domready event set bot to active and inactive with no luck.

So, my question. How would I go about using the following code in a CF6 form? It's for calculating prices times user entered quantity and then adding all quantities together in total sum (gtotal) in an order form.

jQuery(document).ready(function($){

$('#sum1').val(0);
$('#sum2').val(0);
$('#sum3').val(0);
$('#sum4').val(0);
$('#sum5').val(0);
$('#sum6').val(0);
$('#sum7').val(0);
$('#sum8').val(0);
$('#sum9').val(0);
$('#sum10').val(0);
$('#sum11').val(0);
$('#sum12').val(0);



$('#quan1').keyup(calculate);

function calculate() {
var prc1 = $('input[name=price1]').val();
var qty1 = $('input[name=quan1]').val();
var total1 = parseFloat(prc1)*parseInt(qty1);
$('#sum1').val(total1.toFixed(2));
}

$('#quan2').keyup(calculate2);

function calculate2() {
var prc2 = $('input[name=price2]').val();
var qty2 = $('input[name=quan2]').val();
var total2 = parseFloat(prc2)*parseInt(qty2);
$('#sum2').val(total2.toFixed(2));
}

$('#quan3').keyup(calculate3);

function calculate3() {
var prc3 = $('input[name=price3]').val();
var qty3 = $('input[name=quan3]').val();
var total3 = parseFloat(prc3)*parseInt(qty3);
$('#sum3').val(total3.toFixed(2));
}


$('#quan4').keyup(calculate4);

function calculate4() {
var prc4 = $('input[name=price4]').val();
var qty4 = $('input[name=quan4]').val();
var total4 = parseFloat(prc4)*parseInt(qty4);
$('#sum4').val(total4.toFixed(2));
}


$('#quan5').keyup(calculate5);

function calculate5() {
var prc5 = $('input[name=price5]').val();
var qty5 = $('input[name=quan5]').val();
var total5 = parseFloat(prc5)*parseInt(qty5);
$('#sum5').val(total5.toFixed(2));
}


$('#quan6').keyup(calculate6);

function calculate6() {
var prc6 = $('input[name=price6]').val();
var qty6 = $('input[name=quan6]').val();
var total6 = parseFloat(prc6)*parseInt(qty6);
$('#sum6').val(total6.toFixed(2));
}


$('#quan7').keyup(calculate7);

function calculate7() {
var prc7 = $('input[name=price7]').val();
var qty7 = $('input[name=quan7]').val();
var total7 = parseFloat(prc7)*parseInt(qty7);
$('#sum7').val(total7.toFixed(2));
}


$('#quan8').keyup(calculate8);

function calculate8() {
var prc8 = $('input[name=price8]').val();
var qty8 = $('input[name=quan8]').val();
var total8 = parseFloat(prc8)*parseInt(qty8);
$('#sum8').val(total8.toFixed(2));
}

$('#quan9').keyup(calculate9);

function calculate9() {
var prc9 = $('input[name=price9]').val();
var qty9 = $('input[name=quan9]').val();
var total9 = parseFloat(prc9)*parseInt(qty9);
$('#sum9').val(total9.toFixed(2));
}

$('#quan10').keyup(calculate10);

function calculate10() {
var prc10 = $('input[name=price10]').val();
var qty10 = $('input[name=quan10]').val();
var total10 = parseFloat(prc10)*parseInt(qty10);
$('#sum10').val(total10.toFixed(2));
}

$('#quan11').keyup(calculate11);

function calculate11() {
var prc11 = $('input[name=price11]').val();
var qty11 = $('input[name=quan11]').val();
var total11 = parseFloat(prc11)*parseInt(qty11);
$('#sum11').val(total11.toFixed(2));
}

$('#quan12').keyup(calculate12);

function calculate12() {
var prc12 = $('input[name=price12]').val();
var qty12 = $('input[name=quan12]').val();
var total12 = parseFloat(prc12)*parseInt(qty12);
$('#sum12').val(total12.toFixed(2));
}


$(document).keyup(totalall);

function totalall() {
var calc1=$('#sum1').val();
var calc2=$('#sum2').val();
var calc3=$('#sum3').val();
var calc4=$('#sum4').val();
var calc5=$('#sum5').val();
var calc6=$('#sum6').val();
var calc7=$('#sum7').val();
var calc8=$('#sum8').val();
var calc9=$('#sum9').val();
var calc10=$('#sum10').val();
var calc11=$('#sum11').val();
var calc12=$('#sum12').val();

var calcall=0;
var calcall = (parseFloat(calc1)+parseInt(calc2)+parseInt(calc3)+parseInt(calc4)+parseInt(calc5)+parseInt(calc6)+parseInt(calc7)+parseInt(calc8)+parseInt(calc9)+parseInt(calc10)+parseInt(calc11)+parseInt(calc12))*1;




$('#gtotal').val(calcall.toFixed(2));



}


});
S
sbrant
Anyone? Bob?
GreyHead
Hi sbrant,

I have no idea why but the Load JS action in CFv5 has been replaced by a JavaScript element in the Designer tab > Custom elements group in CFv6.

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
S
sbrant
HI Bob,

Yup - I tried that too without any luck. I added the JS element at the beginning of the form. Does it matter where it's placed? And - when would one enable and disable the Add Inside DOM Ready Event?

Is there a sister item need to run the JS in Setup?