How can I remove AutoNumeric formatting before submitting form?

Question

I'm using the jQuery plugin AutoNumeric but when I submit a form, I can't remove the formatting on the fields before POST.

I tried to use $('input').autonumeric('destroy') (and other methods) but it leaves the formatting on the text fields.

How can I POST the unformatted data to the server? How can I remove the formatting? Is there an attribute for it in the initial config, or somewhere else?

I don't want to send the serialized form data to the server (with AJAX). I want to submit the form with the unformatted data like a normal HTML action.

Answer 1

I wrote a better, somewhat more general hack for this in jQuery

$('form').submit(function(){
    var form = $(this);
    $('input').each(function(i){
        var self = $(this);
        try{
            var v = self.autoNumeric('get');
            self.autoNumeric('destroy');
            self.val(v);
        }catch(err){
            console.log("Not an autonumeric field: " + self.attr("name"));
        }
    });
    return true;
});

This code cleans form w/ error handling on not autoNumeric values.

Answer 2

With newer versions you can use the option:

unformatOnSubmit: true

Answer 3

Inside data callback you must call getString method like below:

        $("#form").autosave({
        callbacks: {
            data: function (options, $inputs, formData) {

                return $("#form").autoNumeric("getString");
            },
            trigger: {
                method: "interval",
                options: {
                    interval: 300000
                }
            },
            save: {
                method: "ajax",
                options: {
                    type: "POST",
                    url: '/Action',
                    success: function (data) {

                    }
                }
            }
        }
    });

Answer 4

Use the get method.

'get' | returns un-formatted object via ".val()" or ".text()" | $(selector).autoNumeric('get');

---

<script type="text/javascript">
    function clean(form) {
        form["my_field"].value = "15";
    }
</script>

<form method="post" action="submit.php" onsubmit="clean(this)">
    <input type="text" name="my_field">
</form>

This will always submit "15". Now get creative :)

---

Mirrored raw value:

<form method="post" action="submit.php">
    <input type="text" name="my_field_formatted" id="my_field_formatted">
    <input type="hidden" name="my_field" id="my_field_raw">
</form>

<script type="text/javascript">
    $("#my_field_formatted").change(function () {
        $("#my_field").val($("#my_field_formatted").autoNumeric("get"));
    });
</script>

The in submit.php ignore the value for my_field_formatted and use my_field instead.

Answer 5

You can always use php str_replace function

str_repalce(',','',$stringYouWantToFix);

it will remove all commas. you can cast the value to integer if necessary.

Answer 6

$("input.classname").autoNumeric('init',{your_options});
$('form').submit(function(){
   var form=$(this);
   $('form').find('input.classname').each(function(){
       var self=$(this);
       var v = self.autoNumeric('get');
       // self.autoNumeric('destroy');
       self.val(v);
   });
});

classname is your input class that will init as autoNumeric Sorry for bad English ^_^

Answer 7

There is another solution for integration which doesn't interfere with your client-side validation nor causes the flash of unformatted text before submission:

var input = $(selector);
var proxy = document.createElement('input');
proxy.type = 'text';
input.parent().prepend(proxy);
proxy = $(proxy);
proxy.autoNumeric('init', options);
proxy.autoNumeric('set', input.val())''
proxy.change(function () {
    input.val(proxy.autoNumeric('get'));
});

Answer 8

You could use the getArray method (http://www.decorplanit.com/plugin/#getArrayAnchor).

$.post("myScript.php", $('#mainFormData').autoNumeric('getArray'));

Answer 9

I came up with this, seems like the cleanest way. I know it's a pretty old thread but it's the first Google match, so i'll leave it here for future

$('form').on('submit', function(){
    $('.curr').each(function(){
        $(this).autoNumeric('update', {aSign: '', aDec: '.', aSep: ''});;
    });
});

Answer 10

Solution for AJAX Use Case

I believe this is better answer among all of those mentioned above, as the person who wrote the question is doing AJAX. So kindly upvote it, so that people find it easily. For non-ajax form submission, answer given by @jpaoletti is the right one.

// Get a reference to any one of the AutoNumeric element on the form to be submitted
var element = AutoNumeric.getAutoNumericElement('#modifyQuantity');

// Unformat ALL elements belonging to the form that includes above element
// Note: Do not perform following in AJAX beforeSend event, it will not work
element.formUnformat();

$.ajax({
    url: "<url>",
    data : {
        ids : ids,
        orderType : $('#modifyOrderType').val(),
        
        // Directly use val() for all AutoNumeric fields (they will be unformatted now)
        quantity : $('#modifyQuantity').val(),
        price : $('#modifyPrice').val(),
        triggerPrice : $('#modifyTriggerPrice').val()
    }
})
.always(function(  ) {
    // When AJAX is finished, re-apply formatting    
    element.formReformat();     
});

Answer 11

autoNumeric("getArray") no longer works.

unformatOnSubmit: true does not seem to work when form is submitted with Ajax using serializeArray().

Instead use formArrayFormatted to get the equivalent serialised data of form.serializeArray()

Just get any AutoNumeric initialised element from the form and call the method. It will serialise the entire form including non-autonumeric inputs.

$.ajax({
    type: "POST",
    url: url,
    data: AutoNumeric.getAutoNumericElement("#anyElement").formArrayFormatted(),
)};