Onselect / Javascript event

Asked

Viewed 148 times

0

I’m trying to make that when the user selects the select source id, and is the selection "Client" the div id "cli" to receive display:block.

For that I made a test, of when to trigger the event onchange of the source id, give a toogle in the div of id cli, showing or hiding.

How do I stop when the select selected with value "Client" make appear, and if it is not, make hide.

Code:

<div class="col-md-4" >
    <div class="form-group">
        <label class="formLabel" for="origem">Origem</label>
        <select name="origem" id="origem" class="form-control formSelect" onchange="origem()" required>
            <option value=""></option>
            <option value="Cellsystem">Cellsystem</option>
            <option value="Santosfilho">Santosfilho</option>
            <option value="Cliente">Cliente</option>
            <option value="Licitacao">Licitação</option>
            <option value="Leilao">Leilão</option>
            <option value="Mercado Livre">Mercado Livre</option>
        </select>
    </div>
    <div class="form-group">
        <label class="formLabel" for="prioridade">Prioridade</label>
        <select name="prioridade" id="prioridade" class="form-control formSelect" required>
            <option value="baixa">Baixa</option>
            <option value="media" selected>Normal</option>
            <option value="alta">Alta</option>
        </select>
    </div>
</div>
<div class="col-md-4">
    <div class="col-md-12 cli" id="cli">
        <div class="form-group">
            <label style="width:50%;text-align:left;font-weight:normal;color:#FF5C5C;" class="formLabel" for="nfvenda">NF</label>
            <label style="width:50%;text-align:center;font-weight:normal;color:#FF5C5C;" class="formLabel" for="datanfvenda">Data de emissão</label>
            <input style="width:49%;" type="text" class="form-control formInputFL" name="nfvenda" id="nfvenda" >
            <input style="width:49%;" type="text" class="form-control formInputFR" name="datanfvenda" id="datanfvenda" >
        </div>
        <div style="clear:both;height:10px;"></div>
        <div class="form-group">
            <label style="font-weight:normal;color:#FF5C5C;" class="formLabel" for="danfe">DANFE</label>
            <input type="text" class="form-control formInput" name="danfe" id="danfe" >
        </div>
        <div class="form-group">
            <label style="color:#FF5C5C;" class="formLabel" for="cliente">Quem é o Cliente ? </label>
            <input type="text" class="form-control formInput" name="cliente" id="cliente" >
        </div>
    </div>
</div>

Follow the Javascript:

function origem() {
    $( "#cli" ).slideToggle("fast", function() {});
}
javascript jquery

1 answer

1


Good, me would not use the JQuery to make this check, to do what just use the event onchange and work as follows:

function origem(valor){
  if(valor == "Cliente"){
    document.getElementById("cli").style.display = "";
  }else{
    document.getElementById("cli").style.display = "none";
    
  }
  
}
<div class="col-md-4" >
  <div class="form-group">
    <label class="formLabel" for="origem">Origem</label>
    <select name="origem" id="origem" class="form-control formSelect" onchange="origem(this.value)" required>
      <option value=""></option>
      <option value="Cellsystem">Cellsystem</option>
      <option value="Santosfilho">Santosfilho</option>
      <option value="Cliente">Cliente</option>
      <option value="Licitacao">Licitação</option>
      <option value="Leilao">Leilão</option>
      <option value="Mercado_Livre">Mercado Livre</option>
    </select>
  </div>
  <div class="form-group">
    <label class="formLabel" for="prioridade">Prioridade</label>
    <select name="prioridade" id="prioridade" class="form-control formSelect" required>
      <option value="baixa">Baixa</option>
      <option value="media" selected>Normal</option>
      <option value="alta">Alta</option>
    </select>
  </div>
</div>
<div class="col-md-4">
  <div class="col-md-12 cli" id="cli">
    <div class="form-group">
      <label style="width:50%;text-align:left;font-weight:normal;color:#FF5C5C;" class="formLabel" for="nfvenda">NF</label>
      <label style="width:50%;text-align:center;font-weight:normal;color:#FF5C5C;" class="formLabel" for="datanfvenda">Data de emissão</label>
      <input style="width:49%;" type="text" class="form-control formInputFL" name="nfvenda" id="nfvenda" >
      <input style="width:49%;" type="text" class="form-control formInputFR" name="datanfvenda" id="datanfvenda" >
    </div>
    <div style="clear:both;height:10px;"></div>
    <div class="form-group">
      <label style="font-weight:normal;color:#FF5C5C;" class="formLabel" for="danfe">DANFE</label>
      <input type="text" class="form-control formInput" name="danfe" id="danfe" >
    </div>
    <div class="form-group">
      <label style="color:#FF5C5C;" class="formLabel" for="cliente">Quem é o Cliente ? </label>
      <input type="text" class="form-control formInput" name="cliente" id="cliente" >
    </div>
  </div>
</div>

  • Thank you! It worked on a separate file your code, and here in the Stackoverflow test, but in the code I’m using it not, so I’m going to cut out my code and see what’s going on, but that’s what I was needing.

  • @Andrésilveiramachado appears some error in the console?

  • Got it, changed the function name to origemchange(), do not know what it was, had nothing repeated, some cache bug I think, but now it worked out worth!!

Browser other questions tagged javascript jquery

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