Display some DIV with input value

Question

Good morning Dear friends, I have a question in the study. I need to be displayed only a few div of the form, I have tried some methods, unsuccessfully.

I save OK,
I choose 1 of the 3 options in the register
Give me the input I need, and save it. But in the edition as I do to appear only the values corresponding to the value of the radio. I can only present all together

try some things like Empty, or maybe I didn’t know how to use a placement for it

function mostra(valor) {
  if (valor == "IF") {
    document.getElementById("IF").style.display = "block";
    document.getElementById("CAD").style.display = "none";
    document.getElementById("DROID").style.display = "none";


  } else if (valor == "CAD") {
    document.getElementById("IF").style.display = "none";
    document.getElementById("CAD").style.display = "block";
    document.getElementById("DROID").style.display = "none";



  } else if (valor == "DROID") {
    document.getElementById("IF").style.display = "none";
    document.getElementById("CAD").style.display = "none";
    document.getElementById("DROID").style.display = "block";

  }



}

function mostra(theId) {
  var theArray = new Array('IF', 'CAD', 'DROID');
  w = document.getElementById(theId)
  if (w.style.display == "block") {
    w.style.display = 'none';
  } else {



    for (i = 0; i < theArray.length; i++) {
      if (theArray[i] == theId) {
        w.style.display = 'block';
      } else {
        document.getElementById(theArray[i]).style.display = 'none';
      }
    }
  }

}

#IF,
#CAD,
#DROID {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body" class="row">
  <label><b>Selecione</b></label>&nbsp;
  <label class="radio-inline">
	<input onclick="mostra('IF')" type="radio" name="tipo" value="IF" >  IF&nbsp;	</label>
  <label class="radio-inline">
	<input onclick="mostra('CAD')" type="radio" name="tipo" value="CAD" > CAD&nbsp;	</label>
  <label class="radio-inline">
	<input onclick="mostra('DROID')" type="radio" name="tipo" value="DROID"> DROID &nbsp;	</label>
  <hr>
</div>
<form method="post" action="#" id="pdvcad">
  <div class="tab-content">
    <div id="IF">
      <div class="col-sm-12">
        <div class="row">
          <div class="col-md-2"><label>ID</label>
            <input type="text" class="form-control" name="idif" id="idif" />
          </div>
          <div class="col-md-3"><label>Tipo:</label>
            <select class="form-control" id="modelo" name="modelo">
							<option id="modelo" value="POS">POS</option>
							<option id="modelo" value="MP">MP</option>
						</select>
          </div>
          
          <div class="col-md-3"><label>Pedido:</label>
            <input type="text" class="form-control" name="pedido2" id="pedido2" />
          </div>
        </div>
      </div>
    </div>
    <div id="CAD">
      <div class="col-sm-12">
        <div class="row">
          <div class="col-md-4"><label>Numero Serie:</label>
            <input type="text" name="nserie" id="nserie" maxlength="11" data-mask="000000000-00" class="form-control showcase sweet" />
          </div>
        </div>
        <div class="row">
          <div class="col-md-4"><label>Versao:</label>
            <input type="date" class="form-control" name="versao" id="versao" value="" />
          </div>
        </div>
      </div>
    </div>
    <div id="DROID">
      <div class="col-sm-12">
      <div class="col-md-3"><label>Usa Cadastro<label>
						<br>
						<input id="cad" type="radio" value="NAO" name="cad" class="radio-template">
						<label for="cad">SIM</label>
            <input id="cad" type="radio" checked="" value="SIM" name="cad" class="radio-template">
            <label for="cad">NÃO</label>
          </div>
        <div class="col-md-5"><label>Licença:</label>
          <input type="text" class="form-control" name="lic" id="lic" />
        </div>
        <div class="col-md-3"><label>Expira:</label>
          <input type="text" class="form-control" name="vencto" id="vencto" readonly />
        </div>
      </div>
    </div>
  </div>

PS: When identifying the select value show only the values that have been filled in, without needing a select As in the Example
I tried with some explanations but it made things worse

I appreciate help

Answer 1

You’ve loaded Jquery and are using pure Javascript, why?

You could use Jquery and do something like:

<div id="nome">
    <input type="text" name="nome"  placeholder="Nome">
</div>
<div id="telefone">
    <input type="phone" name="telefone" placeholder="Telefone">
</div>
<!-- Botoes -->
<button value="nome">Mostrar somente nome</button>
<br>
<button value="telefone">Mostrar somente telefone</button>
<br>
<button value="all">Mostrar todos</button>

Jquery

$('button').on('click', function(){
    if($(this).val() === 'nome'){
        $('#telefone').hide();
        $('#nome').show();
    } else if($(this).val() == 'telefone'){
        $('#telefone').show();
        $('#nome').hide();
    } else {
        $('#telefone, #nome').show();
    }
});

Jquery’s . Hide() function hides an element; the . show() function shows the element.

Do you understand? No?! I’ll explain.

Suppose you have a list and that in this list you have a delete button and another to edit. When you click delete, use Javascript/Jquery to get the value of the button indicating an action, then show a modal asking if the user is sure to delete the record from the list.

Similarly, if you click edit, use Javascript/Jquery to take the value of the edit button and take the user to the form with the fields that can be edited.

Jsfiddle of the example