Event keypress and filter data after inserting value into any form input

Question

Hello, I’m trying to filter my SPA with a data entry form.

I have a form with 3 inputs text, and my intention is in the seller field,type the name of the seller (I have an autocomplete in this input) and hit Enter on the keyboard, and after that it brings me the data in my table that is below my form, but my idea is to perform the filter independent of the entered fields, if I type the client name in the client field, returns the data after the Enter, if I type Address or N° of Contract perform the filter, as a Submit, it would practically be a Ubmit with the Enter button on the keyboard.

I already made a filter in a way that is functional, but my idea would be to use a function and put in the form, with the event 'onkeypress' receiving my function, the way I’m doing now is directly in the form tag, which is how I made it work and is doing the filter, my goal is to type in any field click on Enter and filter, regardless of the field typed.

I’ll leave below as I’m doing now to filter(note in the line of the tag form the way I found to filter in the button event):

<form action="@Url.Action("Filtros")" method="POST" id="formFiltros" onkeypress="if (event.keyCode == 13) { submitFormFiltro(); }">
                    <fieldset>
                        <div class="control-group">
                            <div class="row-fluid">
                                <div class="span3 ">
                                    @Html.LabelFor(x => x.NumeroRegistroCliente, "Nº Contrato")
                                    <div class="controls">
                                        @Html.TextBoxPermissionFor(x => x.NumeroRegistroCliente)
                                    </div>
                                </div>                                    
                                <div class="span3" style="margin-top: 25px;">
                                    @if (Model.IsRVS)
                                    {
                                        <label for="ApenasRVSRASComRetificacao">
                                            @Html.CheckBoxPermissionFor(x => x.ApenasRVSRASComRetificacao)
                                            Mostrar apenas RVS com retificação.
                                        </label>
                                    }
                                    else
                                    {
                                        <label for="ApenasRVSRASComRetificacao">
                                            @Html.CheckBoxPermissionFor(x => x.ApenasRVSRASComRetificacao)
                                            Mostrar apenas RAS com retificação.
                                        </label>
                                    }
                                </div>
                            </div>
                            @if (Model.IsRVS)
                            {
                                <div class="row-fluid">
                                    <div class="span6">
                                        @Html.LabelFor(x => x.IdGrupoEmpresa, "Vendedor")
                                        <div class="controls">
                                            @Html.TextBox("GrupoEmpresaAutoComplete", "", new { placeholder = "Digite um vendedor(cnpj ou nome)..." })
                                            @Html.HiddenFor(x => x.IdGrupoEmpresa)
                                        </div>
                                    </div>
                                    <div class="span6">
                                        @Html.LabelFor(x => x.IdCliente, "Adquirente")
                                        <div class="controls">
                                            @Html.TextBox("ClienteAutoComplete", "", new { placeholder = "Digite um adquirente..." })
                                            @Html.HiddenFor(x => x.IdCliente)
                                        </div>
                                    </div>
                                </div>

                            }
                            else
                            {
                                <div class="row-fluid">
                                    <div class="span6">
                                        @Html.LabelFor(x => x.IdFornecedor, "Vendedor")
                                        <div class="controls">
                                            @Html.TextBox("FornecedorAutoComplete", "", new { placeholder = "Digite um vendedor..." })
                                            @Html.HiddenFor(x => x.IdFornecedor)
                                        </div>
                                    </div>
                                    <div class="span6">
                                        @Html.LabelFor(x => x.IdGrupoEmpresa, "Adquirente")
                                        <div class="controls">
                                            @Html.TextBox("GrupoEmpresaAutoComplete", "", new { placeholder = "Digite um adquirente(nome ou cnpj)..." })
                                            @Html.HiddenFor(x => x.IdGrupoEmpresa)
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>
                    </fieldset>
                </form>
<div class="form-actions">
                    <div style="float: right">
                        <button id="btnFiltro" class="btn btn-primary" onclick="submitFormFiltro();">
                            <i class="icon-filter icon-white"></i>Filtrar
                        </button>
                        <button class="btn btn-primary" onclick="limparFiltro();">
                            Limpar
                        </button>
                    </div>
                </div>

My idea would be to create a function there in the Javascript file,:

    function submitInputsFilter() {
    $('#formFiltros').on(("keypress", function (e) {
        var value = $(this).val()  || !value;

        if (e.keyCode == 13 ) {
            $('#formFiltros').submit();
        }
    }));
}

I tried calling this submitInputsFilter() method; where the form tag is, but it did not return anything.

The way it is now, performing the filter, is calling as reference the method that is in the filter button, but I would like to make a method that runs the same way as the button, only with the click of Enter.

Any help is valid for me to improve my knowledge, thank you!

Answer 1

Use the Event Handler out of function when the page is fully loaded. For this I put document.onreadystatechange with the condition complete.

In the value placed .trim() not to fire the .submit() if only spaces are entered. On the selector put input after the #formFiltros to capture the event of any input within the form. And beyond the condition e.keyCode == 13 in the if, place && value to only fire the .submit() if the variable value have data.

Will stay like this:

document.onreadystatechange = function(){
   if(document.readyState == "complete"){
      $('#formFiltros input').on("keypress", function(e){
         var value = $(this).val().trim();
         if(e.keyCode == 13 && value){
            $('#formFiltros').submit();
         }
      });
   }
}