javascriptjqueryajaxjquery-inputmask

How to remove inputmask when an ajax form is submitted as FromData?

It happens that my ajax form has a file upload input, and therefore I have to submit it with an FormData instead of a simple .serialize(). Then I found the autoUnmask on my jquery.inputmask no long effective.

Here is the example: http://jsfiddle.net/btqtnumL/1/

When the form is submitted, the result from .serialize() has a value with input mask removed. But the result from FormData() still shows the mask.

Content-Disposition: form-data; name="cost"

1,000

How can we remove the mask in this case?

Solution

  • Firstly, to get unmasked value from input, use inputmask('unmaskedvalue') (here is a reference).

    One way is to rename the input element to something like masked-cost and then use .append() method.

    <input name="masked-cost" .... />

    In javascript you can do something like this 

    var formData = new FormData($form[0]);
formData.append('cost', $('input[name="masked-cost"]').inputmask('unmaskedvalue'));

    On the server side you can retrieve the cost variable with unmasked value.

    FormData would look something like this

    ------WebKitFormBoundaryMHLOLWal6cTPLuBG Content-Disposition: form-data; name="masked-cost"

    1,000 ------WebKitFormBoundaryMHLOLWal6cTPLuBG Content-Disposition: form-data; name="cost"

    1000

    Here is the updated demo http://jsfiddle.net/dhirajbodicherla/btqtnumL/2/