0

estoy intentando hacer esto de varías formas pero no logro obtener el resultado que necesito.

Tengo un formulario en 2 partes, uno con el atributo display NONE y otro con display BLOCK, en el primer formulario (display: BLOCK) tengo un SELECT que pregunta por el "estado" del trabajador que se quiere registrar, si la opción es "jubilado" o "proceso jubilación" el formulario no debe modificarse y al terminar de llenar los campos agregues al trabajador con el botón "AGREGAR".

Pregunta

Ahora, donde he tenido problemas es como validar las OPTION con JavaScript para que, si la opción seleccionada no es "jubilado" o "proceso jubilación", sino "Activo" el botón "AGREGAR" cambié su atributo de visible a hidden y en su lugar lo reemplace otro botón que se encuentra en hidden que continuará con la siguiente parte del formulario.

<label> Estado del Trabajador:
     <div class="slct">
            <select name="Estado" id="estadotrab" required>
                <option value="0" disabled selected>...</option>
                <option value="1">Activo</option>
                <option value="2">Jubilado</option>
                <option value="3">Proceso Jubilación</option>
                <option value="4">Discapacidad</option>
                <option value="5">otro</option>
            </select>
     </div>
</label>

<input type="reset" value="Vaciar Datos" class="button" id="vaciar-datos">
<input type="submit" value="Agregar" class="buttonA" id="btnAgregar">
<input type="button" value="Siguiente" class="buttonS" id="btnSiguiente">

Quiero aclarar que el botón "SIGUIENTE" funciona como debe y cambia el atribulo del Formulario 1 BLOCK a NONE y del formulario 2 de NONE A BLOCK, pero el cambio de botón "AGREGAR" por "SIGUIENTE" cuando seleccionas una opción del SELECT es lo que no logro hacer. ¿Alguien podría ayudarme? De antemano muchas gracias.

2 respuestas 2

0

Creo que te refieres a algo asi
//Esta se ejecuta cada ves que se cambia una opción del select

 document.getElementById('estadotrab').addEventListener('change', function() {
          if(this.value==='Activo') //si la opcion seleccionada es activo
            {
            document.getElementById('btnAgregar').hide(); //oculta el boton agregar
            document.getElementById('btnSiguiente').show();//muestra el boton siguiente
            }
            else // en caso contrario, que sea jubilado etc
            {
            document.getElementById('btnAgregar').show(); //muestra el boton agregar
            document.getElementById('btnSiguiente').hide(); //oculta el boton siguiente
            }
        });
0
    <label> Estado del Trabajador:
        <div class="slct">
            <select onchange="cambioopcion(this.value)" name="Estado" id="estadotrab" required>
                <option value="0" disabled selected>...</option>
                <option value="1">Activo</option>
                <option value="2">Jubilado</option>
                <option value="3">Proceso Jubilación</option>
                <option value="4">Discapacidad</option>
                <option value="5">otro</option>
            </select>
        </div>
    </label>

    <input type="reset" value="Vaciar Datos" class="button" id="vaciar-datos">
    <input type="submit" value="Agregar" class="buttonA" id="btnAgregar">
    <input type="button" value="Siguiente" class="buttonS" id="btnSiguiente">

    <script>
    function cambioopcion(valor){
       if(valor==1){
          document.getElementById('btnAgregar').hide(); 
          document.getElementById('btnSiguiente').show();
       }else{
          document.getElementById('btnAgregar').show(); 
          document.getElementById('btnSiguiente').hide(); 
      }
    }
    </script>

Se agrega al input tipo SELECT el evento ONCHANGE, esta se acciona cunado hay un cambio de selección del mismo, se crea y se adjunta en el evento "ONCHANGE" una función de JAVASCRIPT llamada CAMBIOOPCION, esta será la encargada de hacer el procedimiento que se requiere

0

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.