Formating bank account input only for display

Question

I need to format a text input for bank number so that the numbers would look in this way:

11 2490 1111 0000 0000 2222 3333

The problem is I just want to show this formated (with spaces) for the user but to send it to the server without it (11249011110000000022223333). How can I achieve this?

EDIT

This is what I've written using formatter.js library ( http://firstopinion.github.io/formatter.js/index.html ):

<script>
$(document).ready(function () {
        var formatted = new Formatter(document.getElementById('bank_account-0'), {
        'pattern': '{{99}} {{9999}} {{9999}} {{9999}} {{9999}} {{9999}} {{9999}}',
        'persistent': false
    });
});
</script>

Answer 1

You can use bankAccount.value.replace(/ /g, '') .

Code example:

 var bankAccount = document.getElementById('bank_account-0'), getNumber = document.getElementById('get_number'); new Formatter(bankAccount, { 'pattern': '{{99}} {{9999}} {{9999}} {{9999}} {{9999}} {{9999}} {{9999}}', 'persistent': false }); getNumber.onclick = function() { var num = bankAccount.value.replace(/ /g, ''); console.log(num); } 

 .input { width: 240px} 

 <script src="//firstopinion.github.io/formatter.js/javascripts/formatter.js"></script> <input type="text" class="input" id="bank_account-0" maxlength="26" pattern="\\d*"> <button id="get_number">Get number</button> 

Answer 2

You might consider changing the value each time the input gets unfocused or pasted value into:

var a = document.getElementById('yourInputId');
a.onblur = function() { this.value = this.value.replace(/ /g, ''); };

Hint: You might consider cutting the white-spaces on server side. This might be a part of server-side validation.

Answer 3

Finally I decided to use simple PHP filter instead:

$element->addFilter('PregReplace', array( 'match' => '/\s/', 'replace' => '' )); 

That works fine with cleave.js library on the frontend and meet my requirements.