Accepting decimal inputs for an x-editable field

Question

I am using x-editable with download

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 specific for editing a field

$('.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 do not see any help in the documentation. Someone please help me here, I'm pretty new to html and javascript.

Answer 1

type="number"an attribute is required to enter decimal places step.

: http://www.w3.org/TR/html-markup/input.number.html#input.number.attrs.step.float

, , , jquery- :

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

: , ,

EDIT: (!), , - , chrome ( ) , . (: selectionStart SelectionEnd < input type = email/number > ). , , - updateAccount.

Answer 2

:

$('.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';
        }
    }
});

. - , is_numeric() ( PHP), "" , .

Answer 3

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

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 be sure to install 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>