Mixing
Picking two radio buttons to show/hide divs using JavaScript
2
I have two radio button categories that are broken down into showing/hiding different input fields. I'm inching closer to getting it but can't seem to figure it out completely.
Here are the images below:
Selecting 'Single user' and 'Live Session' works perfectly.
Selecting 'Single user' and 'Remote Session' works perfectly.
Selecting 'Team' and 'Live session' works perfectly.
When selecting 'Team' and 'Remote session' - When a user clicks on both 'Team' + 'Remote Session' radio buttons at the same time, I want to be able to hide the divs (.total, .one, .two, .three, .four, .five ---> .ten). So basically all the input boxes below 'Requester Name' and 'Team Name'.
Here is the code that I currently have:
$(document).ready(function () {
$('input[name=requestType]').click(function() {
if(this.value == 'Team')
{
$(".total").show();
$(".teamname").show();
$(".one").show();
$(".two").show();
$(".three").show();
$(".four").show();
$(".five").show();
}
else
{
$(".teams").hide();
}
});
$("input[name=sessionType]").change(function(){
});
$("#totalUsers").change(function() {
$('.six').hide();
$('.seven').hide();
$('.eight').hide();
$('.nine').hide();
$('.ten').hide();
var selectValue = $(this).val();
switch (selectValue) {
case "six":
$('.five').show();
$('.six').show();
break;
case "seven":
$('.five').show();
$('.six').show();
$('.seven').show();
break;
case "eight":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
break;
case "nine":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
$('.nine').show();
break;
case "ten":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
$('.nine').show();
$('.ten').show();
break;
}
});
$("#submit").click(function (){
if($("#submit").hasClass("disabled")) {
alert('Validation Failed');
}
else {
AddListItem();
return false;
}
});
});
function getItem() {
var item = {
Title: $("#requesterName").val(),
TeamName: $("#teamName").val(),
NumberOfAttendees: $("#totalUsers").val(),
FirstName: $("#oneUser").val(),
SecondName: $("#twoUsers").val(),
ThirdName: $("#threeUsers").val(),
FourthName: $("#fourUsers").val(),
FifthName: $("#fiveUsers").val(),
SixthName: $("#sixUsers").val(),
SeventhName: $("#sevenUsers").val(),
EighthName: $("#eightUsers").val(),
NinthName: $("#nineUsers").val(),
TenthName: $("#tenUsers").val(),
RequestType: $("input[name=requestType]:checked").val(),
SessionType: $("input[name=sessionType]:checked").val(),
};
return item;
}
function AddListItem(resources) {
var item = getItem();
if (item.RequestType == "Single User") {
item.NumberOfAttendees = 'None';
}
$pnp.setup({
baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training/"
});
$pnp.sp.web.lists.getByTitle("Training").items.add(item).then(function(r){
$("#submit").hide();
$(".form").hide();
$(".icon").hide();
$("#header").hide();
$("#DeltaPlaceHolderPageTitleInTitleArea").hide();
$("#hidden_div").show();
$("#cancel").hide();
});
}#submit
{
border-radius: 4px!important;
}
.ext
{
display: none;
}
#DeltaPlaceHolderPageTitleInTitleArea {
font-size: 3rem;
}
.one, .two, .three, .four, .five, .six, .seven,
.eight, .nine, .ten {
margin-bottom: 3px!important;
}
.form-group {
margin-bottom: 5px;
width: 450px;
}
.form {
padding-top: 15px;
padding-left: 0px;
padding-right: 0px;
}
#hidden_div {
padding-top: 30px;
text-align: center;
}
h2 {
font-size: 2rem!important;
}
.icon {
float: left;
margin-right: 25px;
width: 150px;
height: 140px;
}
.teams
{
display: none;
}<form id="form">
<div class="container form">
<div class="form-group row">
<label for="requestType" class="col-form-label">Request Type:</label>
<label for="singleUser" class="radio-inline"><input id="singleUser" type="radio" name="requestType" value="Single User" checked>Single User</label>
<label for="teamSelection" class="radio-inline"><input id="teamSelection" type="radio" name="requestType" value="Team">Team</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<label for="sessionType" class="col-form-label">Session Type:</label>
<label for="liveSession" class="radio-inline"><input id="liveSession" type="radio" name="sessionType" value="Live Session" checked>Live Session</label>
<label for="remoteSession" class="radio-inline"><input id="remoteSession" type="radio" name="sessionType" value="Remote Session">Remote Session</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<label for="requesterName" class="col-form-label">Requester Name:</label>
<input class="form-control" name="requesterName" type="text" id="requesterName" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: Jane Doe" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row teamname teams">
<label for="teamName" class="col-form-label">Team Name:</label>
<input class="form-control" name="teamName" type="text" id="teamName" data-minlength="2" data-error="Please enter a valid team name." placeholder="Ex: PortalHelp Team" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row teams total">
<label for="totalUsers" class="col-form-label">Number of Attendees:</label>
<select class="form-control" id="totalUsers">
<option value="Five" selected>5</option>
<option value="Six">6</option>
<option value="Seven">7</option>
<option value="Eight">8</option>
<option value="Nine">9</option>
<option value="Ten">10</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row one teams">
<label for="oneUser" class="col-form-label">Names of Attendees:</label>
<input class="form-control" name="oneUser" type="text" id="oneUser" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: John Smith" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row two teams">
<input class="form-control" name="twoUsers" type="text" id="twoUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row three teams">
<input class="form-control" name="threeUsers" type="text" id="threeUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row four teams">
<input class="form-control" name="fourUsers" type="text" id="fourUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row five teams">
<input class="form-control" name="fiveUsers" type="text" id="fiveUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row six teams teams1">
<input class="form-control" name="sixUsers" type="text" id="sixUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row seven teams teams1">
<input class="form-control" name="sevenUsers" type="text" id="sevenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row eight teams teams1">
<input class="form-control" name="eightUsers" type="text" id="eightUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row nine teams teams1">
<input class="form-control" name="nineUsers" type="text" id="nineUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row ten teams teams1">
<input class="form-control" name="tenUsers" type="text" id="tenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<button type="button" name="singlebutton" class="btn btn-success" id="submit">Submit</button>
<button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='/TrainingResourceCenter/O365Training/Pages/Training.aspx'">Cancel</button>
</div>
</div>
</form>javascript jquery html twitter-bootstrap bootstrap-4
edited Nov 20 '18 at 22:33
halfer
14.5k758111
asked Sep 19 '18 at 20:24
Semir314Semir314
38712
add a comment |
2
I have two radio button categories that are broken down into showing/hiding different input fields. I'm inching closer to getting it but can't seem to figure it out completely.
Here are the images below:
Selecting 'Single user' and 'Live Session' works perfectly.
Selecting 'Single user' and 'Remote Session' works perfectly.
Selecting 'Team' and 'Live session' works perfectly.
When selecting 'Team' and 'Remote session' - When a user clicks on both 'Team' + 'Remote Session' radio buttons at the same time, I want to be able to hide the divs (.total, .one, .two, .three, .four, .five ---> .ten). So basically all the input boxes below 'Requester Name' and 'Team Name'.
Here is the code that I currently have:
$(document).ready(function () {
$('input[name=requestType]').click(function() {
if(this.value == 'Team')
{
$(".total").show();
$(".teamname").show();
$(".one").show();
$(".two").show();
$(".three").show();
$(".four").show();
$(".five").show();
}
else
{
$(".teams").hide();
}
});
$("input[name=sessionType]").change(function(){
});
$("#totalUsers").change(function() {
$('.six').hide();
$('.seven').hide();
$('.eight').hide();
$('.nine').hide();
$('.ten').hide();
var selectValue = $(this).val();
switch (selectValue) {
case "six":
$('.five').show();
$('.six').show();
break;
case "seven":
$('.five').show();
$('.six').show();
$('.seven').show();
break;
case "eight":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
break;
case "nine":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
$('.nine').show();
break;
case "ten":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
$('.nine').show();
$('.ten').show();
break;
}
});
$("#submit").click(function (){
if($("#submit").hasClass("disabled")) {
alert('Validation Failed');
}
else {
AddListItem();
return false;
}
});
});
function getItem() {
var item = {
Title: $("#requesterName").val(),
TeamName: $("#teamName").val(),
NumberOfAttendees: $("#totalUsers").val(),
FirstName: $("#oneUser").val(),
SecondName: $("#twoUsers").val(),
ThirdName: $("#threeUsers").val(),
FourthName: $("#fourUsers").val(),
FifthName: $("#fiveUsers").val(),
SixthName: $("#sixUsers").val(),
SeventhName: $("#sevenUsers").val(),
EighthName: $("#eightUsers").val(),
NinthName: $("#nineUsers").val(),
TenthName: $("#tenUsers").val(),
RequestType: $("input[name=requestType]:checked").val(),
SessionType: $("input[name=sessionType]:checked").val(),
};
return item;
}
function AddListItem(resources) {
var item = getItem();
if (item.RequestType == "Single User") {
item.NumberOfAttendees = 'None';
}
$pnp.setup({
baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training/"
});
$pnp.sp.web.lists.getByTitle("Training").items.add(item).then(function(r){
$("#submit").hide();
$(".form").hide();
$(".icon").hide();
$("#header").hide();
$("#DeltaPlaceHolderPageTitleInTitleArea").hide();
$("#hidden_div").show();
$("#cancel").hide();
});
}#submit
{
border-radius: 4px!important;
}
.ext
{
display: none;
}
#DeltaPlaceHolderPageTitleInTitleArea {
font-size: 3rem;
}
.one, .two, .three, .four, .five, .six, .seven,
.eight, .nine, .ten {
margin-bottom: 3px!important;
}
.form-group {
margin-bottom: 5px;
width: 450px;
}
.form {
padding-top: 15px;
padding-left: 0px;
padding-right: 0px;
}
#hidden_div {
padding-top: 30px;
text-align: center;
}
h2 {
font-size: 2rem!important;
}
.icon {
float: left;
margin-right: 25px;
width: 150px;
height: 140px;
}
.teams
{
display: none;
}<form id="form">
<div class="container form">
<div class="form-group row">
<label for="requestType" class="col-form-label">Request Type:</label>
<label for="singleUser" class="radio-inline"><input id="singleUser" type="radio" name="requestType" value="Single User" checked>Single User</label>
<label for="teamSelection" class="radio-inline"><input id="teamSelection" type="radio" name="requestType" value="Team">Team</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<label for="sessionType" class="col-form-label">Session Type:</label>
<label for="liveSession" class="radio-inline"><input id="liveSession" type="radio" name="sessionType" value="Live Session" checked>Live Session</label>
<label for="remoteSession" class="radio-inline"><input id="remoteSession" type="radio" name="sessionType" value="Remote Session">Remote Session</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<label for="requesterName" class="col-form-label">Requester Name:</label>
<input class="form-control" name="requesterName" type="text" id="requesterName" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: Jane Doe" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row teamname teams">
<label for="teamName" class="col-form-label">Team Name:</label>
<input class="form-control" name="teamName" type="text" id="teamName" data-minlength="2" data-error="Please enter a valid team name." placeholder="Ex: PortalHelp Team" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row teams total">
<label for="totalUsers" class="col-form-label">Number of Attendees:</label>
<select class="form-control" id="totalUsers">
<option value="Five" selected>5</option>
<option value="Six">6</option>
<option value="Seven">7</option>
<option value="Eight">8</option>
<option value="Nine">9</option>
<option value="Ten">10</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row one teams">
<label for="oneUser" class="col-form-label">Names of Attendees:</label>
<input class="form-control" name="oneUser" type="text" id="oneUser" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: John Smith" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row two teams">
<input class="form-control" name="twoUsers" type="text" id="twoUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row three teams">
<input class="form-control" name="threeUsers" type="text" id="threeUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row four teams">
<input class="form-control" name="fourUsers" type="text" id="fourUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row five teams">
<input class="form-control" name="fiveUsers" type="text" id="fiveUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row six teams teams1">
<input class="form-control" name="sixUsers" type="text" id="sixUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row seven teams teams1">
<input class="form-control" name="sevenUsers" type="text" id="sevenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row eight teams teams1">
<input class="form-control" name="eightUsers" type="text" id="eightUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row nine teams teams1">
<input class="form-control" name="nineUsers" type="text" id="nineUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row ten teams teams1">
<input class="form-control" name="tenUsers" type="text" id="tenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<button type="button" name="singlebutton" class="btn btn-success" id="submit">Submit</button>
<button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='/TrainingResourceCenter/O365Training/Pages/Training.aspx'">Cancel</button>
</div>
</div>
</form>javascript jquery html twitter-bootstrap bootstrap-4
edited Nov 20 '18 at 22:33
halfer
14.5k758111
asked Sep 19 '18 at 20:24
Semir314Semir314
38712
1
What's the question/issue here?
– dustytrash
Sep 19 '18 at 20:28
Hi @dustytrash, When a user clicks on both 'Team' + 'Remote Session' radio buttons at the same time, I want to be able to hide the divs (.total, .one, .two, .three, .four, .five ---> .ten). So basically all the input boxes that you see under 'Requester Name' and 'Team Name'.
– Semir314
Sep 19 '18 at 20:31
I've updated the last picture.
– Semir314
Sep 19 '18 at 20:36
add a comment |
2
2
2
I have two radio button categories that are broken down into showing/hiding different input fields. I'm inching closer to getting it but can't seem to figure it out completely.
Here are the images below:
Selecting 'Single user' and 'Live Session' works perfectly.
Selecting 'Single user' and 'Remote Session' works perfectly.
Selecting 'Team' and 'Live session' works perfectly.
When selecting 'Team' and 'Remote session' - When a user clicks on both 'Team' + 'Remote Session' radio buttons at the same time, I want to be able to hide the divs (.total, .one, .two, .three, .four, .five ---> .ten). So basically all the input boxes below 'Requester Name' and 'Team Name'.
Here is the code that I currently have:
$(document).ready(function () {
$('input[name=requestType]').click(function() {
if(this.value == 'Team')
{
$(".total").show();
$(".teamname").show();
$(".one").show();
$(".two").show();
$(".three").show();
$(".four").show();
$(".five").show();
}
else
{
$(".teams").hide();
}
});
$("input[name=sessionType]").change(function(){
});
$("#totalUsers").change(function() {
$('.six').hide();
$('.seven').hide();
$('.eight').hide();
$('.nine').hide();
$('.ten').hide();
var selectValue = $(this).val();
switch (selectValue) {
case "six":
$('.five').show();
$('.six').show();
break;
case "seven":
$('.five').show();
$('.six').show();
$('.seven').show();
break;
case "eight":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
break;
case "nine":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
$('.nine').show();
break;
case "ten":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
$('.nine').show();
$('.ten').show();
break;
}
});
$("#submit").click(function (){
if($("#submit").hasClass("disabled")) {
alert('Validation Failed');
}
else {
AddListItem();
return false;
}
});
});
function getItem() {
var item = {
Title: $("#requesterName").val(),
TeamName: $("#teamName").val(),
NumberOfAttendees: $("#totalUsers").val(),
FirstName: $("#oneUser").val(),
SecondName: $("#twoUsers").val(),
ThirdName: $("#threeUsers").val(),
FourthName: $("#fourUsers").val(),
FifthName: $("#fiveUsers").val(),
SixthName: $("#sixUsers").val(),
SeventhName: $("#sevenUsers").val(),
EighthName: $("#eightUsers").val(),
NinthName: $("#nineUsers").val(),
TenthName: $("#tenUsers").val(),
RequestType: $("input[name=requestType]:checked").val(),
SessionType: $("input[name=sessionType]:checked").val(),
};
return item;
}
function AddListItem(resources) {
var item = getItem();
if (item.RequestType == "Single User") {
item.NumberOfAttendees = 'None';
}
$pnp.setup({
baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training/"
});
$pnp.sp.web.lists.getByTitle("Training").items.add(item).then(function(r){
$("#submit").hide();
$(".form").hide();
$(".icon").hide();
$("#header").hide();
$("#DeltaPlaceHolderPageTitleInTitleArea").hide();
$("#hidden_div").show();
$("#cancel").hide();
});
}#submit
{
border-radius: 4px!important;
}
.ext
{
display: none;
}
#DeltaPlaceHolderPageTitleInTitleArea {
font-size: 3rem;
}
.one, .two, .three, .four, .five, .six, .seven,
.eight, .nine, .ten {
margin-bottom: 3px!important;
}
.form-group {
margin-bottom: 5px;
width: 450px;
}
.form {
padding-top: 15px;
padding-left: 0px;
padding-right: 0px;
}
#hidden_div {
padding-top: 30px;
text-align: center;
}
h2 {
font-size: 2rem!important;
}
.icon {
float: left;
margin-right: 25px;
width: 150px;
height: 140px;
}
.teams
{
display: none;
}<form id="form">
<div class="container form">
<div class="form-group row">
<label for="requestType" class="col-form-label">Request Type:</label>
<label for="singleUser" class="radio-inline"><input id="singleUser" type="radio" name="requestType" value="Single User" checked>Single User</label>
<label for="teamSelection" class="radio-inline"><input id="teamSelection" type="radio" name="requestType" value="Team">Team</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<label for="sessionType" class="col-form-label">Session Type:</label>
<label for="liveSession" class="radio-inline"><input id="liveSession" type="radio" name="sessionType" value="Live Session" checked>Live Session</label>
<label for="remoteSession" class="radio-inline"><input id="remoteSession" type="radio" name="sessionType" value="Remote Session">Remote Session</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<label for="requesterName" class="col-form-label">Requester Name:</label>
<input class="form-control" name="requesterName" type="text" id="requesterName" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: Jane Doe" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row teamname teams">
<label for="teamName" class="col-form-label">Team Name:</label>
<input class="form-control" name="teamName" type="text" id="teamName" data-minlength="2" data-error="Please enter a valid team name." placeholder="Ex: PortalHelp Team" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row teams total">
<label for="totalUsers" class="col-form-label">Number of Attendees:</label>
<select class="form-control" id="totalUsers">
<option value="Five" selected>5</option>
<option value="Six">6</option>
<option value="Seven">7</option>
<option value="Eight">8</option>
<option value="Nine">9</option>
<option value="Ten">10</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row one teams">
<label for="oneUser" class="col-form-label">Names of Attendees:</label>
<input class="form-control" name="oneUser" type="text" id="oneUser" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: John Smith" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row two teams">
<input class="form-control" name="twoUsers" type="text" id="twoUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row three teams">
<input class="form-control" name="threeUsers" type="text" id="threeUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row four teams">
<input class="form-control" name="fourUsers" type="text" id="fourUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row five teams">
<input class="form-control" name="fiveUsers" type="text" id="fiveUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row six teams teams1">
<input class="form-control" name="sixUsers" type="text" id="sixUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row seven teams teams1">
<input class="form-control" name="sevenUsers" type="text" id="sevenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row eight teams teams1">
<input class="form-control" name="eightUsers" type="text" id="eightUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row nine teams teams1">
<input class="form-control" name="nineUsers" type="text" id="nineUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row ten teams teams1">
<input class="form-control" name="tenUsers" type="text" id="tenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<button type="button" name="singlebutton" class="btn btn-success" id="submit">Submit</button>
<button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='/TrainingResourceCenter/O365Training/Pages/Training.aspx'">Cancel</button>
</div>
</div>
</form>javascript jquery html twitter-bootstrap bootstrap-4
edited Nov 20 '18 at 22:33
halfer
14.5k758111
asked Sep 19 '18 at 20:24
Semir314Semir314
38712
I have two radio button categories that are broken down into showing/hiding different input fields. I'm inching closer to getting it but can't seem to figure it out completely.
Here are the images below:
Selecting 'Single user' and 'Live Session' works perfectly.
Selecting 'Single user' and 'Remote Session' works perfectly.
Selecting 'Team' and 'Live session' works perfectly.
When selecting 'Team' and 'Remote session' - When a user clicks on both 'Team' + 'Remote Session' radio buttons at the same time, I want to be able to hide the divs (.total, .one, .two, .three, .four, .five ---> .ten). So basically all the input boxes below 'Requester Name' and 'Team Name'.
Here is the code that I currently have:
$(document).ready(function () {
$('input[name=requestType]').click(function() {
if(this.value == 'Team')
{
$(".total").show();
$(".teamname").show();
$(".one").show();
$(".two").show();
$(".three").show();
$(".four").show();
$(".five").show();
}
else
{
$(".teams").hide();
}
});
$("input[name=sessionType]").change(function(){
});
$("#totalUsers").change(function() {
$('.six').hide();
$('.seven').hide();
$('.eight').hide();
$('.nine').hide();
$('.ten').hide();
var selectValue = $(this).val();
switch (selectValue) {
case "six":
$('.five').show();
$('.six').show();
break;
case "seven":
$('.five').show();
$('.six').show();
$('.seven').show();
break;
case "eight":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
break;
case "nine":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
$('.nine').show();
break;
case "ten":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
$('.nine').show();
$('.ten').show();
break;
}
});
$("#submit").click(function (){
if($("#submit").hasClass("disabled")) {
alert('Validation Failed');
}
else {
AddListItem();
return false;
}
});
});
function getItem() {
var item = {
Title: $("#requesterName").val(),
TeamName: $("#teamName").val(),
NumberOfAttendees: $("#totalUsers").val(),
FirstName: $("#oneUser").val(),
SecondName: $("#twoUsers").val(),
ThirdName: $("#threeUsers").val(),
FourthName: $("#fourUsers").val(),
FifthName: $("#fiveUsers").val(),
SixthName: $("#sixUsers").val(),
SeventhName: $("#sevenUsers").val(),
EighthName: $("#eightUsers").val(),
NinthName: $("#nineUsers").val(),
TenthName: $("#tenUsers").val(),
RequestType: $("input[name=requestType]:checked").val(),
SessionType: $("input[name=sessionType]:checked").val(),
};
return item;
}
function AddListItem(resources) {
var item = getItem();
if (item.RequestType == "Single User") {
item.NumberOfAttendees = 'None';
}
$pnp.setup({
baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training/"
});
$pnp.sp.web.lists.getByTitle("Training").items.add(item).then(function(r){
$("#submit").hide();
$(".form").hide();
$(".icon").hide();
$("#header").hide();
$("#DeltaPlaceHolderPageTitleInTitleArea").hide();
$("#hidden_div").show();
$("#cancel").hide();
});
}#submit
{
border-radius: 4px!important;
}
.ext
{
display: none;
}
#DeltaPlaceHolderPageTitleInTitleArea {
font-size: 3rem;
}
.one, .two, .three, .four, .five, .six, .seven,
.eight, .nine, .ten {
margin-bottom: 3px!important;
}
.form-group {
margin-bottom: 5px;
width: 450px;
}
.form {
padding-top: 15px;
padding-left: 0px;
padding-right: 0px;
}
#hidden_div {
padding-top: 30px;
text-align: center;
}
h2 {
font-size: 2rem!important;
}
.icon {
float: left;
margin-right: 25px;
width: 150px;
height: 140px;
}
.teams
{
display: none;
}<form id="form">
<div class="container form">
<div class="form-group row">
<label for="requestType" class="col-form-label">Request Type:</label>
<label for="singleUser" class="radio-inline"><input id="singleUser" type="radio" name="requestType" value="Single User" checked>Single User</label>
<label for="teamSelection" class="radio-inline"><input id="teamSelection" type="radio" name="requestType" value="Team">Team</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<label for="sessionType" class="col-form-label">Session Type:</label>
<label for="liveSession" class="radio-inline"><input id="liveSession" type="radio" name="sessionType" value="Live Session" checked>Live Session</label>
<label for="remoteSession" class="radio-inline"><input id="remoteSession" type="radio" name="sessionType" value="Remote Session">Remote Session</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<label for="requesterName" class="col-form-label">Requester Name:</label>
<input class="form-control" name="requesterName" type="text" id="requesterName" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: Jane Doe" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row teamname teams">
<label for="teamName" class="col-form-label">Team Name:</label>
<input class="form-control" name="teamName" type="text" id="teamName" data-minlength="2" data-error="Please enter a valid team name." placeholder="Ex: PortalHelp Team" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row teams total">
<label for="totalUsers" class="col-form-label">Number of Attendees:</label>
<select class="form-control" id="totalUsers">
<option value="Five" selected>5</option>
<option value="Six">6</option>
<option value="Seven">7</option>
<option value="Eight">8</option>
<option value="Nine">9</option>
<option value="Ten">10</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row one teams">
<label for="oneUser" class="col-form-label">Names of Attendees:</label>
<input class="form-control" name="oneUser" type="text" id="oneUser" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: John Smith" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row two teams">
<input class="form-control" name="twoUsers" type="text" id="twoUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row three teams">
<input class="form-control" name="threeUsers" type="text" id="threeUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row four teams">
<input class="form-control" name="fourUsers" type="text" id="fourUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row five teams">
<input class="form-control" name="fiveUsers" type="text" id="fiveUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row six teams teams1">
<input class="form-control" name="sixUsers" type="text" id="sixUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row seven teams teams1">
<input class="form-control" name="sevenUsers" type="text" id="sevenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row eight teams teams1">
<input class="form-control" name="eightUsers" type="text" id="eightUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row nine teams teams1">
<input class="form-control" name="nineUsers" type="text" id="nineUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row ten teams teams1">
<input class="form-control" name="tenUsers" type="text" id="tenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<button type="button" name="singlebutton" class="btn btn-success" id="submit">Submit</button>
<button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='/TrainingResourceCenter/O365Training/Pages/Training.aspx'">Cancel</button>
</div>
</div>
</form>$(document).ready(function () {
$('input[name=requestType]').click(function() {
if(this.value == 'Team')
{
$(".total").show();
$(".teamname").show();
$(".one").show();
$(".two").show();
$(".three").show();
$(".four").show();
$(".five").show();
}
else
{
$(".teams").hide();
}
});
$("input[name=sessionType]").change(function(){
});
$("#totalUsers").change(function() {
$('.six').hide();
$('.seven').hide();
$('.eight').hide();
$('.nine').hide();
$('.ten').hide();
var selectValue = $(this).val();
switch (selectValue) {
case "six":
$('.five').show();
$('.six').show();
break;
case "seven":
$('.five').show();
$('.six').show();
$('.seven').show();
break;
case "eight":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
break;
case "nine":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
$('.nine').show();
break;
case "ten":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
$('.nine').show();
$('.ten').show();
break;
}
});
$("#submit").click(function (){
if($("#submit").hasClass("disabled")) {
alert('Validation Failed');
}
else {
AddListItem();
return false;
}
});
});
function getItem() {
var item = {
Title: $("#requesterName").val(),
TeamName: $("#teamName").val(),
NumberOfAttendees: $("#totalUsers").val(),
FirstName: $("#oneUser").val(),
SecondName: $("#twoUsers").val(),
ThirdName: $("#threeUsers").val(),
FourthName: $("#fourUsers").val(),
FifthName: $("#fiveUsers").val(),
SixthName: $("#sixUsers").val(),
SeventhName: $("#sevenUsers").val(),
EighthName: $("#eightUsers").val(),
NinthName: $("#nineUsers").val(),
TenthName: $("#tenUsers").val(),
RequestType: $("input[name=requestType]:checked").val(),
SessionType: $("input[name=sessionType]:checked").val(),
};
return item;
}
function AddListItem(resources) {
var item = getItem();
if (item.RequestType == "Single User") {
item.NumberOfAttendees = 'None';
}
$pnp.setup({
baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training/"
});
$pnp.sp.web.lists.getByTitle("Training").items.add(item).then(function(r){
$("#submit").hide();
$(".form").hide();
$(".icon").hide();
$("#header").hide();
$("#DeltaPlaceHolderPageTitleInTitleArea").hide();
$("#hidden_div").show();
$("#cancel").hide();
});
}#submit
{
border-radius: 4px!important;
}
.ext
{
display: none;
}
#DeltaPlaceHolderPageTitleInTitleArea {
font-size: 3rem;
}
.one, .two, .three, .four, .five, .six, .seven,
.eight, .nine, .ten {
margin-bottom: 3px!important;
}
.form-group {
margin-bottom: 5px;
width: 450px;
}
.form {
padding-top: 15px;
padding-left: 0px;
padding-right: 0px;
}
#hidden_div {
padding-top: 30px;
text-align: center;
}
h2 {
font-size: 2rem!important;
}
.icon {
float: left;
margin-right: 25px;
width: 150px;
height: 140px;
}
.teams
{
display: none;
}<form id="form">
<div class="container form">
<div class="form-group row">
<label for="requestType" class="col-form-label">Request Type:</label>
<label for="singleUser" class="radio-inline"><input id="singleUser" type="radio" name="requestType" value="Single User" checked>Single User</label>
<label for="teamSelection" class="radio-inline"><input id="teamSelection" type="radio" name="requestType" value="Team">Team</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<label for="sessionType" class="col-form-label">Session Type:</label>
<label for="liveSession" class="radio-inline"><input id="liveSession" type="radio" name="sessionType" value="Live Session" checked>Live Session</label>
<label for="remoteSession" class="radio-inline"><input id="remoteSession" type="radio" name="sessionType" value="Remote Session">Remote Session</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<label for="requesterName" class="col-form-label">Requester Name:</label>
<input class="form-control" name="requesterName" type="text" id="requesterName" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: Jane Doe" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row teamname teams">
<label for="teamName" class="col-form-label">Team Name:</label>
<input class="form-control" name="teamName" type="text" id="teamName" data-minlength="2" data-error="Please enter a valid team name." placeholder="Ex: PortalHelp Team" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row teams total">
<label for="totalUsers" class="col-form-label">Number of Attendees:</label>
<select class="form-control" id="totalUsers">
<option value="Five" selected>5</option>
<option value="Six">6</option>
<option value="Seven">7</option>
<option value="Eight">8</option>
<option value="Nine">9</option>
<option value="Ten">10</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row one teams">
<label for="oneUser" class="col-form-label">Names of Attendees:</label>
<input class="form-control" name="oneUser" type="text" id="oneUser" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: John Smith" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row two teams">
<input class="form-control" name="twoUsers" type="text" id="twoUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row three teams">
<input class="form-control" name="threeUsers" type="text" id="threeUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row four teams">
<input class="form-control" name="fourUsers" type="text" id="fourUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row five teams">
<input class="form-control" name="fiveUsers" type="text" id="fiveUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row six teams teams1">
<input class="form-control" name="sixUsers" type="text" id="sixUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row seven teams teams1">
<input class="form-control" name="sevenUsers" type="text" id="sevenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row eight teams teams1">
<input class="form-control" name="eightUsers" type="text" id="eightUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row nine teams teams1">
<input class="form-control" name="nineUsers" type="text" id="nineUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row ten teams teams1">
<input class="form-control" name="tenUsers" type="text" id="tenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<button type="button" name="singlebutton" class="btn btn-success" id="submit">Submit</button>
<button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='/TrainingResourceCenter/O365Training/Pages/Training.aspx'">Cancel</button>
</div>
</div>
</form>$(document).ready(function () {
$('input[name=requestType]').click(function() {
if(this.value == 'Team')
{
$(".total").show();
$(".teamname").show();
$(".one").show();
$(".two").show();
$(".three").show();
$(".four").show();
$(".five").show();
}
else
{
$(".teams").hide();
}
});
$("input[name=sessionType]").change(function(){
});
$("#totalUsers").change(function() {
$('.six').hide();
$('.seven').hide();
$('.eight').hide();
$('.nine').hide();
$('.ten').hide();
var selectValue = $(this).val();
switch (selectValue) {
case "six":
$('.five').show();
$('.six').show();
break;
case "seven":
$('.five').show();
$('.six').show();
$('.seven').show();
break;
case "eight":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
break;
case "nine":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
$('.nine').show();
break;
case "ten":
$('.five').show();
$('.six').show();
$('.seven').show();
$('.eight').show();
$('.nine').show();
$('.ten').show();
break;
}
});
$("#submit").click(function (){
if($("#submit").hasClass("disabled")) {
alert('Validation Failed');
}
else {
AddListItem();
return false;
}
});
});
function getItem() {
var item = {
Title: $("#requesterName").val(),
TeamName: $("#teamName").val(),
NumberOfAttendees: $("#totalUsers").val(),
FirstName: $("#oneUser").val(),
SecondName: $("#twoUsers").val(),
ThirdName: $("#threeUsers").val(),
FourthName: $("#fourUsers").val(),
FifthName: $("#fiveUsers").val(),
SixthName: $("#sixUsers").val(),
SeventhName: $("#sevenUsers").val(),
EighthName: $("#eightUsers").val(),
NinthName: $("#nineUsers").val(),
TenthName: $("#tenUsers").val(),
RequestType: $("input[name=requestType]:checked").val(),
SessionType: $("input[name=sessionType]:checked").val(),
};
return item;
}
function AddListItem(resources) {
var item = getItem();
if (item.RequestType == "Single User") {
item.NumberOfAttendees = 'None';
}
$pnp.setup({
baseUrl: "https://fh126cloud.sharepoint.com/TrainingResourceCenter/O365Training/"
});
$pnp.sp.web.lists.getByTitle("Training").items.add(item).then(function(r){
$("#submit").hide();
$(".form").hide();
$(".icon").hide();
$("#header").hide();
$("#DeltaPlaceHolderPageTitleInTitleArea").hide();
$("#hidden_div").show();
$("#cancel").hide();
});
}#submit
{
border-radius: 4px!important;
}
.ext
{
display: none;
}
#DeltaPlaceHolderPageTitleInTitleArea {
font-size: 3rem;
}
.one, .two, .three, .four, .five, .six, .seven,
.eight, .nine, .ten {
margin-bottom: 3px!important;
}
.form-group {
margin-bottom: 5px;
width: 450px;
}
.form {
padding-top: 15px;
padding-left: 0px;
padding-right: 0px;
}
#hidden_div {
padding-top: 30px;
text-align: center;
}
h2 {
font-size: 2rem!important;
}
.icon {
float: left;
margin-right: 25px;
width: 150px;
height: 140px;
}
.teams
{
display: none;
}<form id="form">
<div class="container form">
<div class="form-group row">
<label for="requestType" class="col-form-label">Request Type:</label>
<label for="singleUser" class="radio-inline"><input id="singleUser" type="radio" name="requestType" value="Single User" checked>Single User</label>
<label for="teamSelection" class="radio-inline"><input id="teamSelection" type="radio" name="requestType" value="Team">Team</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<label for="sessionType" class="col-form-label">Session Type:</label>
<label for="liveSession" class="radio-inline"><input id="liveSession" type="radio" name="sessionType" value="Live Session" checked>Live Session</label>
<label for="remoteSession" class="radio-inline"><input id="remoteSession" type="radio" name="sessionType" value="Remote Session">Remote Session</label>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<label for="requesterName" class="col-form-label">Requester Name:</label>
<input class="form-control" name="requesterName" type="text" id="requesterName" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: Jane Doe" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row teamname teams">
<label for="teamName" class="col-form-label">Team Name:</label>
<input class="form-control" name="teamName" type="text" id="teamName" data-minlength="2" data-error="Please enter a valid team name." placeholder="Ex: PortalHelp Team" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row teams total">
<label for="totalUsers" class="col-form-label">Number of Attendees:</label>
<select class="form-control" id="totalUsers">
<option value="Five" selected>5</option>
<option value="Six">6</option>
<option value="Seven">7</option>
<option value="Eight">8</option>
<option value="Nine">9</option>
<option value="Ten">10</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row one teams">
<label for="oneUser" class="col-form-label">Names of Attendees:</label>
<input class="form-control" name="oneUser" type="text" id="oneUser" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: John Smith" required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row two teams">
<input class="form-control" name="twoUsers" type="text" id="twoUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row three teams">
<input class="form-control" name="threeUsers" type="text" id="threeUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row four teams">
<input class="form-control" name="fourUsers" type="text" id="fourUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row five teams">
<input class="form-control" name="fiveUsers" type="text" id="fiveUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row six teams teams1">
<input class="form-control" name="sixUsers" type="text" id="sixUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row seven teams teams1">
<input class="form-control" name="sevenUsers" type="text" id="sevenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row eight teams teams1">
<input class="form-control" name="eightUsers" type="text" id="eightUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row nine teams teams1">
<input class="form-control" name="nineUsers" type="text" id="nineUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row ten teams teams1">
<input class="form-control" name="tenUsers" type="text" id="tenUsers" data-minlength="2" data-error="Please enter a valid name." required/>
<div class="help-block with-errors"></div>
</div>
<div class="form-group row">
<button type="button" name="singlebutton" class="btn btn-success" id="submit">Submit</button>
<button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='/TrainingResourceCenter/O365Training/Pages/Training.aspx'">Cancel</button>
</div>
</div>
</form>javascript jquery html twitter-bootstrap bootstrap-4
javascript jquery html twitter-bootstrap bootstrap-4
edited Nov 20 '18 at 22:33
halfer
14.5k758111
asked Sep 19 '18 at 20:24
Semir314Semir314
38712
edited Nov 20 '18 at 22:33
halfer
14.5k758111
asked Sep 19 '18 at 20:24
Semir314Semir314
38712
edited Nov 20 '18 at 22:33
halfer
14.5k758111
edited Nov 20 '18 at 22:33
halfer
14.5k758111
edited Nov 20 '18 at 22:33
halfer
14.5k758111
14.5k758111
asked Sep 19 '18 at 20:24
Semir314Semir314
38712
asked Sep 19 '18 at 20:24
Semir314Semir314
38712
asked Sep 19 '18 at 20:24
Semir314Semir314
38712
38712
1
What's the question/issue here?
– dustytrash
Sep 19 '18 at 20:28
Hi @dustytrash, When a user clicks on both 'Team' + 'Remote Session' radio buttons at the same time, I want to be able to hide the divs (.total, .one, .two, .three, .four, .five ---> .ten). So basically all the input boxes that you see under 'Requester Name' and 'Team Name'.
– Semir314
Sep 19 '18 at 20:31
I've updated the last picture.
– Semir314
Sep 19 '18 at 20:36
add a comment |
1
What's the question/issue here?
– dustytrash
Sep 19 '18 at 20:28
Hi @dustytrash, When a user clicks on both 'Team' + 'Remote Session' radio buttons at the same time, I want to be able to hide the divs (.total, .one, .two, .three, .four, .five ---> .ten). So basically all the input boxes that you see under 'Requester Name' and 'Team Name'.
– Semir314
Sep 19 '18 at 20:31
I've updated the last picture.
– Semir314
Sep 19 '18 at 20:36
1
1
What's the question/issue here?
– dustytrash
Sep 19 '18 at 20:28
What's the question/issue here?
– dustytrash
Sep 19 '18 at 20:28
Hi @dustytrash, When a user clicks on both 'Team' + 'Remote Session' radio buttons at the same time, I want to be able to hide the divs (.total, .one, .two, .three, .four, .five ---> .ten). So basically all the input boxes that you see under 'Requester Name' and 'Team Name'.
– Semir314
Sep 19 '18 at 20:31
Hi @dustytrash, When a user clicks on both 'Team' + 'Remote Session' radio buttons at the same time, I want to be able to hide the divs (.total, .one, .two, .three, .four, .five ---> .ten). So basically all the input boxes that you see under 'Requester Name' and 'Team Name'.
– Semir314
Sep 19 '18 at 20:31
I've updated the last picture.
– Semir314
Sep 19 '18 at 20:36
I've updated the last picture.
– Semir314
Sep 19 '18 at 20:36
add a comment |
1 Answer
1
active
oldest
votes
1
You can use css sibling selectors to do this without need for jQuery.
<input type="radio" name="fieldset1" value="input1"> input1
<input type="radio" name="fieldset1" value="input2"> input 2
<br>
<input type="radio" name="fieldset2" value="input1"> input1
<input type="radio" name="fieldset2" value="input2"> input 2
<div>some content</div>
--
input[name="fieldset1"][value="input2"]:checked~input[name="fieldset2"][value="input2"]:checked ~ div{
display: none;
}
I made this code pen to illustrate how: https://codepen.io/hasanainj/pen/ZMVwYo
Let me know if this doesn't work for your use case
answered Sep 19 '18 at 21:12
hasanainhasanain
625412
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52413698%2fpicking-two-radio-buttons-to-show-hide-divs-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You can use css sibling selectors to do this without need for jQuery.
<input type="radio" name="fieldset1" value="input1"> input1
<input type="radio" name="fieldset1" value="input2"> input 2
<br>
<input type="radio" name="fieldset2" value="input1"> input1
<input type="radio" name="fieldset2" value="input2"> input 2
<div>some content</div>
--
input[name="fieldset1"][value="input2"]:checked~input[name="fieldset2"][value="input2"]:checked ~ div{
display: none;
}
I made this code pen to illustrate how: https://codepen.io/hasanainj/pen/ZMVwYo
Let me know if this doesn't work for your use case
answered Sep 19 '18 at 21:12
hasanainhasanain
625412
add a comment |
1
You can use css sibling selectors to do this without need for jQuery.
<input type="radio" name="fieldset1" value="input1"> input1
<input type="radio" name="fieldset1" value="input2"> input 2
<br>
<input type="radio" name="fieldset2" value="input1"> input1
<input type="radio" name="fieldset2" value="input2"> input 2
<div>some content</div>
--
input[name="fieldset1"][value="input2"]:checked~input[name="fieldset2"][value="input2"]:checked ~ div{
display: none;
}
I made this code pen to illustrate how: https://codepen.io/hasanainj/pen/ZMVwYo
Let me know if this doesn't work for your use case
answered Sep 19 '18 at 21:12
hasanainhasanain
625412
add a comment |
1
1
1
You can use css sibling selectors to do this without need for jQuery.
<input type="radio" name="fieldset1" value="input1"> input1
<input type="radio" name="fieldset1" value="input2"> input 2
<br>
<input type="radio" name="fieldset2" value="input1"> input1
<input type="radio" name="fieldset2" value="input2"> input 2
<div>some content</div>
--
input[name="fieldset1"][value="input2"]:checked~input[name="fieldset2"][value="input2"]:checked ~ div{
display: none;
}
I made this code pen to illustrate how: https://codepen.io/hasanainj/pen/ZMVwYo
Let me know if this doesn't work for your use case
answered Sep 19 '18 at 21:12
hasanainhasanain
625412
You can use css sibling selectors to do this without need for jQuery.
<input type="radio" name="fieldset1" value="input1"> input1
<input type="radio" name="fieldset1" value="input2"> input 2
<br>
<input type="radio" name="fieldset2" value="input1"> input1
<input type="radio" name="fieldset2" value="input2"> input 2
<div>some content</div>
--
input[name="fieldset1"][value="input2"]:checked~input[name="fieldset2"][value="input2"]:checked ~ div{
display: none;
}
I made this code pen to illustrate how: https://codepen.io/hasanainj/pen/ZMVwYo
Let me know if this doesn't work for your use case
answered Sep 19 '18 at 21:12
hasanainhasanain
625412
edited Sep 19 '18 at 21:21
answered Sep 19 '18 at 21:12
hasanainhasanain
625412
answered Sep 19 '18 at 21:12
hasanainhasanain
625412
answered Sep 19 '18 at 21:12
hasanainhasanain
625412
625412
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52413698%2fpicking-two-radio-buttons-to-show-hide-divs-using-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
What's the question/issue here?
– dustytrash
Sep 19 '18 at 20:28
Hi @dustytrash, When a user clicks on both 'Team' + 'Remote Session' radio buttons at the same time, I want to be able to hide the divs (.total, .one, .two, .three, .four, .five ---> .ten). So basically all the input boxes that you see under 'Requester Name' and 'Team Name'.
– Semir314
Sep 19 '18 at 20:31
I've updated the last picture.
– Semir314
Sep 19 '18 at 20:36