How to sanitize X-Editable value *before* editing?

Question

I'm using X-Editable to give users the possibility to edit values inline. This works great, but I now want to use it for some money values which are localized in a "European way" (e.g.: € 12.000.000,00). When I click edit, I want the input to only contain 12000000 though.

Is there a way that I can sanitize the value in X-editable before it gets displayed in the X-Editable input? All tips are welcome!

Answer 1

See the plunker http://plnkr.co/edit/Vu78gRmlKzxrAGwCFy0b. From X-editable documentation it is evident you can use value property of configuration to format the value you want to send to the editor as shown below.

Element displaying money value in your HTML:

 <a href="#" id="money">12.000.000,00</a>

Javascript code in your HTML:

 <script type="text/javascript">
      $(document).ready(function() {
           $.fn.editable.defaults.mode = 'inline';
           $('#money').editable({
                type: 'text',
                pk: 1, //Whatever is pk of the data
                url: '/post', //Post URL
                title: 'Enter money', //The title you want to display when editing
                value:function(input) {
                     return $('#money').text().replace(/\./g, '').replace(/,00$/,'');
                }
           });
      });
 </script>

If you want to format the value back for display after editing you can do that in display property of the configuration hash like this:

           $('#money').editable({
                type: 'text',
                pk: 1, //Whatever is pk of the data
                url: '/post', //Post URL
                title: 'Enter money', //The title you want to display when editing
                value:function() {
                     return $('#money').text().replace(/\./g, '').replace(/,00$/,'');
                },
                display:function(value) {
                     //var formattedValue = formatTheValueAsYouWant(value);
                     //$('#money').text(formattedValue);
                }
           });