Q:

Change  value and submit automatically via jquery

I am prototyping a way for a user to view all the data behind a visualization. Basically they would click on a point, a modal would pop up, and the table within modal would be dynamically filtered by a string submission. I've got almost everything working perfectly so far, but I can't get the filter to submit on value change.
The tables library I am using is DataTables, so I have been trying to test this with a small jquery script and some html buttons.
Currently my script is triggered on click of a specific button, it then opens the modal, finds the table's unique id and then the closest child that is an input element, and then it writes a string as that input's value. 
Example Sript:
 <script>
    $('#test-button-2').on('click', function () {
        var search_input = $("#x-data-modal").find('input:first');
        search_input.val('May 16, 2018');
    })
</script>

Relevant 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>

I cannot access the input directly as it is created by the DataTables library without a unique id, but this does the trick. Upon clicking the button the modal is opened and the relevant input is changed to the included string. But for some reason it doesn't submit. So basically the table opens with a canned search when I wanted to open with that canned search either executed or in the process of executing.
I've tried:
 <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>

And similarly (using the built in DataTables search module):
<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>

A:

Solved this by watching the Event listener for the search and piggy-backing off the DataTables function. Ended up being much eaiser to locate the search  with this as well. 
<script>
$('#test-button-2').on('click', function () {
    var table = $('#x-data-table').DataTable();
    table.search('Jun 10, 2018').draw();
})
</script>

