Enable form fields with JS with Radio Button

Question

I’m starting with Javascript and have a little problem.

I have an HTML form where I have a field radio where I have two options, Texto and Página. When I click on the option Texto he carries a field input to enter the title, when I select the Página he shows me two fields one input title and subtitle.

How would I do that logic?

<div class="form-group row">
    <label for="title-type" class="col-sm-2 col-form-label">Tipo Título:</label>
    <div class="col-sm-2">
        <input name="title-type" type="radio" value="text" id="title-type" onclick="typeRadioButton()"> Texto
    </div>
    <div class="col-sm-2">
        <input name="title-type" type="radio" value="page" id="title-type" onclick="typeRadioButton()"> Página
    </div>
</div>

<div class="form-group row">
    {{ Form::label('metadata', 'Título', ['class' => 'col-sm-2 col-form-label']) }}
    <div class="col-sm-10">
        {{ Form::text('title', null, ['class' => 'form-control',  'placeholder' => 'Digite um Titulo', 'required' => true]) }}
    </div>
</div>

<div class="form-group row">
    {{ Form::label('metadata', 'Sub-título', ['class' => 'col-sm-2 col-form-label']) }}
    <div class="col-sm-10">
        {{ Form::text('pagetitle', null, ['class' => 'form-control',  'placeholder' => 'Digite um Sub-Titulo', 'required' => true]) }}
    </div>
</div>

<div class="form-group row">
    {{ Form::label('metadata', 'Conteúdo', ['class' => 'col-sm-2 col-form-label']) }}
    <div class="col-sm-10">
        {{ Form::textarea('slot', null, ['class' => 'form-control', 'required' => true]) }}
    </div>
</div>

<div class="form-group row">
    {{ Form::label('metadata', 'Cor de fundo:', ['class' => 'col-sm-2 col-form-label']) }}
    <div class="col-sm-10">
        {{ Form::checkbox('Usar Padrão do site', '', false) }} Usar Padrão do site
        <input type="color" name="background ">
    </div>
</div>

<div class="form-group row">
    {{ Form::label('metadata', 'Cor do título:', ['class' => 'col-sm-2 col-form-label']) }}
    <div class="col-sm-10">
        {{ Form::checkbox('Usar Padrão do site', '', false) }} Usar Padrão do site
        <input type="color" name="color-title">
    </div>
</div>

<div class="form-group row">
    {{ Form::label('metadata', 'Cor do texto:', ['class' => 'col-sm-2 col-form-label']) }}
    <div class="col-sm-10">
        {{ Form::checkbox('Usar Padrão do site', '', false) }} Usar Padrão do site
        <input type="color" name="color-text">
    </div>
</div>


{{-- JQuert--}}
<script>
    function typeRadioButton() {
        var type = document.getElementsByName("title-type");

        if (type[0].checked) {
            alert('Text');

        } else if (type[1].checked) {
            alert('Page');
        }
    }

</script>

Answer 1

It should be something like this, then stick on the Divs with id="inv" and id="inv2" the inputs that you want to appear depending on the button that is pressed.

$(function() {
  $('#global').bind("keyup click", function() {
    hideShow();
  });
  hideShow();
});


function hideShow() {
  if ($('#texto').is(':checked')) {
    $('#inv').show();
  } else {
    $('#inv').hide();
  }
  if ($('#pagina').is(':checked')) {
    $('#inv2').show();
  } else {
    $('#inv2').hide();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row" id="global">
  <label for="title-type" class="col-sm-2 col-form-label">Tipo Título:</label>
  <div class="col-sm-2">
    <input name="title-type" type="radio" value="text" id="texto"> Texto
  </div>
  <div class="col-sm-2">
    <input name="title-type" type="radio" value="page" id="pagina"> Página
  </div>
</div>
<div style="diplay: none;" id="inv">
  Coisas escondidas
</div>
<div style="diplay: none;" id="inv2">
  Outras Cenas escondidas
</div>