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>
Related
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 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);
});
});
I have some div that will show depending on the select value. Suppose there are two input fields name 'Apartment and Bechelor' If I select 'Apartment' some div and select field will show related to the apartment. The problem I am facing is, I can't clear the field value when selecting another. Like, after selecting 'Apartment', I will select Bachelor. Now it should be clear the value of the field which was under the apartment so that If I again select 'Apartment', I will get default values or clean fields.
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>
<script>
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
}
else{
$('#flat-type').hide();
}
});
var showDiv = document.getElementById("tenant-type");
showDiv.onchange = function(){
var hiddenDiv = document.getElementById("flat-type");
hiddenDiv.style.display = (this.value == "family") ? "block":"none";
var genderDiv = document.getElementById("gender");
genderDiv.style.display = (this.value == "bechelor") ? "block":"none";
};
$('.pretty input[type="radio"]').click(function(){
if($(this).attr('value') == 'bachelor' || $(this).attr('value') == 'sublet' || $(this).attr('value') == 'hostel' ){
$('#r-type').show();
$('#tenant').show();
$('#tenant-type').hide();
}
else{
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-type').show();
}
});
});
</script>
to reset the dropdown options you can set the value of the select elements selectIndex property to 0 with this line:
$('.form-control').prop('selectedIndex', 0);
and in your code:
$(document).ready(function(){
$('#r-type').hide();
$('#tenant').hide();
$('#tenant-flat').hide();
$('#flat-type').hide();
$('#residential input[type="radio"]').click(function(){
if($(this).attr('value') == 'apartment'){
$('#tenant-flat').show();
$('#flat-type').show();
$('#r-type').hide();
$('#tenant').hide();
}
else{
$('#r-type').show();
$('#tenant').show();
$('#flat-type').hide();
$('#tenant-flat').hide();
}
$('.form-control').prop('selectedIndex', 0);
});
$('#tenent-type').on('change', function() {
if($('#flat-type').val =='family') {
$('#flat-type').show();
} else {
$('#flat-type').hide();
}
if($('#gender').val =='bechelor') {
$('#gender').show();
} else {
$('#gender').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="residential" >
<input type="radio" value="apartment" id="type_apartment" name="type" >
<label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
<input type="radio" value="bachelor" id="type_bachelor" name="type">
<label for="type_bachelor" class="radio-inline"> Bechelor </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
<select id="tenant-type" class="form-control" name="tenant">
<option value="">Anyone</option>
<option value="family">Family</option>
<option value="bechelor" >Bechelor</option>
</select>
</div>
<div class="form-group " id="flat-type">
<div class="col-sm-12">
<select id="" class="form-control" name="flat-type">
<option value="">Select Flat Type</option>
<option value="sublet" >Sublet</option>
<option value="full-flat" >Full Flat</option>
</select>
</div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
<div class="col-sm-12">
<select id="room" class="form-control" name="room_type">
<option value="">Select Room Type</option>
<option value="seat">Seat</option>
<option value="room" >Room</option>
</select>
</div>
</div>
<div class="form-group " id="tenant">
<div class="col-sm-12">
<select id="" class="form-control" name="tenant">
<option value="">Select Member</option>
<option value="family" >Family</option>
<option value="student" >Student</option>
<option value="job-holder" >Job Holder</option>
</select>
</div>
</div>
This is my html code(1st TRY)
<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select No</label>
<select class="form-control" v-model="or" required="">
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:href="'/recorddetails/'+aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>
So, based on the dropdown, If I select a particular value, I need to move to the recorddetails page with its docId.
When I try this code it is not working.
I also tried the following code(2nd TRY)
<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select No</label>
<select class="form-control" v-model="or" required="" #change="orCost()">
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:href="'/recorddetails/'+aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>
My vue js code is
methods:{
orCost: function(e) {
var vm = this;
data = {};
data['or'] = this.or;
$.ajax({
url: '/recorddetails/'+this.or,
data: data,
type: "GET",
dataType: 'json',
success: function(e) {
if (e.status)
{
}
else {
}
}
});
return false;
},
},
The problem is I am not able to redirect to the recorddetails page.
Please help me to redirect to the recorddetails page. I am able to get the docId value and all in the orCost(), but they are not redirecting. Please help me to redirect
You are trying too complicated I guess. Just try this
I have included a form also added a name as no.
<form method="post" action="/recorddetails/" name="myform" class=" form-inline" >
<div class="col-md-4" >
<div class="form-group label-floating">
<label class="control-label">Select Or No</label>
<select class="form-control" name="no" v-model="or" required="" >
<option value="" selected disabled hidden>Choose Type here</option>
<option v-for="aon in data" v-bind:value="aon.docId" >{{aon.orno}}</option>
</select>
</div>
</div>
<button class="btn search-btn" type="submit"><i class="fa fa-search"></i></button>
</form>
I have this code:
<div class="form-group">
<label for="slDisThrough" class="col-sm-1 control-label">Distributed Through</label>
<div class="col-sm-11">
<select name="slDisThrough" id="slDisThrough" class="form-control">
<option value="0">-Select-</option>
<option value="1">Agent</option>
<option value="2">Retail</option>
</select>
</div>
</div>
<div id="slAgentID" class="hide">
<div class="form-group">
<label for="slAgent" class="col-sm-1 control-label">Agent</label>
<div class="col-sm-11">
<select name="slAgent" class="form-control">
<option value="0">-Select-</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
</div>
</div>
</div>
<div id="slRetailID" class="hide">
<div class="form-group">
<label for="slRetail" class="col-sm-1 control-label">Retail</label>
<div class="col-sm-11">
<select name="slRetail" class="form-control">
<option value="0">-Select-</option>
<option value="1">Hide</option>
<option value="2">Show</option>
</select>
</div>
</div>
</div>
Check this Fiddle
if(document.getElementById("slDisThrough").selectedIndex == 1) {
document.getElementById("slAgentID").style.display = ""; }
else { document.getElementById("slAgentID").style.display = "none"; }
if(document.getElementById("slDisThrough").selectedIndex == 2) {
document.getElementById("slRetail").style.display = ""; }
else { document.getElementById("slRetail").style.display = "none"; }
I need to Show/Hide the DIVs on Selected Value, I was previously using it with JavaScript, but stuck with Bootstrap.
Since you load jQuery, better use it like this:
$('#slDisThrough').on('change', function(){
if ($(this).val() == 1 ) {
$('#slAgentID').removeClass('hide');
$('#slRetailID').addClass('hide');
}
if ($(this).val() == 2 ) {
$('#slAgentID').addClass('hide');
$('#slRetailID').removeClass('hide');
}
})
Jsfiddle here