Howto get a Range Field instantly in Formidable, with no effort

May 20, 2018

Introduction​​​

I will teach you today how to get an awesome range slider in your Formidable forms, also we will add custom style to the resulting number with a $ prefix and a thousand separator. The final result will be versatile to use in forms for loans or financial calculations.

The next image is the final result we will get.​

The next link go to the result form​

http://www.gfirem.com/how-to-have-a-range-field-in-formidable-with-no-effort-example/

Requirements​​

    • ​Formidable Free/Pro
    • JS/jQuery Basic

Hands on it

You need to create the form and add 2 text field.​

 

In each field you need to go to the setting and add the range style class to indicate to the script wich text field will be convert to range slider.​

When you save the form it will redirect you to the setting page, now you need to go to the tab “Customize HTML” and look at the end for the box with the name “After fields”. In this box is where you need to paste the magic code. ​

When you save the form it will redirect you to the setting page, now you need to go to the tab “Customize HTML” and look at the end for the box with the name “After fields”. In this box is where you need to paste the magic code.

//Code initialization on document ready
jQuery(document).ready(function () {
    //find all field with range class with an input inside
     var rangesElements = jQuery("div.range").find("input");
    //iterate over each input find in the previous step
     jQuery.each(rangesElements, function () {
​        //declare the prefix
        var prefix = '$'; 
​        //declare the separator
        var thousandSeparator = ',';
​        //declare the current input 
        var range = jQuery(this);
​        //get the parent of the input
        var rangeParent = range.parent();
​        //get the id of the current input 
        var elementId = range.attr('id');
​        //replace field_ from the input to get only the field key 
        elementId = elementId.replace('field_', '');
​        //change the input from text to hidden 
        range.attr('type', 'hidden'); 
        //add the new range input to the parent of the field
        rangeParent.append('<input id="range_' + elementId + '"             type="range" value="0" min="-10000000" max="50000000"             step="1000">');
        //Add a div to the parent to show the slide number
        rangeParent.append('<div class="range_result_' + elementId + '"></div>');
        //the next block add an event to the new slider to react every time the range change
        rangeParent.find('#range_' + elementId).on('input',         function () {
            //assign the slider value to our hidden field (formidable field)
            range.val(jQuery(this).val());
            //assign the slider value to our new div where it will displayed with a prefix and thousand separator using regex
            rangeParent.find('.range_result_' + elementId).text(prefix + ' ' + jQuery(this).val().replace(/(d)(?=(ddd)+(?!d))/g, "$1" + thousandSeparator));
         });
     });
});

The above code will not work if you add directly in the After field box. The above code is a JavaScript and need the script element.

<script type="text/javascript">[code]</script>

Go more deep in the code. The have have 2 details i want to explain you, they are like tips to code for Formidable. Look in the code the next line

var rangeParent = range.parent();

The above line ask for the parent of the current element in the cycle, this work because each field in Formidable have the same structure of containers. In this case are the next.

div -> parent
    label
    input
/div

With this perspective when you are in the cycle the code are pointing to the input and when we ask for the parent we get the parent div, that is what the code add two more elements to the parent div (the new range slider and a div to show the formatted number), the new structure will be as next

div -> parent
    label
    input type=hidden
    input type=range
    div show_result
/div

The next tips for the code is the way of the code to retrieve the field key. Formidable have a name convention to generate the id of all fields, is prefix in the code ‘field_’ plus the field key. That is the meaning of the next line in the code, to clean the prefix and get the clean field key.

elementId.replace('field_', '')

Is more to study about this code, i left here some link for you to go more deep.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

If you have any doubt or question, let me know to help you. I would happy if you send me your feedback with a comment on the site, or the FB page, Twitter, Skype … where you like most 😉 

El Guille. 

PD if you have any block in your project or there is something about what you would like me to write let me know it would be a pleasure to help you.

No comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Interested to get more tips!