I have a user register page in my web and i need to switch form details by radio when user select it
Like this
<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>Can i do with only using html,js and css
Yes, You Can Do it with using only js, css and html
Try this code
Update ( 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>Maybe the simplest way is:
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>