thousand separator

  • Resolved avijit0007

    (@avijit0007)


    7 years, 5 months ago

    how to make any filed as thousand separators. it must auto change the numbers while user inserts into it. A comma should be added after every 3 digits.

    *for example – when user input 10000, it auto-change to 10,000

    I found some solution (check below)
    BUT I WANT TO KNOW HOW TO INTEGRATE THIS CODES INTO WPFORMS CODE

    this are few solution –

    solution – 1
    ____________________

    myNumber.value = commify(myNumber.value)
    myNumber.addEventListener(“change”, function(){
    commify(event.target.value)
    })

    function commify(value){
    var chars = value.split(“”).reverse()
    var withCommas = []
    for(var i = 1; i <= chars.length; i++ ){
    withCommas.push(chars[i-1])
    if(i%3==0 && i != chars.length ){
    withCommas.push(“,”)
    }
    }
    var val = withCommas.reverse().join(“”)
    myNumber.parentNode.setAttribute(“comma-value”,val)
    }

    input field –
    <input type=”number” id=’myNumber’ value=”40000″ step=’100′>

    solution – 2
    ____________________

    function addCommas(nStr)
    {
    nStr += ”;
    x = nStr.split(‘.’);
    x1 = x[0];
    x2 = x.length > 1 ? ‘.’ + x[1] : ”;
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
    x1 = x1.replace(rgx, ‘$1’ + ‘,’ + ‘$2’);
    }
    return x1 + x2;
    }

    input field –

    <input type=”text” id=”txtBox” onchange=”return addCommas(this.value)” />

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Jared Atchison

    (@jaredatch)

    Sure thing!

    The snippet below should do the trick. To use it:

    – Add the snippet to the bottom of your theme’s functions.php file (or similar)
    – Add a new text field
    – Add the class ‘wpf-number-format’ to your text field via the advanced settings

    The reason you need to use a text field is because some browsers such as Chrome don’t allow commas inside HTML5 number inputs.

    
/**
 * Auto format a text field with number formating.
 * Apply the class "wpf-number-format" to the field to enable.
 *
 */
function wpf_number_format() {
	?>
	<script type="text/javascript">
	jQuery(function($){
		$(document).on('input', '.wpf-number-format input', function(event) {
			$(this).val( wpforms.numberFormat( $(this).val() ) );
		});
	});
	</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_number_format' );
    Thread Starter avijit0007

    (@avijit0007)

    thanks

    Thread Starter avijit0007

    (@avijit0007)

    HOW TO SET Min-length or Max-length to number input field. I checked and found this plugin does not offer this type of validation. Is it possible?

    Plugin Author Jared Atchison

    (@jaredatch)

    Sure, the easiest thing is to just javascript to add a maxlength attribute to the field. The updated snippet below limits to 9 chars (eg 9,999,999)

    
/**
 * Auto format a text field with number formating.
 * Apply the class "wpf-number-format" to the field to enable.
 *
 */
function wpf_number_format() {
	?>
	<script type="text/javascript">
	jQuery(function($){
		$('.wpf-number-format input').attr('maxlength',9);
		$(document).on('input', '.wpf-number-format input', function(event) {
			$(this).val( wpforms.numberFormat( $(this).val() ) );
		});
	});
	</script>
	<?php
}
add_action( 'wpforms_wp_footer', 'wpf_number_format' );
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘thousand separator’ is closed to new replies.