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".
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.