Disable the ability of the ENTER key to act on the action of another button

Navigation
1

Hello, everyone.

I have a form in which it has two tables, inside the second table it has an input text. This input text searches the record when you press the ENTER key.

But when I press ENTER, it is activating a class accordion button and closing (or opening), as well as performing the search.

How do I disable this action when I press ENTER?

actiontoopenandclosetheaccordion

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

jsfunctiontoperformthesearch

functionpesquisar(element){$(document).on('submit','form',function(e){e.preventDefault();});$('#'+element.id).keyup(function(e){if(e.keyCode==13){...chamaumajaxparachamaroutroarquivoPHPparafazerapesquisa

tela.php

<form><!---tabela-1--><divclass="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>
    
asked by anonymous 05.11.2018 / 18:25

1 answer

1

You are using onkeydown in input only to call the pesquisar() function to send id of input to a keyup event. No need to do that. In addition, it will bug your code by creating countless repeated events each time a key is pressed.

What you need to do is create a unique event that will get the id of the typed field. Add any class to all fields where the ENTER will be clicked (in the case below, I put the class .servnum in input ). This class will be used in event .on('keyup'... , and remove from input or 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 type="button" to the .accordion button so that it behaves like a regular button and does not submit the form when it is 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>

In addition to that you are opening collapse wrongly. It would be

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

Once this is done, put all the JS code inside $(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
      }
   });
});
    
05.11.2018 / 19:52
want to read more than 1 .txt file in C [closed] Stack operations