Tengo una página de registro de usuario en mi web y necesito cambiar los detalles del formulario por radio cuando el usuario lo selecciona
Como esto
<form> <label>1: <input type=radio name="userType" value="1"/></label> <br> <label>2: <input type=radio name="userType" value="2"/></label> <br> <label>3: <input type=radio name="userType" value="3"/></label> <br> <div class="tab-1"><input placeholder="UserType 1 Input"></div> <div class="tab-2"><input placeholder="UserType 2 Input"></div> <div class="tab-3"><input placeholder="UserType 3 Input"></div> </form> ¿Puedo hacerlo con solo usar html , js y css
Sí, puedes hacerlo usando solo js , css y html
Prueba este código
Actualizar ( 1 )
const tabs = document.querySelectorAll(".tab"); const radio = document.querySelectorAll(".toggleTab"); const inputs = document.querySelectorAll(".tab input"); for(var x=0; x < radio.length; x++){ radio[x].addEventListener("change", function(){ for(var y = 0; y < inputs.length; y++){ inputs[y].value = ""; } for(var i=0; i < tabs.length; i++){ tabs[i].classList.add("d-none"); if(this.checked && tabs[i].getAttribute("tabname") == this.value){ tabs[i].classList.remove("d-none") } } }); } .d-none{ display:none; } <form> <label>1: <input type=radio class="toggleTab" name="userType" value="1" checked></label> <br> <label>2: <input type=radio class="toggleTab" name="userType" value="2"/></label> <br> <label>3: <input type=radio class="toggleTab" name="userType" value="3"/></label> <br> <div class="tab" tabname=1> <input placeholder="UserType 1 Input"> </div> <div class="tab d-none" tabname=2> <input placeholder="UserType 2 Input"> </div> <div class="tab d-none" tabname=3> <input placeholder="UserType 3 Input"> </div> </form>Tal vez la forma más sencilla es:
document.addEventListener('DOMContentLoaded', () => { const form = document.querySelector('form'); const tabs = form.querySelectorAll('.tab'); form.addEventListener('change', ({target}) => { if (target.name !== 'userType') return; const tabToShow = form .querySelector(`.tab-${target.value}`); tabs.forEach(tab => { const tabInput = tab.querySelector('input'); tabInput.value = ''; tab.classList.add('hidden'); }); tabToShow.classList.remove('hidden'); }) }); .hidden { display: none; } <form> <label>1: <input checked type=radio name="userType" value="1"/></label> <br> <label>2: <input type=radio name="userType" value="2"/></label> <br> <label>3: <input type=radio name="userType" value="3"/></label> <br> <div class="tab tab-1"><input placeholder="UserType 1 Input"></div> <div class="tab tab-2 hidden"><input placeholder="UserType 2 Input"></div> <div class="tab tab-3 hidden"><input placeholder="UserType 3 Input"></div> </form>