Auto submit jeditable onchange

Question

I have form with x editable input fields and I would like those fields to auto submit data. Everything works fine except for datetimepicker.

Basically, for x editable datetimepicker I have something like this:

<a href="#" class="form-control date2" data-date="1971-12-27" data-type="datetime" style="display: block;">27 Dec 1971</a>

and script like this:

$('.date2').editable({
    format: 'yyyy-mm-dd',
    viewformat: 'd M yyyy',
    inputclass: 'form-control',
    showbuttons: false,
    tpl: '<div class="input-group date"><input type="text" readonly class="form-control input-medium"/><span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>',
    datetimepicker:{
        startView: 4,
        minView: 2,
        pickerPosition: 'bottom-left'
    }
});

So, I want to have just input field without ok & cancel buttons.

I have found that auto submit doesn't work as expected.

I have tested behaviour of datetimepicker hosted (wrapped) by x editable and when it is alone. Tested code can be found here: http://jsfiddle.net/2kYNq/25/

and here is short description of the behaviour of the input components:

component A. datetimepicker wrapped by x editable with showbuttons: false

When user selects date, new date appears in the input field, but it is not submitted: when user moves to another input field, changed date is discarded. Submission can be made if user selects input part of the x editable input field and clicks enter --> 2+ user actions (clicks)

component B. datetimepicker wrapped by x editable with showbuttons: true

Submission can be made by click on ok button or, same as in case A, by click on input part of the component, and then click on enter.

component C. datetimepicker alone

Submission is made as soon as date is selected through calendar component.

---

Is it possible to have datetimepicker wrapped by x editable without ok and cancel buttons, which auto submits date as soon as date has been selected through calendar component? User doesn't have to click anything to achieve date submission. Only to select a date.

Answer 1

After a little bit of fiddling, here's the trick:

$(document).on('change','.form-control',function(){
   $(this).trigger("submit")
});

form-control is the class of the text input, since this is a default class in bootstrap you can change it to any unique class and amend the same in your .editable() function.

jeditable also has a onblur parameter which you can use to submit as:

$('.date3').editable({
  onblur:'submit'
});

This will submit the data once you make a change and leave the input box.

DEMO