Make objects appear

Question

Make objects appear

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

-1

I'm having a hard time making a checkbox appear or disappear depending on the option selected. I do not understand virtually anything from Javascript at the moment.

My example:

I want to make a text box appear when the "Other" option is enabled, so that the user can tell the situation and a check box when the "Machine" option is selected with the machine options. If neither is selected, it will not show anything. I hope someone can help me. Thank you in advance.

<select name="tipobroblema" id="tipoproblema">
    <option value="">- Tipo Problema -</option>
    <option value="maquina">Maquina</option>
    <option value="vazamento">Banheiro</option>
    <option value="arcondicionado">Ar Condicionado</option>
    <option value="outro">Outro</option>
</select>

javascript html html5 css

asked by anonymous 21.05.2018 / 21:20

3 answers

1

HTML:

    <select name="tipobroblema" id="tipoproblema">
        <option value="">- Tipo Problema -</option>
        <option value="maquina">Maquina</option>
        <option value="vazamento">Banheiro</option>
        <option value="arcondicionado">Ar Condicionado</option>
       <option value="outro">Outro</option>
     </select>

     <div id="maquina">Maquina: <input type="text" name="maquina" /></div>
     <div id="outro" style="display:none;">Outro: <input type="text" name="outro" /></div>

Javascript

$(function() {

  var maquina = $('#maquina');
  var outro = $('#outro');
  var tipoproblema = $('#tipoproblema');

  maquina.hide();
  outro.hide();

  tipoproblema.on("change", function() {
    maquina.hide();
    outro.hide();

    if(this.value == 'maquina') {
         maquina.show();
      } else if(this.value == 'outro') {
          outro.show();
      }
  });
});

If you do not have jquery added to your HTML, add it like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Seeitworking: link

21.05.2018 / 21:49

0

I'll show you a simple example, for you to base and assemble your code, basically you need to get the chosen value and check and show the input you want

$('#tipoproblema').change(function(){
    if(this.value == 'maquina') {
        $('#divMaquina').css('display', '');
        $('#divOutro').css('display', 'none');
    } else if(this.value == 'outro') {
        $('#divMaquina').css('display', 'none');
        $('#divOutro').css('display', '');          
    } else {
        $('#divMaquina').css('display', 'none');
        $('#divOutro').css('display', 'none');
    }
});

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 
<select name="tipobroblema" id="tipoproblema">
    <option value="">- Tipo Problema -</option>
    <option value="maquina">Maquina</option>
    <option value="vazamento">Banheiro</option>
    <option value="arcondicionado">Ar Condicionado</option>
   <option value="outro">Outro</option>
 </select>
<div id="divMaquina" style="display:none;">Maquina: <input type="text" name="maquina" /></div>
<div id="divOutro" style="display:none;">Outro: <input type="text" name="outro" /></div>

warns it worked out

21.05.2018 / 21:34

Login with validation does not work Do SQL query in 3 tables and return the value to another table? [closed]

score 0 · Accepted Answer

Pure Javascript - no libraries, no jquery.

function myFunction() {
    var x = document.getElementById("mySelect");

    var z = x.options[x.selectedIndex].value;
    
    if (z == "outro") {
    hiddenDiv1.style.display='inline-block';
    } 
    else{
    hiddenDiv1.style.display='none';
    }
    
    if (z == "maquina") {
    hiddenDiv2.style.display='inline-block';
    } 
    else{
    hiddenDiv2.style.display='none';
    }
       
}

#hiddenDiv1,#hiddenDiv2  {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari e Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari e Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


/* Efeito Place Holder CSS no input */
::-webkit-input-placeholder {
  color: #000;
  opacity: 0.5;
  -webkit-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:-moz-placeholder {
  color: #000;
  opacity: 0.5;
  -moz-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
::-moz-placeholder {
  color: #000;
  opacity: 0.5;
  -moz-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:-ms-input-placeholder {  
  color: #000;
  opacity: 0.5;
  -ms-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}

/* Place Holder CSS for Focus */
:hover::-webkit-input-placeholder {
  opacity: 0.75;
  -webkit-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:hover:-moz-placeholder {
  opacity: 0.75;
  -moz-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:hover::-moz-placeholder {
  opacity: 0.75;
  -moz-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:hover:-ms-input-placeholder {  
  opacity: 0.75;
  -ms-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}

/* Place Holder CSS for Focus */
:focus::-webkit-input-placeholder {
  opacity: 0;
  -webkit-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:focus:-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:focus::-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:focus:-ms-input-placeholder {  
  opacity: 0;
  -ms-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}

<select id="mySelect" onchange="myFunction()">
    <option value="">- Tipo Problema -</option>
    <option value="maquina">Maquina</option>
    <option value="vazamento">Banheiro</option>
    <option value="arcondicionado">Ar Condicionado</option>
    <option value="outro">Outro</option>
</select>

<div id="hiddenDiv1" style="display:none">
<input type="text" placeholder="Descreva o problema">
</div>

<div id="hiddenDiv2" style="display:none">
<select class="form-control select" name="estado">
    <option value="">Selecione</option>
    <option value="1">Maquina 1</option>
    <option value="2">Maquina 2</option>
    <option value="3">Maquina 3</option>
    <option value="4">Maquina 4</option>
</select>
</div>

Discovering the selected value

The variable x has the combobox, so we can access some properties such as selectedIndex that contains an integer value with the index of the option item selected.

Explaining better, each option tag has an index, in its example we have the following:

índice  option
  0     <option value="">- Tipo Problema -</option>
  1     <option value="maquina">Maquina</option>
  2     <option value="vazamento">Banheiro</option>
  3     <option value="arcondicionado">Ar Condicionado</option>
  4     <option value="outro">Outro</option>

When the user clicks on a combobox option, the following code will show the chosen index:

x.selectedIndex

Each option has at least 2 interesting properties: text and value :

1 - text is the "label", the text between the tags <options></options> .

 x.options[x.selectedIndex].text;

2 - value is the "key" value of the value property.

 x.options[x.selectedIndex].value;

Another way

If you want to apply the effects of the above example just apply the CSS

 function show(aval) {
    if (aval == "outro") {
    hiddenDiv1.style.display='inline-block';
    } 
    else{
    hiddenDiv1.style.display='none';
    }
    
    if (aval == "maquina") {
    hiddenDiv2.style.display='inline-block';
    } 
    else{
    hiddenDiv2.style.display='none';
    }
    
}

<select onchange="java_script_:show(this.options[this.selectedIndex].value)">
    <option value="">- Tipo Problema -</option>
    <option value="maquina">Maquina</option>
    <option value="vazamento">Banheiro</option>
    <option value="arcondicionado">Ar Condicionado</option>
    <option value="outro">Outro</option>
</select>
</div>

<div id="hiddenDiv1" style="display:none">
<input type="text" placeholder="Descreva o problema">
</div>

<div id="hiddenDiv2" style="display:none">
<select class="form-control select" name="estado">
    <option value="">Selecione</option>
    <option value="1">Maquina 1</option>
    <option value="2">Maquina 2</option>
    <option value="3">Maquina 3</option>
    <option value="4">Maquina 4</option>
</select>
</div>