Requesting help adding a submit button to column searches

hungrymancwopa42

Hello -

I have an input box for city and zip. As you type in either box, my data table filters in real time.

This code is working great:

<label>City</label>
<input name="CITY" type="text" id="CITY" Alt="City" value="" />

<label>Zip Code</label>
<input name="ZIPCODE" type="text" id="ZIPCODE" Alt="Zip Code" value="" />


<script>
$(document).ready(function(){

    $('#CITY').on( 'keyup', function () {
        myTable.columns( 1 )
        .search( this.value )
        .draw();
    } );

    $('#ZIPCODE').on( 'keyup', function () {
        myTable.columns( 2 )
        .search( this.value )
        .draw();
    } );    
});
</script>

The part that I am stuck on is I would like to remove the "keyup" and add a search button. Only after clicking search would the filters apply.

I am thinking that my submit button would look something like this:

<input type="Submit" name="SUBMIT" value="Submit Search" onclick="myFunction()"/>

"myFunction" would then contain all the javascript to filter on both columns. What exactly would my new javascript look like? Would "myFunction" be part of the "document ready" function?

I assume I would need to replace .search( this.value ) with something like .search( CITY ).

I have tried a lot of things but I can't seem to get even the simplest syntax to work.

This actually may be more of a javascript problem than data tables, so feel free to close this thread if you think it is out of scope of this website.

Thanks very much.

colin

Hi @hungrymancwopa42 ,

You would change the this.value to be the value of the input element, so something like myTable.column(1).search($('#CITY').val()).draw()

Cheers,

Colin

hungrymancwopa42

Thank you @colin , this is working great!!