php - 自动提交 jeditable onchange

Question

我有带有 x 个可编辑输入字段的表单，我希望这些字段能够自动提交数据。除了日期时间选择器之外，一切正常。

基本上，对于 x 可编辑日期时间选择器，我有这样的东西:

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

和这样的脚本:

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

所以，我想要只有输入字段，没有“确定”和“取消”按钮。

我发现自动提交无法按预期工作。

我测试了 x editable 托管(包装)的 datetimepicker 的行为以及它单独运行时的行为。测试代码可以在这里找到:http://jsfiddle.net/2kYNq/25/

这里是输入组件行为的简短描述:

组件 A.datetimepicker 由 x 包裹，可使用 showbuttons 进行编辑: false

当用户选择日期时，新日期会出现在输入字段中，但不会提交:当用户移动到另一个输入字段时，更改的日期将被丢弃。如果用户选择 x 可编辑输入字段的输入部分并单击 Enter --> 2+ 用户操作(单击)，则可以进行提交

组件 B.datetimepicker 由 x 包裹，可编辑并带有 showbuttons: true

可以通过点击“确定”按钮进行提交，或者与情况A相同，点击组件的输入部分，然后点击回车。

单独的组件C. datetimepicker

通过日历组件选择日期后立即提交。

<小时/>

是否可以使用 x 可编辑的日期时间选择器包装，无需“确定”和“取消”按钮，一旦通过日历组件选择了日期，该日期时间选择器就会自动提交日期？用户无需单击任何内容即可实现日期提交。仅用于选择日期。

Answer 1

经过一番摆弄之后，这是技巧:

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

form-control 是文本输入的类，因为这是 bootstrap 中的默认类，您可以将其更改为任何唯一的类，并在 .editable() 中修改相同的类 函数。

jeditable还有一个 onblur 参数，您可以使用它来提交:

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

一旦您进行更改并离开输入框，系统就会提交数据。

<强> DEMO