更改 <input> 值并通过 jquery 自动提交

Question

我正在设计一种让用户查看可视化背后的所有数据的方法原型。基本上他们会点击一个点，弹出一个模态框，模态框内的 table 会被字符串提交动态过滤。到目前为止，我几乎所有的东西都运行良好，但我无法让过滤器在值更改时提交。

我使用的 tables 库是 DataTables，所以我一直在尝试使用一个小的 jquery 脚本和一些 html 按钮来测试它。

目前，我的脚本是在单击特定按钮时触发的，然后它会打开模式，找到 table 的唯一 ID，然后找到最接近的 child 输入元素，然后然后它写入一个字符串作为该输入的值。

示例脚本：

 <script>
    $('#test-button-2').on('click', function () {
        var search_input = $("#x-data-modal").find('input:first');
        search_input.val('May 16, 2018');
    })
</script>

相关HTML:

 <div class="modal fade" id="x-data-modal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="moday-body">
                    <div class='row'>
                        Search:<input type="search" class="form-control form-control-sm" placeholder=""
                                      aria-controls="x-data-table">
                    </div>
                    <table id='x-data-table'>table stuff</table>
                </div>
            </div>
        </div>
    </div>

我无法直接访问输入，因为它是由没有唯一 ID 的 DataTables 库创建的，但这可以解决问题。单击按钮后，模式将打开，相关输入将更改为包含的字符串。但由于某种原因，它没有提交。所以基本上 table 当我想用已执行或正在执行的预装搜索打开时，table 打开预装搜索。

我试过：

 <script>
    $('#test-button-2').on('click', function () {
        var search_input = $("#x-data-modal").find('input:first');
        search_input.val('May 16, 2018');
        search_input.submit();
    })
</script>

同样（使用内置的 DataTables 搜索模块）：

<script>
    $('#test-button-2').on('click', function () {
        var search_input = $("#x-data-modal").find('input:first');
        search_input.val('Apr 27, 2018');
        var table = $('#x-data-table').DataTable();
        search_input.on('change', function () {
            table.search(this.value).draw();
            console.log(('This was the search') + this.value);
        });
        console.log('Ran Whole Function');
    });
</script>

Answer 1

您需要在表单元素而不是输入元素上调用 .submit() 函数。

Answer 2

通过观察事件侦听器的搜索和搭载 DataTables 函数解决了这个问题。最终也更容易定位搜索。

<script>
$('#test-button-2').on('click', function () {
    var table = $('#x-data-table').DataTable();
    table.search('Jun 10, 2018').draw();
})
</script>

更改 <input> 值并通过 jquery 自动提交

Change <input> value and submit automatically via jquery

javascript

jquery

datatables-1.10

bootstrap-4