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" (eg: € 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);
                }
           });

Answer 2

Seems like there is no callback function available for what you want. so You need to make it outside of the library.

here is how to do it.

$(document).on("focus",".form-control.input-sm",function(){
  //remove all characters but numbers 
  var _val = $(this).val().match(/\d/g).join("");
  //set it.
  $(this).val(_val);
});

replace the part of .form-control.input-sm into your case. I just tested this on the library's demo site's first demo fieled named "Simple text field" with chrome developper tools

http://vitalets.github.io/x-editable/demo-bs3.html

Since x-editable form would be generated right before showing up.You need to hook an event to document and wait for input field inside of x-editable form gets focus which is the time x-editable shows up and edit the value into whatever you want.

and Yes, This method works AFTER the input field shows up but It's hardly possible to notice that value is changing after it gets displayed.