Question

我有x个可编辑输入字段的表单，我希望这些字段能够自动提交数据。除了datetimepicker，一切正常。

基本上，对于x editable datetimepicker，我有类似的东西：

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

所以，我想要输入字段而不用ok＆amp;取消按钮。

我发现自动提交没有按预期工作。

我已经测试了由ed editable托管（包装）的datetimepicker的行为以及它何时单独使用。可以在此处找到经过测试的代码：http://jsfiddle.net/2kYNq/25/

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

组件A.由x编辑的datetimepicker与showbuttons一起编辑：false

当用户选择日期时，新日期会出现在输入字段中，但不会提交：当用户移动到另一个输入字段时，将丢弃更改日期。如果用户选择x可编辑输入字段的输入部分并单击enter - ＆gt;，则可以进行提交。 2个以上的用户操作（点击）

组件B. datetimepicker由x编辑，包含showbuttons：true

可以通过单击“确定”按钮进行提交，或者与案例A相同，方法是单击组件的输入部分，然后单击“输入”。

组件C. datetimepicker独自

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

是否可以将datetimepicker包装为x editable而不使用ok和cancel按钮，一旦通过日历组件选择了日期，它会自动提交日期？用户无需点击任何内容即可实现提交日期。仅选择日期。

Answer 1

经过一些小小的摆弄，这就是诀窍：

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

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

jeditable还有一个onblur参数，您可以使用该参数提交为：

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

这将在您进行更改后提交数据并离开输入框。

<强> DEMO

自动提交jeditable onchange

1 个答案: