Show and hide a div according to the value in a textbox?

Question

Show and hide a div according to the value in a textbox?

Navigation

#1 by (0 votes)

1

My problem is the following I select a value in a combobox and it fills a textbox all right up there, but when I want to use the value of the textbox to hide a div I can not, could you help me this is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin título</title>



<script type="text/javascript">
    function showContent() {
       // element = document.getElementById("content");

        if (showId="Empleado") {
            element.style.display='block';
        }
        else {
            element.style.display='none';
        }
    }
    function cambioOpciones()

        {

            document.getElementById('showId').value=document.getElementById('opciones').value;

        }
</script>

          <?php
    require ('conexion.php');


        $query2 = "SELECT idpuestos, puesto, tipo FROM puestos ORDER BY puesto";
    $resultado2=$mysqli->query($query2);


?>
<label for="puesto" style="margin-left:2%;" >Puesto:</label> <select id='opciones' name="opciones" onchange='cambioOpciones();'>
<option value=" "> </option>
    <?php while($row2 = $resultado2->fetch_assoc()) { ?>
        <option value='<?php echo $row2['tipo']; ?>'><?php echo $row2['puesto']; ?></option>
<?php } ?>

    </select>

    <!-- input donde se mostrara el id de la opción -->

<input type="text"  name="showId"  id='showId' value="" onchange="javascript:showContent()" />

<div id="content" style="display: none;">
  <label for="ib" style="margin-left:8%;" >NSS*:</label> 
<input type="text" name="nss" id="nss" value=" " autocomplete="off" required  />

<!--   ///si no es necesario debe estar oculto en caso de ser cobrador asesor y gestor de cobranza  --->
<label for="cb" style="margin-left:2%;" >Cuenta Bancaria*:</label> 
<input type="text" name="cb" id="cb" value=" " autocomplete="off" required  />

<label for="ib" style="margin-left:2%;" >institucion Bancaria*:</label> 
<input type="text" name="ib" id="ib" value=" " autocomplete="off" required  />
 </div>
  </body>
</html>

javascript html php

asked by Fernando Castillo Arteaga 10.09.2018 в 19:37

source

1 answer

Call Controller with parameters from radio button click event Count and modify the elements of a queue

score 0 · Answer 1

You do not need two functions, you can do everything in the same function. Also when you check conditions with if you need to use == to compare. Something like this:

function cambioOpciones()
{ 
    var element = document.getElementById('content');
    var showId = document.getElementById('opciones').value;
    document.getElementById('showId').value = showId;
    if (showId=="Empleado") {
        element.style.display='block';
    }
    else {
        element.style.display='none';
    }

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin título</title>
         
<label for="puesto" style="margin-left:2%;" >Puesto:</label> 
<select id='opciones' name="opciones" onchange='cambioOpciones();'>
        <option value=" "> </option>        
        <option value='Empleado'>puesto1</option>
        <option value='tipo2'>puesto2</option>

    </select>

    <!-- input donde se mostrara el id de la opción -->

<input type="text"  name="showId"  id='showId' value="" />

<div id="content" style="display: none;">
  <label for="ib" style="margin-left:8%;" >NSS*:</label> 
<input type="text" name="nss" id="nss" value=" " autocomplete="off" required  />

<!--   ///si no es necesario debe estar oculto en caso de ser cobrador asesor y gestor de cobranza  --->
<label for="cb" style="margin-left:2%;" >Cuenta Bancaria*:</label> 
<input type="text" name="cb" id="cb" value=" " autocomplete="off" required  />

<label for="ib" style="margin-left:2%;" >institucion Bancaria*:</label> 
<input type="text" name="ib" id="ib" value=" " autocomplete="off" required  />
 </div>
  </body>
</html>