Syncing sliders with number or dropdown fields with Formidable Forms
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:
Posted in Code, Tips and Tricks, Web Design, WordPress Plugins
About Websavers
Websavers provides web services like Canadian WordPress Hosting and VPS Hosting to customers all over the globe, from hometown Halifax, CA to Auckland, NZ.
If this article helped you, our web services surely will as well! We might just be the perfect fit for you.
Hi, it is not working on my side.
Hi,
Nice feature. How do you implement the JS into the forms?
That’ll be up to your choice of theme and plugins. The theme we use and the BeaverBuilder page builder both provide an option to enter custom Javascript. However without that you could use the Code Snippets plugin plus the wp_footer action hook to add your JavaScript.
Merci beaucoup pour cet article très complet