Disable the possibility of the ENTER key acting on another button

Question

Hello, everybody.

I have a form in which has two Tables, inside the second table has an input text [sign 1 of the image]. This input text searches the record when pressing the ENTER key.

But when I press ENTER it is activating a class"accordion" [2 sign of the image] button and closing (or opening), and performing the search.

How do I disable this action when I press the ENTER key?

action to open and close the accordion

$(document).ready(function() {
   $(document).on('submit','form', function(e){
       e.preventDefault();
   });
   $(document).on('submit','div', function(e){
       e.preventDefault();
   });
   $('.collapse').show();
});

js function to perform the search

function pesquisar(element){
   $(document).on('submit','form', function(e){
       e.preventDefault();
   });

   $('#' + element.id).keyup(function(e){  
      if(e.keyCode == 13){
      ... chama um ajax para chamar outro arquivo PHP para fazer a pesquisa

tela.php

    <form>
    <!--- tabela - 1 -->
    <div class="row" id="cx_1">
            <div class="col-xs-12 col-sm-12 espaco1">
                <div class="panel-group" id="accordionN1" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                            <button id="b1" class="accordion"
                                ><i class="fa fa-check-square-o"></i>
                            </button>
                        <div style=" padding-top: 12px; padding-bottom: 12px;" class="panel-collapse collapse" 
                                role="tabpanel">
                            <div style="padding: 5px;">
                                <table class="table table-condensed table-hover" style="font-size: 11px;">
                                    <td>...</td>
                                </table>    
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!--- tabela 2 -->
    <div class="row" id="cx_2">
        <div class="col-xs-12 col-sm-12 espaco1">
            <div class="panel-group" id="accordionN2" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                        <button id="b2" class="accordion"
                                data-toggle="collapse" data-target="#collapse2"><i class="fa fa-check-square-o"></i> Passagem de Serviço</button>
                    <div id="collapse2" class="panel-collapse collapse" role="tabpanel">
                        <div style="padding: 5px;">
                            <table id="table_linha_passagem_servico" class="table table-condensed table-hover" style="font-size: 11px;">
                                <thead>
                                    <tr>
                                        <th class="col-xs-1 col-sm-1">Serviço</th>
                                        <th class="col-xs-6 col-sm-6">Descrição</th>
                                        <th class="col-xs-1 col-sm-1">Fiscal Elab.</th>
                                        <th class="col-xs-1 col-sm-1">Fiscal Envio</th>
                                        <th class="col-xs-1 col-sm-1">Enviado em</th>
                                        <th class="col-xs-1 col-sm-1">Avaliação</th>
                                        <th class="col-xs-0.4 col-sm-0.4"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="linha_passagem_servico_row1">
                                        <td><input style="height: 25px; font-size:12px; width: 100px" 
                                            class="form-control"  type ="text" id="servico_passagem_servico_row1"
                                            onkeydown="pesquisar(this)"></td>
                                        <td id="descricao_passagem_servico_row1"></td>
                                        <td><input class="form-control upper" style="height: 25px; font-size:12px; width: 45px; padding-left: 5px;"  maxlength="4" type ="text" id="fiscal_elab_passagem_servico_row1"></td>
                                        <td><input class="form-control upper" style="height: 25px; font-size:12px; width: 45px; padding-left: 5px;"  maxlength="4" type ="text" id="fiscal_envio_passagem_servico_row1"></td>
                                        <td><input class="form-control data" style="height: 25px; font-size:12px; width: 120px" pattern="^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$"  type ="text" id="data_envio_passagem_servico_row1"></td>
                                        <td>
                                            <select 
                                                style="height: 25px; font-size:12px; width: 120px" id="avaliacao_passagem_servico_row1"
                                                name="avaliacao_passagem_servico" class="form-control">
                                                <option value=""></option>
                                                <option value="10">10</option>
                                                <option value="7,5">7,5</option>
                                                <option value="5,0">5</option>
                                                <option value="2,5">2,5</option>
                                                <option value="0,0">0</option>
                                            </select>
                                        </td>
                                        <td style="text-align: center;" ><button id="excluir_passagem_servico_row1" type="button" style="height: 25px; width: 30px" onclick="excluirLinha(this)"><i class="fa fa-trash"></i></button></td>
                                    </tr>
                                </tbody>
                            </table>        
                            <div class="row" >
                                <div class="col-sm-12" >
                                    <br>
                                        <button type="button" style="margin-left: 20px; margin-right: 20px; margin-bottom: 10px; float: right;" class="btn btn-primary" id="add_passagem_servico" onclick="adicionarLinhaPassagemServico()"  >Adicionar Linha</button>
                                        <button type="button" style="margin-left: 20px; margin-bottom: 10px; float: left;" class="btn btn-primary" id="salvar_passagem_servico" onclick="salvarPassagemServico()" >Salvar Avaliação</button>              
                                </div>
                            </div>                                
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Answer 1

Are you wearing a onkeydown in the input just to call the function pesquisar() to send the id of input for an event keyup. You don’t need to do this. In addition to everything you will bugle your code creating numerous repeated events each time a key is pressed.

What you need to do is create a unique event that will catch the id of the entered field. Add any class to all fields where ENTER will be clicked (in the case below, I put the class .servnum in the input). This class will be used in the event .on('keyup'..., and remove from input the onkeydown="pesquisar(this)". The input will look like this:

                                                                          classe adicionada
                                                                                 ↓
<input style="height: 25px; font-size:12px; width: 100px" class="form-control servnum"  type ="text" id="servico_passagem_servico_row1">

Another thing is to add one type="button" on the button .accordion so that it behaves like a common button and does not submit the form when clicked:

                     ↓
<button id="b2" type="button" class="accordion" data-toggle="collapse" data-target="#collapse2"><i class="fa fa-check-square-o"></i> Passagem de Serviço</button>

Beyond what you’re opening the collapse wrong way. It would be

$('.collapse').collapse('show'); instead of $('.collapse').show();

Once done, put all the JS code inside the $(document).ready(function() {:

$(document).ready(function() {
   $(document).on('submit','form', function(e){
       e.preventDefault();
   });
   $(document).on('submit','div', function(e){
       e.preventDefault();
   });

   $('.collapse').collapse('show');

   $(document).on('keyup', '.servnum', function(e){  
      var this_id = this.id; // id do campo
      if(e.keyCode == 13){
         // chama o Ajax
      }
   });
});