1

ante todo muchas gracias de antemano.

Lo que estoy tratando de hacer es que tengo 2 botones, cuando pulso uno de ellos me despliega un formulario y cuando le doy al otro despliega el otro formulario hasta ahí bien.

El problema es que cuando pulso al otro botón automáticamente se esconda el contenido del otro botón y muestre el que he pulsado

Tengo creados 2 divs donde están los formularios que quiero abrir según el botón que le de

Este es mi código html:


<html>
<head>
  <script type="text/javascript">
    function mostraroculto1() {
        if (document.getElementById('basico').onclick) {
         document.getElementById('oculto1').style.display = 'block';
        }
        else {
            document.getElementById('oculto1').style.display = 'none';
        }
    }

    function mostraroculto2() {
        if (document.getElementById('detallado').onclick) {
        document.getElementById('oculto2').style.display = 'block';
        }
        else {
        document.getElementById('oculto2').style.display = 'none';
        }
    }

</script>
</head>
<body>

<input class="basico" type="button" name="basico" id="basico" value="BASICO" onclick="mostraroculto1() "/>
<input class="detallado" type="button" name="detallado" id="detallado" value="DETALLADO" onclick="mostraroculto2()"/>



<br>
<br>

  <div id="oculto1" style="display: none;">

    <form action="informebasico.php" method="post" >
        <h2>INFORME BASICO</h2>
        <br>Desde:<input type="date" name="fecha1basico" ><br>
        <br>Hasta:<input type="date" name="fecha2basico"><br>
        <br><input type="submit" value="INFORME PDF">

    </form>

  </div>

  <div id="oculto2" style="display: none;">


        <form action="informedetallado.php" method="post" >
        <h2>INFORME DETALLADO</h2>
        Trabajador <input type="text" name="trabajador"><br>

        <br>Desde:<input type="date" name="fecha1detallado"><input type="time" name="hora1detallado"><br>
        <br>Hasta:<input type="date" name="fecha2detallado"><input type="time" name="hora2detallado"><br>
        <br><input type="submit" value="INFORME PDF">

        </form>

  </div>
</body>
</html>

3 respuestas 3

4

Hice esta modificación, en lugar de poner la condicion else, al momento que hagas click en un boton, se esconda el otro div y viceversa.

<html>
<head>
  <script type="text/javascript">
    function mostraroculto1() {
        if (document.getElementById('basico').onclick) {
         document.getElementById('oculto1').style.display = 'block';
         document.getElementById('oculto2').style.display = 'none';
        }
    }

    function mostraroculto2() {
        if (document.getElementById('detallado').onclick) {
        document.getElementById('oculto2').style.display = 'block';
        document.getElementById('oculto1').style.display = 'none';
        }
    }

</script>
</head>
<body>

<input class="basico" type="button" name="basico" id="basico" value="BASICO" onclick="mostraroculto1() "/>
<input class="detallado" type="button" name="detallado" id="detallado" value="DETALLADO" onclick="mostraroculto2()"/>



<br>
<br>

  <div id="oculto1" style="display: none;">

    <form action="informebasico.php" method="post" >
        <h2>INFORME BASICO</h2>
        <br>Desde:<input type="date" name="fecha1basico" ><br>
        <br>Hasta:<input type="date" name="fecha2basico"><br>
        <br><input type="submit" value="INFORME PDF">

    </form>

  </div>

  <div id="oculto2" style="display: none;">


        <form action="informedetallado.php" method="post" >
        <h2>INFORME DETALLADO</h2>
        Trabajador <input type="text" name="trabajador"><br>

        <br>Desde:<input type="date" name="fecha1detallado"><input type="time" name="hora1detallado"><br>
        <br>Hasta:<input type="date" name="fecha2detallado"><input type="time" name="hora2detallado"><br>
        <br><input type="submit" value="INFORME PDF">

        </form>

  </div>
  
</body>
</html>

1
  • Esto es lo que estaba intentando y creo que entre en un bucle y algo tan sencillo no lo conseguí realizar. Muchísimas gracias por tu ayuda y tomo nota
    – amr07
    el 24 mar. 2020 a las 8:44
2

Puedes probar de esta forma:

  • Creas una clase .hide que lo que hace es que modifica el display a display: none y se lo agregas a cada form
  • Creas una función que remueva la clase .hide de uno y se lo añada al otro. Si utilizas parámetros en la función. No te hace falta escribir 2 funciones que hagan lo mismo.

const formBasico = document.getElementById('oculto1'),
      formDetallado = document.getElementById('oculto2'),
      btnBasico = document.getElementById('basico'),
      btnDetallado = document.getElementById('detallado');

btnBasico.onclick = function() {mostrarYOcultar(formBasico, formDetallado)}

btnDetallado.onclick = function() {mostrarYOcultar(formDetallado, formBasico)}


function mostrarYOcultar(elementoAMostrar, elementoAOcultar) { 
    elementoAOcultar.classList.add('hide');
    elementoAMostrar.classList.remove('hide');
}
.hide {
  display: none;
}
<input class="basico" type="button" name="basico" id="basico" value="BASICO"/>
<input class="detallado" type="button" name="detallado" id="detallado" value="DETALLADO"/>

  <div id="oculto1" class="hide">

    <form action="informebasico.php" method="post" >
        <h2>INFORME BASICO</h2>
        <br>Desde:<input type="date" name="fecha1basico" ><br>
        <br>Hasta:<input type="date" name="fecha2basico"><br>
        <br><input type="submit" value="INFORME PDF">

    </form>

  </div>

  <div id="oculto2" class="hide">


        <form action="informedetallado.php" method="post" >
        <h2>INFORME DETALLADO</h2>
        Trabajador <input type="text" name="trabajador"><br>

        <br>Desde:<input type="date" name="fecha1detallado"><input type="time" name="hora1detallado"><br>
        <br>Hasta:<input type="date" name="fecha2detallado"><input type="time" name="hora2detallado"><br>
        <br><input type="submit" value="INFORME PDF">

        </form>

1
  • Muchísimas gracias por tu respuesta Gabriel! tu respuesta es funcional y me ha servido de gran ayuda y para tener otra forma de hacerlo!
    – amr07
    el 24 mar. 2020 a las 8:45
0

usas bootstrap? prueba agregando/quitando la clase d-none

usas jQuery? prueba el método $.addClass y .removeClass con la clase antes mencionada

3
  • El op muestra usar JS puro
    – user128299
    el 23 mar. 2020 a las 17:50
  • @Aprendiz y por eso no puedo preguntar o sugerir usos? el 23 mar. 2020 a las 18:00
  • No uso bootstrap
    – amr07
    el 23 mar. 2020 a las 18:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.