JqueryUI spinner numberformat currency submit number value

Question

I have a jquery currency input and I am using this code:

$('input[name="precio"]').spinner({
    min:0,
    numberFormat: 'C'
});

The input works perfectly as it shows the number as a number with the $ or € sign depending on globalize.

The problem is that when I submit the form I get the text like this "5,00 €" and I would like it to be 5.00 or 500, just the number value.

Is there any way to do this? Thanks in advance.

Sam Battat · Answer 1 · 2014-09-10T17:43:17.803

the is an attribute called 'aria-valuenow' for that input that gets the current numeric value (without format)

http://jsfiddle.net/ma8zd7mg/1/

 $("#spinner").spinner({
     min: 0,
     numberFormat: "C"
 });

$("#test").click(function(){
    alert($("#spinner").attr('aria-valuenow'));
});

EDIT (to answer your question in the comments) To get the value after submitting in PHP, you could: 1. Create a place holder input that gets the numeric value of the spinner, and that value gets submitted 2. Use PHP to strip the extra format characters (the $, the . and and the extra zeros)

I recommend the first method, something like this:

$("#submit-btn").click(function(e){
    //prevent the form submission
    e.preventDefault();

    //add a placeholder input with the value of the spinner
    $("#my-from").append('<input/>', {
        'type': 'hidden',
        'name': 'spinner-value',
        'value': $("#spinner").attr('aria-valuenow')
    });

    //now submit the form
    $("#my-form").submit();
});

Then in PHP you can just get the 'spinner-value' input

<?php
$spinner = $_REQUEST['spinner-value'];
....
....
?>

Thanks!! but i want to use the value in php after submit, Is necessary to convert the input to the ariavalue before submit or is there a way to do it automatically for each spinner with numberFormat C (like a plugin or something)? — Juan Bayona Beriso, Sep 10 '14 at 10:05
Thanks a lot, I guess I do something like that. I was hoping it existed some kind of extension of spinner which can store the aria value in a hidden input with the same name and id as the initial object while showing the user the formatted number in other visible input. Like datepicker altfield and altformat. — Juan Bayona Beriso, Sep 11 '14 at 13:25

score 0 · Accepted Answer · answered Oct 02 '14 at 11:54

Ok I finnaly managed to do this the way I wanted. I've just created a plugin named currencyspinner that extends spinner from JQueryUI, here is the code:

$.widget( "ui.currencyspinner", $.ui.spinner, {
     options: {
        numberFormat: 'C',  // Currency Format
        min:0,
        step:0.10
    },
    _create: function(){
        this.hidden = $('<input type="hidden" value="'+this.element.val()+'" name="'+this.element.attr('name')+'">');   // Create a hidden input with the same name and value
        this.element.removeAttr('name');    // remove the name of the original element
        this.element.before(this.hidden);   // insert the hidden element before the original element
        return this._super();
    },

    _refresh: function() {
        this.hidden.val(this._parse(this.element.val()));   // put the aria-valuenow on the original element
        return this._super();
    },

    _destroy: function(){
        this.element.attr('name',this.hidden.attr('name')); // put back the name on the original value
        this.hidden.remove();                               // remove the hidden element
        return this._super();
    }
});

I create a hidden input with the same name and give it the value of aria-valuenow each time the spinner refreshes.

BE CAREFUL if you are trying to acess the currencyspinner after creating the currencyspinner you cannot use $('input[name="nameoftheelement"]').currencyspinner(...); as this will be the hidden input and not the spinner itself.

I Hope it helps someone!

JqueryUI spinner numberformat currency submit number value

2 Answers2