My client wanted a car loan calculator that could look good and be functional on both mobile and desktop devices. Originally the design called for sliders for the various parts of the car loan options (amount, down payment, and term), but how many website sliders have you used on a mobile device without being frustrated?

My suggestion to the client was simple; let’s add a number field together with a slider, and sync the values between them. That way a user could choose to use a slider if they want a visual interface, or they could directly input their choices in the number field. I also needed to figure out the same thing for the length of the car loan, which would be a drop-down menu, because the challenge of the number fields clearly wasn’t sufficient!

I was a bit surprised that, despite having excellent features of dynamic / lookup fields, there’s no way to connect two fields’ values together dynamically. No matter – there’s code for that problem! Reminder that, as with the last example, you’ll need to use the right ID keys for your form’s fields.

jQuery(document).ready(function($){
//declare values for various form fields. 
	var field_1 = $("#field_price_slider").val();
	var field_2 = $("#field_price_number").val();
	var field_3 = $("#field_down_number").val();
	var field_4 = $("#field_down_slider").val();
	var field_5 = $("#field_term_slider").val();
	var field_6 = $("#field_term_number").val();
	
// Price number / slider combo
	$('#field_price_slider').mousemove(function(){
		var field_1 = $("#field_price_slider").val();
		$("#field_price_number").val( field_1 );
		$("#field_price_number").change();
	});
	$('#field_price_slider').change(function(){
		var field_1 = $("#field_price_slider").val();
		$("#field_price_number").val( field_1 );
		$("#field_price_number").change();
	});
	$('#field_price_number').keyup(function(){
		var field_2 = $("#field_price_number").val();
		$("#field_price_slider").val( field_2 );
		$("#field_price_slider").parent().find(".frm_range_value").text( field_2 );
	});

// Down payment number / slider combo
	$('#field_down_slider').mousemove(function(){
		var field_3 = $("#field_down_slider").val();
		$("#field_down_number").val( field_3 );
		$("#field_down_number").change();
	});
	$('#field_down_slider').change(function(){
		var field_3 = $("#field_down_slider").val();
		$("#field_down_number").val( field_3 );
		$("#field_down_number").change();
	});
	$('#field_down_number').keyup(function(){
		var field_4 = $("#field_down_number").val();
		$("#field_down_slider").val( field_4 );
		$("#field_down_slider").parent().find(".frm_range_value").text( field_4 );
	});
	
// Term dropdown / slider combo
	$('#field_term_slider').mousemove(function(){
		var field_5 = $("#field_term_slider").val();
		$("#field_term_drop [selected='selected']").removeAttr("selected");
		$("#field_term_drop option[value="+field_5+"]").attr("selected","selected");
		$("#field_term_drop").attr("data-frmval", field_5);
	});
	$('#field_term_slider').change(function(){
		var field_5 = $("#field_term_slider").val();
		console.log( field_5 );
		$("#field_term_drop [selected='selected']").removeAttr("selected");
		$("#field_term_drop option[value="+field_5+"]").attr("selected","selected");
		$("#field_term_drop").attr("data-frmval", field_5);
	});
	$('#field_term_drop option').click(function(){
		var field_6 = $(this).val();
		$("#field_term_slider").val( field_6 );
		$("#field_term_slider").change();
		$("#field_term_slider").parent().find(".frm_range_value").text( field_6 );
		$("#field_term_drop [selected='selected']").removeAttr("selected");
		$("#field_term_drop option[value="+field_6+"]").attr("selected","selected");
		$("#field_term_drop").attr("data-frmval", field_6);
	});

});	

	$('#field_term_drop').change(function(){
		var field_6 = $(this).val();
		$("#field_term_slider").val( field_6 );
		$("#field_term_slider").change();
		$("#field_term_slider").parent().find(".frm_range_value").text( field_6 );
		$("#field_term_drop [selected='selected']").removeAttr("selected");
		$("#field_term_drop option[value="+field_6+"]").attr("selected","selected");
		$("#field_term_drop").attr("data-frmval", field_6);
	});

Don’t get me wrong, I know it’s likely not the most beautiful or efficient way I could achieve what I’m looking at doing, but it ticks the boxes:

  • Works with Formidable Forms
  • Works smoothly and seamlessly on all device types
  • Doesn’t look too bad for not having been touched with any CSS yet!
  • Wouldn’t be hard to edit in the future if changes need to be made

The result:

Note, this isn’t the final product, but it was my proof-of-concept iteration that I shared with my client liaison prior to finalizing the look/feel/design of the form. It proved that I could do what was being requested.

After adding a credit score selection and a bit of fancy math, we came to the final product:

About Allen Pooley

Allen is a self professed geek and technology lover. He's always playing with one of his various websites, and loves helping customers with theirs. He can often be found with a coffee (light roast, please) in his hand and a smile on his face... or with a plate of bacon. Mmm, bacon.

Leave a Comment