I have a textbox and a select box:
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group " >
<span class="input-group-addon white" >Weight</span>
<input class="form-control weight" title="Enter the gross weight" type="text" id="weight" />
</div>
</div>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group ">
<span class="input-group-addon white">Barrel Size</span>
<select class="form-control gray" id="sizeSelect" title="Select an option">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
</div>
When a size is selected it subtracts a certain amount from the weight. So I want to make sure users don't select a size before entering a weight.
My question is how to disable the selectbox until a weight(numeric) is entered?
Something like this?
$(".weight").change(function () {
if (this.value <= 0 || this.value == null) {
$("#sizeSelect").prop("disabled", true)
}
else {
$("#sizeSelect").prop("disabled", false)
}
});
Any advice is welcome.
This Should work
//makes select disabled on load
$('#sizeSelect').attr('disabled', true);
//this function runs on input
$('#weight').on('input', function() {
let val = this.value;
if (val.length > 0) {
$('#sizeSelect').attr('disabled', false);
} else {
$('#sizeSelect').attr('disabled', true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group ">
<span class="input-group-addon white">Weight</span>
<input class="form-control weight" title="Enter the gross weight" type="text" id="weight" />
</div>
</div>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group ">
<span class="input-group-addon white">Barrel Size</span>
<select class="form-control gray" id="sizeSelect" title="Select an option">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
</div>
Yes. your idea of disabling was right. However those disable property change will act only when the change is made in text input. to make the select input disabled by default you have to add the disabled prop on document.ready() or to say, out of the .change() of text input.
jQuery(document).ready(function($){
$("#sizeSelect").prop("disabled", true);
$(".weight").change(function () {
if (this.value <= 0 || this.value == null) {
$("#sizeSelect").prop("disabled", true);
}
else {
$("#sizeSelect").prop("disabled", false);
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group " >
<span class="input-group-addon white" >Weight</span>
<input class="form-control weight" title="Enter the gross weight" type="text" id="weight" />
</div>
</div>
<div class="form-group col-xs-12 col-sm-3">
<div class="input-group ">
<span class="input-group-addon white">Barrel Size</span>
<select class="form-control gray" id="sizeSelect" title="Select an option">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
</div>
You could use keyup
$(document).ready(function(){
$("#sizeSelect").prop("disabled", true)
$(".weight").on("keyup", function() {
var length = $.trim($(this).val()).length === 0;
$("#sizeSelect").prop('disabled', length);
});
});
Related
Here are options (option 0, option 1 and option 2). If option 1 is selected, the videoShowHide should be shown, and hide the onlineShowHide and handoutShowHide.
HTML:
document.getElementById('type').onchange(function() {
if (document.getElementById('type').value === 0) {
document.getElementById('onlineShowHide').classList.add('d-block');
document.getElementById('handoutShowHide').classList.add('d-none');
document.getElementById('videoShowHide').classList.add('d-none');
}
if (document.getElementById('type').value === 1) {
document.getElementById('onlineShowHide').classList.add('d-none');
document.getElementById('handoutShowHide').classList.add('d-block');
document.getElementById('videoShowHide').classList.add('d-none');
}
if (document.getElementById('type').value === 2) {
document.getElementById('onlineShowHide').classList.add('d-none');
document.getElementById('handoutShowHide').classList.add('d-none');
document.getElementById('videoShowHide').classList.add('d-block');
}
})
<div class="col-lg-6 mb-3">
<label for="type" class="form-label">نوع</label>
<select class="form-select" id="type" name="type">
<option value="0">Online</option>
<option value="1">Video</option>
<option value="2">Handout</option>
</select>
</div>
<div class="col-lg-6 mb-3" id="onlineShowHide">
<label for="online" class="form-label">Online</label>
<input type="text" class="form-control" id="online" name="online">
</div>
<div class="col-lg-6 mb-3 d-none" id="videoShowHide">
<label for="video" class="form-label">Video</label>
<input type="file" class="form-control" id="video" name="video">
</div>
<div class="col-lg-6 mb-3 d-none" id="handoutShowHide">
<label for="handout" class="form-label">Handout</label>
<input type="file" class="form-control" id="handout" name="handout">
</div>
To add an event you can do it using addEventListener or assign a function to this event like this: document.getElementById('type').onchange = function() {}.
When you retrieve the value from the #type element it will be a string and not a number.
You are trying to add d-block to the element to show it but you are not removing the already existing d-none class so you should rather remove the d-none class to show the element.
Example:
let onlineShowHide = document.getElementById('onlineShowHide');
let handoutShowHide = document.getElementById('handoutShowHide');
let videoShowHide = document.getElementById('videoShowHide');
let type = document.getElementById('type');
type.onchange = function () {
onlineShowHide.classList.add('d-none');
videoShowHide.classList.add('d-none');
handoutShowHide.classList.add('d-none');
if(type.value === '0') {
onlineShowHide.classList.remove('d-none');
}
if(type.value === '1') {
videoShowHide.classList.remove('d-none');
}
if(type.value === '2') {
handoutShowHide.classList.remove('d-none');
}
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-6 mb-3">
<label for="type" class="form-label">نوع</label>
<select class="form-select" id="type" name="type">
<option value="0">Online</option>
<option value="1">Video</option>
<option value="2">Handout</option>
</select>
</div>
<div class="col-lg-6 mb-3" id="onlineShowHide">
<label for="online" class="form-label">Online</label>
<input type="text" class="form-control" id="online" name="online">
</div>
<div class="col-lg-6 mb-3 d-none" id="videoShowHide">
<label for="video" class="form-label">Video</label>
<input type="file" class="form-control" id="video" name="video">
</div>
<div class="col-lg-6 mb-3 d-none" id="handoutShowHide">
<label for="handout" class="form-label">Handout</label>
<input type="file" class="form-control" id="handout" name="handout">
</div>
I am trying to use the following code which works well. I'm doing a CRUD operation. When I create an object then it works very well. However when I want to edit then this input field was hidden. I want to hide and show based on values.
$(document).ready(function() {
// debugger;
$('#isRequested').change(function() {
if ($(this).val() == "true" && $(this).val() != "select") {
$('.entity').show();
} else {
$('.entity').hide();
}
})
});
$(document).ready(function() {
$('#isApproved').change(function() {
if ($(this).val() != "true" && $(this).val() != "select") {
$('#denial').show();
} else {
$('#denial').hide();
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 row">
<div class="col-md-4">
<label class="col-form-label text-lg-left" asp-for="IsPreviouslyRequestedAssistance"></label>
<select class="form-control click" id="isRequested" asp-for="IsPreviouslyRequestedAssistance">
<option value="select">Please Select</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
<div class="col-md-4 entity showup" style="display:none">
<label id="EntityName" class="col-form-label " asp-for="EntityName"></label>
<input type="text" id="EntityName" asp-for="EntityName" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 row entity" style="display: none">
<div class="col-md-4 ">
<label asp-for="WasApproved" class="col-form-label"></label>
<select id="isApproved" class="form-control " asp-for="WasApproved">
<option value="select">Please Select</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
<div class="col-md-4" id="denial" style="display: none">
<label asp-for="ReasonForDenial" class="col-form-label"></label>
<input type="text" class="form-control" asp-for="ReasonForDenial">
</div>
</div>
</div>
Can you tell me what should I do?
I tried to change the default empty value "" with friendly labels however I was not successful for subcategory and name selects since data is coming dynamically from django. category works fine since there is an empty option when page loads however subcategory and name load on select data-empty_label "----------" instead and no options are visible.
<div class="form-row">
<input type="hidden" name="csrfmiddlewaretoken" value="xxxxx">
<div class="form-group custom-control col-md-3">
<select name="category" class="custom-select custom-select-lg" required id="id_category">
<option value="" selected>---------</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="form-group custom-control col-md-3">
<select name="subcategory" disabled class="custom-select custom-select-lg chained-fk" required id="id_subcategory" data-chainfield="category" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="subcategory">
</select>
</div>
<div class="form-group custom-control col-md-3">
<select name="name" disabled class="custom-select custom-select-lg chained-fk" required id="id_name" data-chainfield="subcategory" data-url="/chaining/filter/xxxxx" data-value="null" data-auto_choose="false" data-empty_label="--------" name="name">
</select>
</div>
<div class="form-group col-md-3">
<input type="submit" value="Submit" class="btn-lg btn-success btn-block">
</div>
</div>
<script>
$(document).ready(function() {
$("select").on("change", function() {
if($("select[name='category']").val() == "") {
$("select[name='category'] > option:first-child").text('Category');
$("select[name='subcategory']").prop('disabled', 'disabled');
$("select[name='subcategory'] > option:first-child").text('Subcategory');
$("select[name='name']").prop('disabled', 'disabled');
$("select[name='name'] > option:first-child").text('Recipe');
} else {
$("select[name='subcategory']").removeAttr("disabled");
$("select[name='subcategory'] > option:first-child").text('Subcategory');
}
}).trigger('change');
$("select[name='subcategory']").on("change", function() {
$("select[name='subcategory'] > option:first-child").text('Subcategory');
if($(this).val() == "") {
$("select[name='name']").prop('disabled', 'disabled');
$("select[name='recipename'] > option:first-child").text('Recipe');
} else {
$("select[name='name']").removeAttr("disabled");
$("select[name='ename'] > option:first-child").text('Recipe');
}
}).trigger('change');
});
</script>
In browser, the HTML is generated dynamically and is rendered as
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status0" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div><div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control"><option value="">Select Relationship</option><option value="Father">Father</option><option value="Mother">Mother</option><option value="Brother">Brother</option><option value="Sister">Sister</option><option value="Spouse">Spouse</option><option value="Guardian">Guardian</option></select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" placeholder="Name"></div><div class="col-sm-2"><input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" placeholder="Contact Number">
</div>
<button value="count-status1" class="remove-relationship-field btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
The code is
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName =$this.find("input[type=text]:first-child").val();
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
I am trying to fetch values of contact numbers i.e with id's relationship-type-contact(n) values in the line "
var relationshipContactNumber =$this.find("input[type=text]:last-child").val();"
This is fetching values of first-child textboxes in the variable relationshipContactNumber in the loop.
Please help !!!
This should work, use the .first() and .last() selectors.
Another way, if you have access to alter the HTML, is to add class names for the input fields and select them by using that instead.
function getData() {
var relationship_details_array = [];
// Relationship details Array
$(".relationship-container").each(function(i, obj) {
var $this = $(this);
$this.find("select").each(function() {
var relationshipTypeValue = $(this).val();
var relationshipName = $this.find("input[type=text]").first().val();
var relationshipContactNumber = $this.find("input[type=text]").last().val();
var innerRelationshipArray = {};
innerRelationshipArray = {
relationshipTypeValue: relationshipTypeValue,
relationshipName: relationshipName,
relationshipContactNumber: relationshipContactNumber
};
relationship_details_array.push(innerRelationshipArray);
});
});
console.log(relationship_details_array);
}
$("#getData").on("click", getData);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="getData">Show data in console log</button>
<div id="dynamic-relationship-details">
<div id="count-status0" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type0" class="form-control">
<option value="">Select Relationship</option>
<option value="Father">Father</option>
<option value="Mother" selected>Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name0" id="relationship-type-name0" class="form-control" value="Mommy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact0" id="relationship-type-contact0" class="form-control" value="1234" placeholder="Contact Number">
</div>
</div>
<div id="count-status1" class="relationship-container form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2">
<select id="relationship-type1" class="form-control">
<option value="">Select Relationship</option>
<option value="Father" selected>Father</option>
<option value="Mother">Mother</option>
<option value="Brother">Brother</option>
<option value="Sister">Sister</option>
<option value="Spouse">Spouse</option>
<option value="Guardian">Guardian</option>
</select>
</div>
<div class="col-sm-3">
<input type="text" name="relationship-type-name1" id="relationship-type-name1" class="form-control" value="Daddy" placeholder="Name">
</div>
<div class="col-sm-2">
<input type="text" name="relationship-type-contact1" id="relationship-type-contact1" class="form-control" value="5678" placeholder="Contact Number">
</div>
</div>
</div>
there is form in my html and I am using default validation "required" field property to validate the fields and checking using $valid at last and calling a function which is not getting invoke. when I removed "batchAttForm.$valid" then funciton is working but with that line its not getiing called. what can be the problem ??
html
<form id="batchAttForm" name="batchAttForm" class="form-horizontal">
<div class="form-group row">
<label class="control-label col-md-1" align="right" for="batchDate"></label>
<label class="control-label col-md-1" align="right" for="batchDate">Date</label>
<div class="col-md-2 ">
<div class="input-group" >
<span class="input-group-btn">
<button class="btn btn-default"><i class="fa fa-calendar"></i></button>
</span>
<input type="text" id="batchDate" ng-change="dateChange()" name="batchDate" ng-model="batch.date" datepicker class="form-control digits" required>
</div>
</div>
<label class="control-label col-md-1" align="right" for="selectBatch">Batch</label>
<div class="col-md-2" >
<select id="selectBatch" name="selectBatch" ng-change="selectedBatch(batch.id)" ng-model="batch.id" class="form-control" required>
<option value="">Select</option>
<option ng-repeat="batch in batch.batches" value="{{batch.id}}">{{batch.batch}}</option>
</select>
</div>
<label class="control-label col-md-1" align="right" for="selectBatch">Timing</label>
<div class="col-md-2 ">
<select id="selectBatch" name="selectBatch" ng-model="batch.time" class="form-control" required>
<option value="">Select</option>
<option ng-repeat="time in batch.times" value="{{batch.time}}">{{time.start_time_string}} - {{time.end_time_string}}</option>
</select>
</div>
</div>
<br>
<div class="form-group form-action">
<label class="control-label col-md-3" align="right" for=""></label>
<div class="col-md-2">
<button type="submit" id="reschedule" ng-click="batchAttForm.$valid && reschedule()" class="btn btn-default"><i class="fa fa-undo"></i> Re-schedule</button>
</div>
<div class="col-md-2" >
<button type="submit" id="punchAtt" ng-click="batchAttForm.$valid && punchAttendance()" class="btn btn-success"> <i class="fa fa-check"></i> Punch </button>
</div>
</div>
</form>
controller
app.controller('batchAttendanceController',function($scope,apiCall) {
$scope.batch = {};
$scope.batch.date = moment().format("DD-MM-YYYY");
//methods
$scope.selectedBatch = selectedBatch;
$scope.punchAttendance = punchAttendance;
$scope.reschedule = reschedule;
$scope.dateChange = dateChange;
function punchAttendance() {
console.log("foo");
}
function reschedule() {
console.log("bar");
}
function dateChange() {
initController($scope.batch.date);
}
function selectedBatch(batch_id) {
var b = $scope.batch.batches;
for (var i=0; i < b.length; i++) {
if (b[i].id == batch_id) {
for (var j=0; j < b[i].batch_time.length; j++) {
b[i].batch_time[j].start_time_string = moment(b[i].batch_time[j].start_time,"HH:mm:ss").format("hh:mm A");
b[i].batch_time[j].end_time_string = moment(b[i].batch_time[j].end_time,"HH:mm:ss").format("hh:mm A");
}
$scope.batch.times = b[i].batch_time;
} else {
$scope.batch.times = [];
}
}
}
});
The reason for error is, you have two form elements select with same name and idattribute . This is the reason, your form is always invalid. .
<label class="control-label col-md-1" align="right" for="selectBatch">Batch</label>
<div class="col-md-2" >
<select id="selectBatch" name="selectBatch" ng-change="selectedBatch(batch.id)" ng-model="batch.id" class="form-control" required>//same name and id
<option value="">Select</option>
<option ng-repeat="batch in batch.batches" value="{{batch.id}}">{{batch.batch}}</option>
</select>
</div>
<label class="control-label col-md-1" align="right" for="selectBatch">Timing</label>
<div class="col-md-2 ">
<select id="selectBatch" name="selectBatch" ng-model="batch.time" class="form-control" required>//same name and id
<option value="">Select</option>
<option ng-repeat="time in batch.times" value="{{batch.time}}">{{time.start_time_string}} - {{time.end_time_string}}</option>
</select>
</div>
Try using the ng-click as ng-submit in form element and remove ng-click in button