Calculations with range slider

[blackbeard]

Hi,

I’ve been trying to use the calculations based on your documentation,
https://support.themecatcher.net/quform-wordpress-v2/guides/advanced/calculations
My goal is to multiply two range sliders and output the value to string using jQuery.
Example: http://prntscr.com/jeher4

I’m having trouble doing that and would appreciate the help!

• This topic was modified 7 years ago by blackbeard.
• This topic was modified 7 years ago by blackbeard.
• This topic was modified 7 years ago by blackbeard.

[katw]

Hi @blackbeard,

Do you capture the value of each slider in hidden fields?

Are the values pushed into the fields numbers? So you can multiply cleanly or are they a mix of numbers and text (eg “23USD” v’s “23”)?

For my latter question you should be able to see the values in entries-view (assuming form is submitting ok).

Are you wanting to show the calculation result live to the customer or is this for back-end?

• This reply was modified 7 years ago by katw. Reason: fixed grammar

[blackbeard]

Hi @katw,

Yes I do capture the value of each slider in hidden fileds.

The values are clean numbers.

And yes I do want to show the calculation result live to the customer.

Would gladly appreciate to see some kind of template code. 🙂

• This reply was modified 7 years ago by blackbeard.

[katw]

Hi @blackbeard,

This should get you started.

Hoping no typos as I have been pulling long hours 😉

Add the following to QuForms > Settings > Custom CSS & JS

// When DOM ready, do:
jQuery(document).ready(function($) { 

	var doCalc = function() {
		//get value of slider hidden fields
		var creditVal = $('.quform-field-1_9').val();
		var durationVal = $('.quform-field-1_10').val();
		if (creditVal.length==0 || durationVal.length==0) return; // exit if no values
		
		// convert to integer and check numbers returned
		// have specified radix as decimal for old browsers
		creditVal = parseInt(creditVal,10);
		durationVal = parseInt(durationVal,10);
		if (isNaN(creditVal) || isNaN(durationVal)) return; //exit values not numeric

		//do cost calculation
		var totalCost =  creditVal * durationVal;

		//Update cost
		//Remember to put on page: <div class="total-cost"></div>
		$("div.total-cost").html("Total cost: &euro;" + totalCost);
	}

	//On change of slider, recalculate cost
	//===============
	$('.quform-field-1_7').on('change', doCalc); //credit amount slider
	$('.quform-field-1_8').on('change', doCalc); //duration slider
});

Replace:

• 1_7 with ID of your credit slider field
• 1_8 with ID number of your duration slider
• 1_9 with ID of hidden field capturing credit slider value
• 1_10 with ID number of hidden field with duration slider value

Also add a div with class name ‘total-cost’ to your form/page. You can do this using HTML field.

<div class="total-cost"></div>

I have assumed from the screenshot of your form you are working with whole numbers not fractions.

If this is not true, then the parseInt conversions will need changing to parseFloat. You also need to do extra work to handle rounding. See this great page for ideas.

I have attached ‘on change’ events to each slider field to trigger recalculations and post new value to ‘total-cost’ DIV.

Good luck

• This reply was modified 7 years ago by katw. Reason: Tweaked code comments

[katw]

I should mention:

A. The calculations (using the code above) are only client-side (for user interface feedback).

To store the “total-cost” value on form submit; so you can also use it in email notifications or keep in database you will need to add an extra hidden field to your form.

Also you will need to add an extra line of code under comment //Update cost to set the value of this new field to the calculated total.

B. I don’t know if your two sliders have a default starting value or both start at 0.

If the latter you might want pre-populate the <DIV> ‘total-cost’ with ‘€ 0’.

<div class="total-cost">&euro; 0</div>

If the former you could use the same technique just mentioned and fill it with the starting total cost. Or call the doCalc() function just before the closing brackets of the jQuery(document).ready(function($) to have it calculate and pre fill the DIV

C. Code field references are for QuForm 2.

[blackbeard]

My version, that doesn’t work :/ , the ID’s are on point.

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

	var doCalc = function() {
		//get value of slider hidden fields
		var creditVal = $('.quform-field-1_9').val();
		var durationVal = $('.quform-field-1_4').val();
		if (creditVal.length==0 || durationVal.length==0) return;
		

		creditVal = parseFloat(Number(creditVal,10).toFixed(2));
		durationVal = parseFloat(Number(durationVal,10).toFixed(2));
		if (isNaN(creditVal) || isNaN(durationVal)) return; 

		var totalCost =  (creditVal * durationVal + creditVal * 0.1) / durationVal ;

		$("div.total-cost").html("VISO: &EUR;" + totalCost);
	}

	$('.quform-field-1_8').on('change', doCalc); //credit amount slider
	$('.quform-field-1_3').on('change', doCalc); //duration slider
});

• This reply was modified 6 years, 12 months ago by blackbeard.

[blackbeard]

Managed to get it working!
Here’s what my code looks like now: https://imgur.com/a/mPyoeIA

• This reply was modified 6 years, 12 months ago by blackbeard.
• This reply was modified 6 years, 12 months ago by blackbeard.
• This reply was modified 6 years, 12 months ago by blackbeard.

[katw]

Good work @blackbeard

Makes a difference seeing the rest of your code 🙂

Remove the trailing commas from:

1. suffix: ‘ EUR’,
2. suffix: ‘ mėn.’,

That was my error in the sample I gave you.

The last parameter item in the inner array doesn’t need a comma.

Is it working well or still need help?

[Author]

Posts