jQuery: hiding form elements doesn't work - javascript

I have this form where I want to hide specific parts of it based on the subsubcategory_id selected but I can't seem to make it work.
I have a script that changes subcategory based on category selected and another one that changes subsubcategory based on subcategory selected.
The script for hiding parts of the form works but only for category that comes from the DB and not for subsubcategory that is affected by the first script. The value of the option element in the select just seems to register as empty for the 2nd script. What should I do to fix it?
<script type="text/javascript">
$(document).ready(function() {
$('select[name="category_id"]').on('change', function() {
var category_id = $(this).val();
if (category_id) {
$.ajax({
url: "{{ url('/category/subcategory/subsubcategory') }}/" + category_id,
type: "GET",
dataType: "json",
success: function(data) {
$('select[name="subsubcategory_id"]').html('');
var d = $('select[name="subcategory_id"]').empty();
$.each(data, function(key, value) {
$('select[name="subcategory_id"]').append(
'<option value="' + value.id + '">' + value
.subcategory_name + '</option>');
});
},
});
} else {
alert('danger');
}
});
$('select[name="subcategory_id"]').on('change', function() {
var subcategory_id = $(this).val();
if (subcategory_id) {
$.ajax({
url: "{{ url('/category/subcategory/subsubcategory/product') }}/" +
subcategory_id,
type: "GET",
dataType: "json",
success: function(data) {
var d = $('select[name="subsubcategory_id"]').empty();
$.each(data, function(key, value) {
$('select[name="subsubcategory_id"]').append(
'<option value="' + value.id + '">' + value
.subsubcategory_name + '</option>');
});
},
});
} else {
alert('danger');
}
});
});
</script>
// script to hide parts of the form
<script>
$(document).ready(function() {
$('#fieldLaptop').hide();
$('#fieldTablet').hide();
$('#fieldPhone').hide();
$("#test").change(function() {
var subsubcategory_id = $(this).val();
if (subsubcategory_id == 1) {
$('#fieldLaptop').show();
$('#fieldTablet').hide();
$('#fieldPhone').hide();
} else if (subsubcategory_id == 2) {
$('#fieldLaptop').hide();
$('#fieldTablet').show();
$('#fieldPhone').hide();
} else if (subsubcategory_id == 3) {
$('#fieldLaptop').hide();
$('#fieldTablet').hide();
$('#fieldPhone').show();
} else {
$('#fieldLaptop').hide();
$('#fieldTablet').hide();
$('#fieldPhone').hide();
}
});
});
$("#test").trigger("change");
</script>
<form method="post" action="{{ route('product-store') }}" enctype="multipart/form-data">
#csrf
<div class="row mbn-20">
<div class="col-3 mb-20">
<label for="formLayoutUsername3">Brand</label>
<select name="brand_id" class="form-control">
<option value="" selected="" disabled="">Brand</option>
<option value="{{ $brand->id }}">
{{ $brand->brand_name }}
</option>
#endforeach
</select>
#error('brand_id')
<span class="text-danger"><strong>{{ $message }}</strong></span>
#enderror
</select>
</div>
<div class="col-3 mb-20">
<label for="formLayoutEmail3">Categorie</label>
<select name="category_id" class="form-control">
<option value="" selected="" disabled="">Category
</option>
<option value="{{ $category->id }}">
{{ $category->category_name }}
</option>
#endforeach
</select>
#error('category_id')
<span class="text-danger"><strong>{{ $message }}</strong></span>
#enderror
</div>
<div class="col-3 mb-20">
<label for="formLayoutPassword3">SubCategory</label>
<select name="subcategory_id" class="form-control">
<option value="" selected="" disabled="">Select SubCategory
</option>
</select>
#error('subcategory_id')
<span class="text-danger"><strong>{{ $message }}</strong></span>
#enderror
</div>
<div class="col-3 mb-20">
<label for="formLayoutAddress1">SubSubCategory</label>
<select name="subsubcategory_id" class="form-control" id="test">
<option value="" selected="" disabled="">Select SubSubCategory
</option>
</select>
#error('subsubcategory_id')
<span class="text-danger"><strong>{{ $message }}</strong></span>
#enderror
</div>
</form>

Based on your explanation, I think you're looking for this:
$(document).on('change', '[data-child]', function() {
const selected_group = $(this).val();
let el = $(`#${$(this).attr("id")}`);
if (selected_group === null) {
el.hide();
} else {
el.show();
}
let child_select = $("#" + $(this).attr("data-child"));
value = child_select.find("option").hide().filter(function(i, e) {
return $(e).val().startsWith(selected_group);
}).show().eq(0).val();
child_select.val(value);
child_select.trigger("change");
});
$("[data-child]").eq(0).trigger("change");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row m-4 justify-content-center">
<div class="col-3">
<span>Operating system</span>
<select data-child="niv1" class="selectdata form-control custom-select">
<option value="1-1">Android</option>
<option value="1-2">Linux</option>
<option value="1-3" selected>Windows</option>
</select>
</div>
<div class="col-3">
<span>System version</span>
<select id="niv1" data-child="niv2" class="selectdata form-control custom-select">
<option data-group="1-1" value="1-1-1">9.0 Pie</option>
<option data-group="1-2" value="1-2-1">Ubuntu</option>
<option data-group="1-3" value="1-3-1">Windows 7</option>
<option data-group="1-3" value="1-3-2">Windows 8</option>
<option data-group="1-3" value="1-3-3">Windows 10</option>
</select>
</div>
<div class="col-3">
<span>Edition</span>
<select id="niv2" data-child="niv3" class="selectdata form-control custom-select">
<option data-group="1-2-1" value="1-2-1-1">Trusty Tahr</option>
<option data-group="1-2-1" value="1-2-1-2">Xenial Xerus</option>
<option data-group="1-2-1" value="1-2-1-3">Bionic Beaver</option>
<option data-group="1-3-1" value="1-3-1-1">Windows 7 Home</option>
<option data-group="1-3-1" value="1-3-1-2">Windows 7 Pro</option>
<option data-group="1-3-2" value="1-3-2-1">Windows 8 Home</option>
<option data-group="1-3-2" value="1-3-2-2">Windows 8 Pro</option>
<option data-group="1-3-3" value="1-3-3-1">Windows 10 Home</option>
<option data-group="1-3-3" value="1-3-3-2">Windows 10 Pro</option>
</select>
</div>
<div class="col-3">
<span>Build</span>
<select id="niv3" data-child="niv4" class="selectdata form-control custom-select">
<option data-group="1-2-1-2" value="1-2-1-2-1">18.04 LTS</option>
<option data-group="1-3-1-1" value="1-3-1-1-1">Win 7 Home - A</option>
<option data-group="1-3-1-1" value="1-3-1-1-2">Win 7 Home - B</option>
<option data-group="1-3-1-2" value="1-3-1-2-1">Win 7 Pro - A</option>
<option data-group="1-3-1-2" value="1-3-1-2-2">Win 7 Pro - B</option>
<option data-group="1-3-2-1" value="1-3-2-1-1">Win 8 Home - A</option>
<option data-group="1-3-2-1" value="1-3-2-1-2">Win 8 Home - B</option>
<option data-group="1-3-2-2" value="1-3-2-2-1">Win 8 Pro - A</option>
<option data-group="1-3-2-2" value="1-3-2-2-2">Win 8 Pro - B</option>
<option data-group="1-3-3-1" value="1-3-3-1-1">Win 10 Home - A</option>
<option data-group="1-3-3-1" value="1-3-3-1-2">Win 1 Home - B</option>
<option data-group="1-3-3-2" value="1-3-3-2-1">Win 10 Pro - A</option>
<option data-group="1-3-3-2" value="1-3-3-2-2">Win 10 Pro - B</option>
</select>
</div>
</div>

So this is the way to make it work. If there is only one option You should probably trigger it manually after putting stuff in it so it runs with the first chosen option
The change is only called when the user changes it, and not after the AJAX runs. So in your case, you probably always want to call change to make sure your UI is in sync with what came from the server initially
$('select[name="subcategory_id"]').on('change', function() {
var subcategory_id = $(this).val();
if (subcategory_id) {
$.ajax({
url: "{{ url('/category/subcategory/subsubcategory/product') }}/" +
subcategory_id,
type: "GET",
dataType: "json",
success: function(data) {
var d = $('select[name="subsubcategory_id"]').empty();
$.each(data, function(key, value) {
$('select[name="subsubcategory_id"]').append(
'<option value="' + value.id + '">' + value
.subsubcategory_name + '</option>');
});
// the tigger is set here for one option in the select !!!
$("#test").trigger("change");
},
});
} else {
alert('danger');
}
});
Then if there are multiple options the user will trigger them after so the first (initial) code would work.

Related

Appending options to select doesn't work. Does CSS responsible for this?

I have two dropdowns. The options of the latter are dependent on the values of the first.
<div class="col-lg-6 col-md-6 col-sm-6">
<select id="area" name="area" required>
<option value="">Select Area</option>
<option value="1">Area I: Vision, Mission, Goals, and Objectives</option>
<option value="2">Area II: Faculty</option>
<option value="3">Area III: Curriculum and Instruction</option>
<option value="4">Area IV: Support to Students</option>
<option value="5">Area V: Research</option>
<option value="6">Area VI: Extension and Community Involvement</option>
<option value="7">Area VII: Library</option>
<option value="8">Area VIII: Physical Plant and Facilities</option>
<option value="9">Area IX: Laboratories</option>
<option value="10">Area X: Administration</option>
</select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<select id="parameter" name="parameter" required>
<option value="">Select Parameter</option>
</select>
</div>
I tried this javascript below but the problem is the options do not append to the second select even if I tried displaying the values using alert which works perfectly fine.
Does the CSS responsible for this?
<script type="text/javascript">
$('#area').on('change', function(){
console.log($('#area').val());
$('#parameter').html('');
var area = $('#area').val();
if(area == ""){
$('#parameter').append('<option value="">Select Area first</option>');
}else{
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>search/getParameters',
data: {area: area},
dataType: "json",
success: function(data){
$('#parameter').append('<option value=""></option>');
for (var i = 0; i < data.length; i++) {
alert(data[i])
$('#parameter').append('<option value="' + i + '">' + data[i] + '</option>');
}
}
});
}
});
</script>

jQuery - dropdown ajax show/hide

I have this problem ... I want to make the show hide some dropdowns with ajax, I don't know where to place the show hide code ... it only shows the first country, after selecting the country will appear and choose the city state to appear. ... can you help me fix this code?
this is my code and script
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value disabled selected>Select Country</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["id"]; ?>"><?php echo $country["country_name"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox" onChange="getCity(this.value);">
<option value="">Select State</option>
</select>
</div>
<div class="row">
<label>City:</label><br/>
<select name="city" id="city-list" class="demoInputBox">
<option value="">Select City</option>
</select>
</div>
</div>
function
getState(val) {
$.ajax({
type: "POST",
url: "getState.php",
data: 'country_id=' + val,
success: function(data) {
$("#state-list").html(data);
getCity();
}
});
}
function
getCity(val) {
$.ajax({
type: "POST",
url: "getCity.php",
data: 'state_id=' + val,
success: function(data) {
$("#city-list").html(data);
}
});
}
You can use .prop for that. You can refer here.
You must start your script with $(document).ready(function()) so that JS will know if the page is loaded and ready.
Then consider this logic here. (Example code)
if($("#country-list option:selected").index() == 0){
$("#state-list").prop("hidden", true);
}else{
$("#state-list").prop("hidden", false);
}
The code above actually checks if the country-list items is not selected when the page loaded, the other dropdown will consider it as hidden, or else it is shown.
Add a hidden class to state and city drop-downs in HTML to hide them from initial state.
Display the state drop-down when country is selected.
If 'Select' option is selected/ value is cleared, then add the hidden class to the cascading drop-downs
var
stateContainer = $('.state-container'),
cityContainer = $('.city-container'),
countryList = $('#country-list'),
stateList = $('#state-list'),
cityList = $('#city-list');
countryList.on('change', function() {
if (this.value === '') {
stateContainer.addClass('hidden');
cityContainer.addClass('hidden');
stateList.val('');
cityList.val('');
} else {
stateContainer.removeClass('hidden');
//getState(this.value);
}
});
stateList.on('change', function() {
if (this.value === '') {
cityContainer.addClass('hidden');
cityList.val('');
} else {
cityContainer.removeClass('hidden');
//getCity(this.value);
}
});
.hidden {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" >
<option value="" selected>Select Country</option>
<option value="A">Country A</option>
</select>
</div>
<div class="row state-container hidden">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox" >
<option value="">Select State</option>
<option value="A">State A</option>
</select>
</div>
<div class="row city-container hidden">
<label>City:</label><br/>
<select name="city" id="city-list" class="demoInputBox">
<option value="">Select City</option>
<option value="A">City A</option>
</select>
</div>
</div>

How can I choose a time once and give that time to all the days in vue js html?

Currently I am using the following code
<form method="POST" id="form3" onSubmit="return false;" data-parsley-validate="true" v-on:submit="invSubmit($event);">
<h4 class="info-text">Give your Inventory and Work Hours ? </h4>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Working Hours :</label>
<div v-for="value in day" class="checkboxFour">
<input type="checkbox" id="need" value="value.val" v-model="value.selected" style="width: 10%!important;">
<label for="need" style=" width: 30%!important;">{{value.name}}</label>
<select v-model="value.from" class="select-style" v-bind:class="{required: isRequired}" required="">From
<option value="08:00">08.00</option>
<option value="09:00">09.00</option>
<option value="10:00">10.00</option>
<option value="11:00">11.00</option>
<option value="12:00">12.00</option>
<option value="13:00">13.00</option>
<option value="14:00">14.00</option>
<option value="15:00">15.00</option>
<option value="16:00">16.00</option>
<option value="17:00">17.00</option>
<option value="18:00">18.00</option>
<option value="19:00">19.00</option>
<option value="20:00">20.00</option>
<option value="21:00">21.00</option>
<option value="22:00">22.00</option>
<option value="23:00">23.00</option>
<option value="00:00">00.00</option>
<option value="01:00">01.00</option>
<option value="02:00">02.00</option>
<option value="03:00">03.00</option>
<option value="04:00">04.00</option>
<option value="05:00">05.00</option>
<option value="06:00">06.00</option>
<option value="07:00">07.00</option>
</select>
<select v-model="value.to" class="select-style" required="">To
<option value="17:00">17.00</option>
<option value="18:00">18.00</option>
<option value="19:00">19.00</option>
<option value="20:00">20.00</option>
<option value="21:00">21.00</option>
<option value="22:00">22.00</option>
<option value="23:00">23.00</option>
<option value="00:00">00.00</option>
<option value="01:00">01.00</option>
<option value="02:00">02.00</option>
<option value="03:00">03.00</option>
<option value="04:00">04.00</option>
<option value="05:00">05.00</option>
<option value="06:00">06.00</option>
<option value="07:00">07.00</option>
<option value="08:00">08.00</option>
<option value="09:00">09.00</option>
<option value="10:00">10.00</option>
<option value="11:00">11.00</option>
<option value="12:00">12.00</option>
<option value="13:00">13.00</option>
<option value="14:00">14.00</option>
<option value="15:00">15.00</option>
<option value="16:00">16.00</option>
</select>
<br>
</div>
</div>
</div>
<div class="wizard-footer">
<div class="pull-right">
<button type="submit" class='btn btn-next btn-primary' name='next' value='Next'>Next</button>
</div>
</div>
</div></form>
When I do this way I need to select working hours for each checkbox I am using. This is time consuming. I need to firstly choose a working hour and automatically choose that working hour for the checkboxes I am choosing. If I need to change a particular time for a checkbox, I need to do that too. How Can I able to achieve the same.
My vue js code is
submitBox = new Vue({
el: "#submitBox",
data: {
data: [],
day:[
{name:"Sunday",val:1},
{name:"Monday",val:2},
{name:"Tuesday",val:3},
{name:"Wednesday",val:4},
{name:"Thursday",val:5},
{name:"Friday",val:6},
{name:"Saturday",val:7}
],
string:'',
},
methods: {
invSubmit: function(e) {
var arr = [];
this.day.map(function(v,i) {
console.log(v.selected == true,);
if(v.selected == true)
{
arr.push(v.val+'&'+v.from+'&'+v.to);
}
});
this.string = arr.join(',');
var vm = this;
data = {};
data['inv'] = this.inv.join(',');
data['wrk_list'] = this.string;
data['pid'] = this.pid;
data['auth-token'] = this.authType;
$.ajax({
url: 'http://127.0.0.1:8000/alpha/add/post/inv_whr/',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
if (e.status)
{
$("#alertModal").modal('show');
$(".alert").removeClass("hidden").html("Your data has been successfully recorded");
}
else {
vm.response = e;
alert("Registration Failed")
}
}
});
return false;
},
}
I need to pass the data in the following format v.val+'&'+v.from+'&'+v.to. I t is been done as the above code.
How can I able to select a working hour first and then choose the days. If I need to change a workhour for a particular day, I need to do that too.
Please help me to have a solution. I am weak in js. This is the first time I am doing a project. Please help me to obtain a solution.

Select option values changing on user select

I'm making a Laravel 5.4 application where users has to select a school and class, when registering their account. I want some JavaScript (JQuery) to change the classes selection option values after which school the user selects.
Which means that $class->school_id has to be equal to the id of the selected school, for the class to show up as an option.
My view:
<select name="school_id" class="form-control" required>
<option value="" disabled selected>Pick your school</option>
#foreach ($schools as $school)
<option value="{{ $school->id }}" required>{{ $school-> name}}</option>
#endforeach
</select>
<select name="my_class" class="form-control">
<option value="" disabled selected>Pick your class</option>
#foreach($classes as $class)
<option value="{{$class->id}}">{{$class->name}}</option>
#endforeach
</select>
you should add an ajax technology for this ..
FORM
<select name="school_id" id="school_id" class="form-control" required>
<option value="" disabled selected>Pick your school</option>
#foreach ($schools as $school)
<option value="{{ $school->id }}" required>{{ $school-> name}}</option>
#endforeach
</select>
<select name="my_class" id="my_class" class="form-control"></select>
JS
$(document).on('change','#school_id',function(){
var school_id = $(this).val();
$.ajax({
url: "/getSchoolClass",
data: {school_id: school_id},
dataType: ,
success: function(response){
var newOptions = '<option value="" disabled selected>Pick your class</option>';
$( response.data ).each(function( index ) {
newOptions += '<options value="' + $(this).id + '">' + $(this).name + '</option>';
});
$('#my_class').html(newOptions);
}
});
});
ROUTE
Route::post('/getSchoolClass','SomeController#someFunction');
CONTROLLER
function someFuntion(Request $request)
{
$data = SchoolClass::where('school_id','=',$request->school_id)->get();
return $data;
}

Product Filtering PHP

Hello guys I'm doing a product filtering and I don't know how could I achieve it.
I used Javascript by getting the value of the selected values then alert it but the problem is that how could I display it also how can I remove the categories selected by clicking the x button. Here the sample page. Thank you very much for your help.
Here is my script code:
<script>
jQuery("#filter").val()
jQuery(function(){
jQuery( ".product-line" ).each(function( index ) {
var url = '<?php echo $upload_url; ?>';
var desc_id = jQuery(this).eq(0).find('.prod-desc').attr('id');
if(desc_id){
var file_url = url + desc_id + '/description.html';
jQuery('#'+desc_id).eq(0).load( file_url );
}
});
jQuery("#brand,#screen_size,#cpu,#memory,#price").change(function() {
        var brand = jQuery("#brand").val();
var screen_size = jQuery("#screen_size").val();
var cpu = jQuery("#cpu").val();
var memory = jQuery("#memory").val();
var price = jQuery("#price").val();
var categories =[];
if(brand)
{
categories.push(brand);
}
if(screen_size)
{
categories.push(screen_size);
}
if(cpu)
{
categories.push(cpu);
}
if(memory)
{
categories.push(memory);
}
if(price)
{
categories.push(price);
}
length = categories.length;
categories2 = categories.toString();
alert(categories2);
var categories3="";
for(var i = 0; i < length; i++){
categories3 += "<div class='filter_style'>"+categories[i]+"<span style='margin-left:15px;color:gray;'>x</span></div>";
jQuery("#filter").html(categories3);
}
      });
});
</script>
 My HTML Code:
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="brand" >
<option value="">Select a Brand</option>
<option value="Lenovo">Lenovo</option>
<option value="Acer">Acer</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="screen_size" style="margin-top:0px;">
<option value="">Select a Screen Size</option>
<option value="Small">Small</option>
<option value="Large">Large</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="cpu">
<option value="">Select a CPU</option>
<option value="Intel">Intel</option>
<option value="Amd">Amd</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="memory">
<option value="">Select a Memory</option>
<option value="500mb">500mb</option>
<option value="1tb">1tb</option>
</select>
</div>
<div style="margin-bottom:5px;">
<select class="form-control product-type" id="price">
<option value="">Filter by Price</option>
<option value="10000">10000</option>
<option value="20000">20000</option>
</select>
</div>
</div>
There is possibilities, I will UPDATE the answer if it wasn't correct.
But first can you help what will you get after you run this code?
jQuery("#brand,#screen_size").change(function() {
var brand = jQuery("#brand").val();
var screen_size = jQuery("#screen_size").val();
console.log(brand);
console.log(screen_size);
});

Categories