Change the text field by selecting a dropdown option

Question

I have the following field:

    <div class="row">
        <div class="col-md-6"> 
        <div class="input-group">
            <div class="input-group-btn search-panel">
                <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
                    <span id="search_concept">Filtrar por...</span> <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" style="padding: 10px">
                    <li><a href="#"><i class="fas fa-caret-right"></i> Nome</a></li>
                    <li><a href="#"><i class="fas fa-caret-right"></i> Mês e ano</a></li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="fas fa-caret-right"></i> Todos</a></li>
                </ul>
            </div>
            <input type="text" class="form-control" name="Nome" placeholder=" Filtrar por nome">

 <input type="date" class="form-control" name="Data" placeholder=" Filtrar por data">

<input type="text" class="form-control" name="Todos" placeholder=" Filtro por todos os registros">

<input type="text" class="form-control" name="" placeholder=" Selecione o filtro ao lado">

            <span class="input-group-btn">
                <button class="btn btn-inverse" type="button"><i class="fas fa-search"></i></button>
            </span>
            </div>
        </div>
    </div>

Jquery

<script>
$(document).ready(function(e){
    $('.search-panel .dropdown-menu').find('a').click(function(e) {
        e.preventDefault();
        var param = $(this).attr("href").replace("#","");
        var concept = $(this).text();
        $('.search-panel span#search_concept').text(concept);
        $('.input-group #search_param').val(param);
    });
});
</script>

I would like to make sure that when selecting the Month and Year option, replace the Name field with the Date field, if you select the All option, change to the All field and if you do not select the filter, a message appears asking you to select the desired filter. How can I do that?

Answer 1

I believe that’s what you want, I took your code and I edited it as needed, I hope I’ve helped.

In the code below I create a function to hide the inputs and another function that will select which input will appear and call the function at the click of the buttons inside the dropdown, causing the input of the chosen click to appear:

  function showSelectedInput(value){
    hideAll();
    if(value == 1) $('#nome').show();
    else if(value == 2) $('#data').show();
    else if(value == 3) $('#todos').show();
  }

  function hideAll(){
    $('#nome').hide();
    $('#data').hide();
    $('#todos').hide();
    $('#default').hide();
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-6">
    <div class="input-group">
      <div class="input-group-btn search-panel">
        <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
          <span id="search_concept">Filtrar por...</span> <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" style="padding: 10px">
          <li><a href="javascript:void(0)" onclick="showSelectedInput(1)" ><i class="fas fa-caret-right"></i> Nome</a></li>
          <li><a href="javascript:void(0)" onclick="showSelectedInput(2)" ><i class="fas fa-caret-right"></i> Mês e ano</a></li>
          <li class="divider"></li>
          <li><a href="javascript:void(0)" onclick="showSelectedInput(3)" ><i class="fas fa-caret-right"></i> Todos</a></li>
        </ul>
      </div>
      <input type="text" style="display:none" id="nome" class="form-control" name="Nome" placeholder=" Filtrar por nome">

      <input type="date" style="display:none" id="data" class="form-control" name="Data" placeholder=" Filtrar por data">

      <input type="text" style="display:none" id="todos" class="form-control" name="Todos" placeholder=" Filtro por todos os registros">

      <input type="text" class="form-control" id="default" name="" placeholder=" Selecione o filtro ao lado">

      <span class="input-group-btn">
        <button class="btn btn-inverse" type="button"><i class="fas fa-search"></i></button>
      </span>
    </div>
  </div>
</div>

Answer 2

A simple solution is to add the Bootstrap class .d-none to the fields that will appear hidden initially, and add any class (I put .f) in the same fields so you can control them.

In the menu links you place a dataset data-f with respective values of name fields. Thus, clicking on a menu link will show only the field that has the name equal to data-f link clicked, removing the class d-none:

$(".search-panel .dropdown-menu a").click(function(e){
   e.preventDefault();
   $(".f").addClass("d-none");
   $("[name='"+this.dataset.f+"']").removeClass("d-none");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="row">
     <div class="col-md-6"> 
     <div class="input-group">
         <div class="input-group-btn search-panel">
             <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
                 <span id="search_concept">Filtrar por...</span> <span class="caret"></span>
             </button>
             <ul class="dropdown-menu" role="menu" style="padding: 10px">
                 <li><a href="#" data-f="Nome"><i class="fas fa-caret-right"></i> Nome</a></li>
                 <li><a href="#" data-f="Data"><i class="fas fa-caret-right"></i> Mês e ano</a></li>
                 <li class="divider"></li>
                 <li><a href="#" data-f="Todos"><i class="fas fa-caret-right"></i> Todos</a></li>
             </ul>
         </div>
         <input type="text" class="form-control d-none f" name="Nome" placeholder=" Filtrar por nome">

          <input type="date" class="form-control d-none f" name="Data" placeholder=" Filtrar por data">
         
         <input type="text" class="form-control d-none f" name="Todos" placeholder=" Filtro por todos os registros">
         
         <input type="text" class="form-control f" placeholder=" Selecione o filtro ao lado">

         <span class="input-group-btn">
             <button class="btn btn-inverse" type="button"><i class="fas fa-search"></i></button>
         </span>
         </div>
     </div>
 </div>

A few remarks:

Instead of using:

$('.search-panel .dropdown-menu').find('a')

You can use:

$('.search-panel .dropdown-menu a')

It is shorter and avoids using an extra method, the .find().

Another thing is that it makes no sense to use the dial:

'.search-panel span#search_concept'

As a id should be unique, just go straight to it:

'#search_concept'