I have created a form and fields are on different Tabs. Here is HTML
<form action="" method="post" name="post">
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container-fluid tab-pane active"><br>
<h3>Gender</h3>
<div class="row">
<input type="radio" name="gender" id="male" value="Male" />
<label for="male"><i class="fas fa-male male"></i></label>
<input type="radio" name="gender" id="female" value="Female" />
<label for="female"><i class="fas fa-female female"></i></label>
</div>
<div class="row">
<a class="btn btn-lg btn-gender" data-toggle="tab" href="#menu1">Continue</a>
</div>
</div>
<div id="menu1" class="container-fluid tab-pane fade"><br>
<h3>Activity</h3>
<input type="radio" name="activity" id="activity1" value="Activity1" />
<label for="activity1">Activity1</label>
<input type="radio" name="activity" id="activity2" value="Activity2" />
<label for="activity2">Activity2</label>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
I am having two problems :
I want to hide circles of radio button so that it only shows label and when user click on label it get selected.
When user click on any radio button, it should be selected and the page get redirected to next tab that is #menu1 automatically with needing to click on Continue button. I tried to use onclick and onchange but its not working for me.
