In the example below, I'm trying to show a specific div only when i check the radio button "yes".
It's ok for one div but when I try to do this for two separate panes, checking the second radio button also expands the first field.
How can I fold/unfold each container separately?
https://jsfiddle.net/vsf7mph8/3/
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||$('.form-radio input:nth-child(2)').val() == $(this).val())
$('.otherRowinput').toggle('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>
Your mistake is that $('.otherRowinput').toggle('fast'); applies to all text fields. However, you only want to apply it to the nearest text field.
For this, don't use the $(selector) function which applies to all objects in the DOM, but traverse the DOM starting from the checkbox that was modified. Starting from the currently checked box, traverse the DOM upwards until you find a common parent of the checkbox and the textarea, then traverse it downwards to the text area and toggle that.
You find the parent that includes both the checkbox and the text field with $(this).closest(selector). Then, starting from that parent object, select the text area that is a child of that element using find(selector). In total:
$(this).closest(".row").find(".otherRowinput").toggle('fast');
Below is your updated example.
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||
$('.form-radio input:nth-child(2)').val() == $(this).val()){
$(this).closest(".row").find(".otherRowinput").toggle('fast');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>
Related
Why is this script not working? Is it possible that I am targeting the attributes wrong? Result of this form should be that it cannot be submitted unless at least one checkbox is selected, however, user can select as many as they want.
function valCheckbox() {
var checkboxes = document.getElementsByTagName("checkbox");
var atLeastOneCheckBoxIsChecked = false;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked == true) {
atLeastOneCheckBoxIsChecked = true;
break;
}
}
if (atLeastOneCheckBoxIsChecked === false) {
alert("Please select at least one option.");
}
}
<div class="elq-field-style form-element-layout row">
<div class="col-sm-12 col-xs-12">
<label class="elq-label">Please select one or more options</label>
<div>Choose as many as apply</div>
<div id="formElement13">
<div class="single-checkbox-row row">
<input type="checkbox" name="option1">
<label class="checkbox-aligned elq-item-label">Option 1</label>
</div>
</div>
<div id="formElement14">
<div class="single-checkbox-row row">
<input type="checkbox" name="option2">
<label class="checkbox-aligned elq-item-label">Option 2</label>
</div>
</div>
<div id="formElement15">
<div class="single-checkbox-row row">
<input type="checkbox" name="option3">
<label class="checkbox-aligned elq-item-label">Option 3</label>
</div>
</div>
<div id="formElement16">
<div class="single-checkbox-row row">
<input type="checkbox" name="option4">
<label class="checkbox-aligned elq-item-label">Option 4</label>
</div>
</div>
<div id="formElement17">
<div class="single-checkbox-row row">
<input type="checkbox" name="option5">
<label class="checkbox-aligned elq-item-label">Option 5</label>
</div>
</div>
<div id="formElement18">
<div class="single-checkbox-row row">
<input type="checkbox" name="option6">
<label class="checkbox-aligned elq-item-label">Option 6</label>
</div>
</div>
</div>
</div>
<div id="formElement20" class="elq-field-style form-element-layout row">
<div class="col-sm-4 col-xs-12">
<div class="row">
<div class="col-xs-12">
<input type="Submit" class="sub-button" value="Submit" onclick="valCheckbox();">
</div>
</div>
</div>
</div>
There's no Tagname checkbox so
var checkboxes = document.getElementsByTagName("checkbox");
Will return an empty array
You should use querySelectorAll and target input with type=checkbox
var checkboxes = document.querySelectorAll('input[type=checkbox]');
In my code I use a bootstrap accordion for extra option. When click start, I want to collapse (close) it. I tried
$('#accordion2').collapse({
hide: true
});
But the accordion close and then reopen. A second click do not do anything more. What I miss here? As written in the Bootstrap documentation I use the data-parent to close it.
The code is:
<div id="accordion2" style="width:802px;">
<div class="card">
<div class="card-header" id="headingImgOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseImgOne" aria-expanded="true" aria-controls="collapseImgOne">
Testrun Optionen
</button>
</h5>
</div>
<div id="collapseImgOne" class="collapse" aria-labelledby="headingImgOne" data-parent="#accordion2">
<div class="card-body">
<div class="form-group row">
<label for="text" class="col-4 col-form-label">Server</label>
<div class="col-7">
<div class="input-group">
<div class="form-check">
<label>
<input type="checkbox" name="c06" id="c06" checked> <span class="label-text">c06</span>
</label>
<label>
<input type="checkbox" name="c07" id="c07" checked> <span class="label-text">c07</span>
</label>
<label>
<input type="checkbox" name="c08" id="c08" checked> <span class="label-text">c08</span>
</label>
<label>
<input type="checkbox" name="c09" id="c09"> <span class="label-text">c09</span>
</label>
<label>
<input type="checkbox" name="c10" id="c10"> <span class="label-text">c10</span>
</label>
<label>
<input type="checkbox" name="c11" id="c11"> <span class="label-text">c11</span>
</label>
<label>
<input type="checkbox" name="c12" id="c12"> <span class="label-text">c12</span>
</label>
<label>
<input type="checkbox" name="c13" id="c13"> <span class="label-text">c13</span>
</label>
<label>
<input type="checkbox" name="c14" id="c14"> <span class="label-text">c14</span>
</label>
<label>
<input type="checkbox" name="c15" id="c15"> <span class="label-text">c15</span>
</label>
<label>
<input type="checkbox" name="c16" id="c16"> <span class="label-text">c16</span>
</label>
<label>
<input type="checkbox" name="c17" id="c17"> <span class="label-text">c17</span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="select" class="col-4 col-form-label">Server Domain</label>
<div class="col-7">
<select id="imgdomain" name="select" class="custom-select">
<option value="domain.com" selected>domain.com</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
On click of "a" tag page should scroll to div that has class called "cmntBox" I have done through jquery but it returning nothing actually when I click Write a review button it should scroll down to div.
HTML code
<i class="fa fa-pencil"></i> Write a review
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 nopad cmntBox">
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<div class="tab-pane active" id="tab-review">
<form class="form-horizontal">
<div id="review"></div>
<h3>Write a review</h3>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-name">Your Name</label>
<input type="text" name="name" value="" id="input-name" class="form-control" />
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-review">Your Review</label>
<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
<div class="help-block"><span class="text-danger">Note:</span> HTML is not translated!</div>
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">Rating</label>
Bad
<input type="radio" name="rating" value="1" />
<input type="radio" name="rating" value="2" />
<input type="radio" name="rating" value="3" />
<input type="radio" name="rating" value="4" />
<input type="radio" name="rating" value="5" />
Good</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-captcha">Enter the code in the box below</label>
<input type="text" name="captcha" value="" id="input-captcha" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12"> <img src="index.php?route=tool/captcha" alt="" id="captcha" /> </div>
</div>
<div class="buttons">
<div class="pull-right">
<button type="button" id="button-review" data-loading-text="Loading..." class="btn btn-primary">Continue</button>
</div>
</div>
</form>
</div>
</div>
Jquery code,
$(".cmntBox").click(function() {
$('html, body').animate({
scrollBottom: $(".cmntBox").offset().bottom
}, 2000);
});
Replace with this code
scrollTop:$(".cmntBox").offset().top}, 2000);
i have the following JS and HTML:
$scope.loadInstallation = function (installationid) {
$scope.currentInstallation = {};
$scope.currentInstallation = $scope.installationList[installationid];;
$scope.currentInstallationID = installationid;
};
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList1">Module 1:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList1" ng-model="currentInstallation.moduleIdList" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList2">Module 2:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList2" ng-model="currentInstallation.moduleIdList" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList3">Module 3:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList3" ng-model="currentInstallation.moduleIdList" /></label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList4">Module 4:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList4" ng-model="currentInstallation.moduleIdList" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList5">Module 5:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList5" ng-model="currentInstallation.moduleIdList" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList6">Module 6:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList6" ng-model="currentInstallation.moduleIdList" /></label>
</div>
</div>
</div>
</div>
And an JSON, which look something like this:
currentInstallation =
{
"id":"1",
"moduleIdList": [ "1", "2" ]
}
The "1" in the "moduleIdList" equals "true" in the HTML "Module 1:" Checkbox, the Problem is, I don't know, how to bind the "moduleIdList" to the Checkboxes, so that when there's a "1" in "moduleIdList" the Checkbox is checked and when someone uncheck it, the "1" will be deleted out of the Array
Hope you can understand my problem, I'm glad for any help!
Greetings,
Simon
Ok, I got an workaround, which is fine for me.
I just don't use the ng-model, instead I use ng-checked ng-click, so I can use functions, which will do exactly what I want:
$scope.loadInstallation = function (installationid) {
$scope.currentInstallation = {};
$scope.currentInstallation = $scope.installationList[installationid];;
$scope.currentInstallationID = installationid;
};
$scope.isModuleSelected = function (id) {
if ($scope.currentInstallation.moduleIdList != null && $scope.currentInstallation.moduleIdList.indexOf(id) != -1)
return true;
else
return false;
};
$scope.toggleModule = function (id) {
if ($scope.currentInstallation.moduleIdList == null)
$scope.currentInstallation.moduleIdList = [];
var numberOnIndex = $scope.currentInstallation.moduleIdList.indexOf(id);
if (numberOnIndex == -1)
$scope.currentInstallation.moduleIdList.push(id);
else
$scope.currentInstallation.moduleIdList.splice(numberOnIndex, 1);
};
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList1">Module 1:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList1" ng-checked="isModuleSelected('1')" ng-click="toggleModule('1')" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList2">Module 2:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList2" ng-checked="isModuleSelected('2')" ng-click="toggleModule('2')" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList3">Module 3:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList3" ng-checked="isModuleSelected('3')" ng-click="toggleModule('3')" /></label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList4">Module 4:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList4" ng-checked="isModuleSelected('4')" ng-click="toggleModule('4')" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList5">Module 5:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList5" ng-checked="isModuleSelected('5')" ng-click="toggleModule('5')" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList6">Module 6:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList6" ng-checked="isModuleSelected('6')" ng-click="toggleModule('6')" /></label>
</div>
</div>
</div>
</div>
Basically, I wanted to show/hide the div by clicking Yes/No Radio button. I have also done a sample types in the fiddle link below. I want to make this Generic, like one function can do for all the yes/no questions. and i want to avoid the multiple if condtion in jquery.
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="student" id="studentYes" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" id="studentNo" value="no"> No
</label>
</div>
<div id="stdTypes" class="studentsType">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no"> No
</label>
</div>
<div class="departName">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no"> No
</label>
</div>
<div class="earning">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
My jquery look this.
$('input[name="student"]:radio').change(function () {
var radio_value = ($('input:radio[name="student"]:checked').val());
if (radio_value == 'yes') {
$('.studentsType').slideDown("fast");
}
else if (radio_value == 'no') {
$('.studentsType').slideUp("fast");
}
});
$('input[name="gradstd"]:radio').change(function () {
var radio_value = ($('input:radio[name="gradstd"]:checked').val());
if (radio_value == 'yes') {
$('.departName').slideDown("fast");
}
else if (radio_value == 'no') {
$('.departName').slideUp("fast");
}
});
$('input[name="living"]:radio').change(function () {
var radio_value = ($('input:radio[name="living"]:checked').val());
if (radio_value == 'yes') {
$('.earning').slideDown("fast");
}
else if (radio_value == 'no') {
$('.earning').slideUp("fast");
}
});
Links for Fiddle:
http://jsfiddle.net/mgrgfqfd/
Please help !!
You can use a data attribute in the radio buttons to indicate which DIV should be toggled.
$(':radio[data-rel]').change(function() {
var rel = $("." + $(this).data('rel'));
if ($(this).val() == 'yes') {
rel.slideDown();
} else {
rel.slideUp();
rel.find(":text,select").val("");
rel.find(":radio,:checkbox").prop("checked", false);
}
});
.studentsType,
.departName,
.earning {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="student" id="studentYes" value="yes" data-rel="studentsType">Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" id="studentNo" value="no" data-rel="studentsType">No
</label>
</div>
<div id="stdTypes" class="studentsType">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes" data-rel="departName">Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no" data-rel="departName">No
</label>
</div>
<div class="departName">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes" data-rel="earning">Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no" data-rel="earning">No
</label>
</div>
<div class="earning">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
If you keep this sort of structure it can be achieved with a tiny bit of code:
http://jsfiddle.net/mgrgfqfd/2/
HTML:
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group" data-target="gruduate">
<label class="radio-inline">
<input type="radio" name="student" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
JS:
$('input:radio').on('change', function() {
$(this).parents('.control-group').next('div.optional').toggle( $(this).val() == 'yes' );
});
Just ensure that your yes/no buttons are within a control-group and you put the optional elements directly after it inside a div with a class of .optional
Below code will find next div and perform sliding in jquery this helps you to avoid multiple redundant lines of code and ifs.
$('input:radio').on('change', function () {//Register change event for all radio button
if ($(this).val() == 'yes') {//check value of selected radio is yes
$(this).parent().parent().next('div').slideDown("fast");
}
else if ($(this).val() == 'no') {//check value of selected radio is no
$(this).parent().parent().next('div').slideUp("fast");
}
});