taking decimal inputs for x-editable field

Question

I am using x-editable with bootstrap

I have the following html field defined

<div class="form-group">
    <label class="col-sm-4">Service Charges(%)</label>
    <div class="col-sm-6 hoverEdit">
        <a class="editableAccount" id="serviceTax"></a>
    </div>
</div>

I have the following script defined to make the field editable

$('.editableAccount').editable({
    type : 'number',
    title : 'Enter New Value',
    success : function(response, newValue) {
        updateAccount(this.id, newValue);
    }
});

Now when i try to edit the field and enter decimal values i get this

I want to make this field editable so that i can enter decimal values. I can't see any help on the documentation. Some one please help me here, i am fairly new to html and javascript.

Answer 1

I used the x-editable shown event and set the step attribute there:

var edit = (function () {

    var $editable = $('.editable');

    var setInputStep = function(editable, step) {
        var input = editable.input;
        if (input.type == 'number')
            input.$input.attr('step', step);
    };

    var shownEvent = function (e, editable) {
        setInputStep(editable, 0.01);
    };

    var init = function () {
        $editable.editable();
        $editable.on('shown', shownEvent);
    };

    return {
        init: init
    };

})();

edit.init();

And in html make sure to set the data-type="number"

<a href="#" class="editable" data-type="number" data-pk="1" data-url="/edit/" data-title="Enter Value" data-name="value">Sample</a>

Answer 2

UPDATE (Nov 1, 2018): Following a recent downvote, I came back to review my answer, and here is what I found out: selection is used by x-editable to process the field to be edited, but selection is only supposed to work on fields rendered as text, thus using x-editable with a number field will either produce an error or just do nothing (see chrome bug 324360 and 415391 for details). So use one of the other answers provided in this question, or see x-editor's github issue #328 with similar solutions.

Here is my original answer for historical purposes:

---

Inputs of type number need a step attribute for them to accept decimals.

Source: https://www.w3.org/TR/2010/WD-html-markup-20101019/input.number.html#input.number.attrs.step.float

Going out from that, you'll most probably need to use your jQuery call like this:

$('.editableAccount').editable({
    type : 'number',
    step: 'any', // <-- added this line
    title : 'Enter New Value',
    success : function(response, newValue) {
        updateAccount(this.id, newValue);
    }
});

Note: I haven't tested this, it's just the best logical move I think

EDIT: Following your comment (thanks!), looks like my suggestion is not working because of a limitation recently introduced in chrome (not sure about other browsers) to number fields no longer allowing selection (source: selectionStart and SelectionEnd incorrectly available on <input type=email/number>). So what you could try instead, is to change the field type to something else and do your number validation in your updateAccount function instead.

Answer 3

Maybe using text field and test for decimal validation :

$('.editableAccount').editable({
    type: 'text',
    title: 'Enter New Value',
    success: function(response, newValue) {
        updateAccount(this.id, newValue);
    },
    validate: function(value) {
        if ($.trim(value) == '') {
            return 'This field is required';
        }
        var regexp = new RegExp("^\d{0,2}(\.\d{0,2}){0,1}$");
        if (!regexp.test(value)) {
            return 'This field is not valid';
        }
    }
});

Also do a validation server-side for security reason. You can use something very basic like is_numeric() (in PHP) but that will accept "funny" values like hex or binary values.