select input according to previous option

Asked

Viewed 67 times

1

Eai, someone who knows jquery or js, how do I show a text field according to the option of a previous select? And if the user chooses no contact, how do I "hide" the input? Thank you !

            
            $('input[name="WTaluno"]').hide();
$('input[name="Emailaluno"]').hide();
            $('select[name="selectContato"]').on('change', function() {
                alert('oi');
            });
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Help NTI</title>
</head>
<body>
    <select id="selectContato" name="selectContato" class="form-control">
        <option value="nao" name="nao">Selecione o contato</option>
        <option value="optionWT" name="optionWT">Whatsapp / Telefone</option>
        <option value="optionEmail" name="optionEmail">Email</option>
    </select>
        <input type="text" id="WTaluno" class="form-control" name="WTaluno" placeholder="Whatsapp / Telefone">
        <input type="email" id="Emailaluno" class="form-control" name="Emailaluno" placeholder="Email">
        <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</body>
</html>

javascript html jquery

2 answers

2

To save the large amount of ifs, you can make use of the attributes data-* doing something like that:

function apply(type) {
  $('.type[data-type]').hide(); // Esconde todos os campos.
  $(`.type[data-type="${type}"]`).show(); // Mostra somentes aqueles que possuem o atributo `data-type` com o valor selecionado.
}

// Esconde todos os campos, mostrando somente a `div` de fallback.
apply('none');

$('.type-selector').on('change', function() {
  // Faz com que o campo mostrado seja o do valor do select:
  apply($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="type-selector">
  <option value="none">Nenhum</option>
  <option value="phone">Celular</option>
  <option value="email">E-Mail</option>
</select>

<!-- Note que o atributo `data-type` deve ser o mesmo do `value` do select. -->

<div class="type" data-type="none">
  Nenhum tipo escolhido.
</div>

<input type="text" class="type" data-type="phone" placeholder="Celular" />

<input type="text" class="type" data-type="email" placeholder="E-Mail" />

In the above example, we create an attribute called data-type. Every field you want to show or hide has a data-type which corresponds to the value of a option select.

Thus, whenever the value of the selection menu is changed, the script hide all the fields and show only the one who gives match with the selected value. :)

1


To receive the value of select use:

$(this).find('option:selected').val();

option:selected selects the active item on select and val() receives the value of your select, then just use the if comparing conditions, follows the solution of your code.

$('select[name="selectContato"]').on('change', function() {
  if ($(this).find('option:selected').val() == 'optionWT') {
    $('input[name="WTaluno"]').show();
    $('input[name="Emailaluno"]').hide();
  } else if ($(this).find('option:selected').val() == 'optionEmail') {
    $('input[name="WTaluno"]').hide();
    $('input[name="Emailaluno"]').show();
  } else {
    $('input[name="WTaluno"]').hide();
    $('input[name="Emailaluno"]').hide();
  }
});
<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <title>Help NTI</title>
</head>

<body>
  <select id="selectContato" name="selectContato" class="form-control">
    <option value="nao" name="nao">Selecione o contato</option>
    <option value="optionWT" name="optionWT">Whatsapp / Telefone</option>
    <option value="optionEmail" name="optionEmail">Email</option>
  </select>
  <input style="display:none" type="text" id="WTaluno" class="form-control" name="WTaluno" placeholder="Whatsapp / Telefone">
  <input style="display:none" type="email" id="Emailaluno" class="form-control" name="Emailaluno" placeholder="Email">
  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</body>

</html>

  • Mass, thank you very much Leo ! Hug.

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.