Develop Reference

Clicking a label text

Wrote html code that changes the color of the page when selected from a drop down menu. In this assignment I must fix the "color" label so that when I click on it it brings up the selection of colors. I can't seem to find a way to accomplish this. I've tried to maybe wrap the the label tags in other tags but none seem to work.
function changeColor() {
const color = document.getElementById("colors").value;
document.body.style.backgroundColor = color;
}
<div class="container-fluid">
<form>
<div class="form-group row">
<label class="col col-form-label col-4" >Color</label>
<div class="col col-4">
<select name="colors" id="colors" class="form-control">
<option selected>Select...</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
</div>
<!-- Above this is the section for you to edit -->
<div class="form-group row">
<div class="col">
<button type="button" class="btn btn-primary" onclick="changeColor()">Go</button>
</div>
</div>
</form>
</div>

function changeColor() {
var e = document.getElementById("colors");
var color = e.options[e.selectedIndex].text;
document.body.style.backgroundColor = color;
}
<div class="container-fluid">
<form>
<div class="form-group row">
<label class="col col-form-label col-4">Color</label>
<div class="col col-4">
<select name="colors" id="colors" class="form-control">
<option selected>Select...</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
</div>
<!-- Above this is the section for you to edit -->
<div class="form-group row">
<div class="col">
<button type="button" class="btn btn-primary" onclick="changeColor()">Go</button>
</div>
</div>
</form>
</div>

how to apply reset button selected value

code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
<div style="margin-top:2%;display:none; " id="filt_box" id="reset">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown" id="filter_seller_user" name="filter_seller_user[]"
multiple="multiple">
#foreach($seller_user as $key=>$value)
<option value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown" id="filter_generated_by_user"
name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="btn_filter_submit" onclick="show_reset_data();">Clear</button>
</div>
</div>
using multiple try javascript code but not apply any changes
<script src="{{asset('assets/js/jquery.min.js')}}"></script>
<script>
function show_reset_data() {
$("reset").each(function() { this.selectedIndex = 0 });
}
function show_reset_data() {
document.getElementById("reset").reset();
}
function show_reset_data() {
document.getElementById("reset").value="";
}
</script>

I inserted class="reset" in each selected field means input field and button clear Id="reset" create and simple write javascript code.
<div style="margin-top:2%;display:none; " id="filt_box">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown reset" id="filter_seller_user" name="filter_seller_user[]" multiple="multiple">
#foreach($seller_user as $key=>$value)
<option style = "font-size:13px;" value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown reset" id="filter_generated_by_user" name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option style = "font-size:13px;" value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option style = "font-size:13px;" value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control reset">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="reset" style="background-color: #ae3029; color:white;">Clear</button>
</div>
javascript code
$("#reset").on('click', function () {
$('.reset').val('');
});

How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?

this is my JavaScript code. i tried my best can anyone help me.How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to .
$(document).ready(function() {
$("body").on("click",".add-more",function(){
var html = $(".after-add-more").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".after-add-more").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".after-add-more").remove();
});
});
<div class="col-md-12 col-xl-12 col-lg-12">
<div class="after-add-more">
<div class="row">
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Categories</label>
<select class="selectpicker category form-control #error('category_id') is-invalid #enderror" name="category_id[]">
<option>Select Category</option>
#foreach($categories as $category)
<option value="{{$category->id}}" >{{$category->cat_name}}</option>
#if(count($category->childs))
#foreach($category->childs as $cat)
<option class="sub_child" value="{{$cat->id}}">-- {{$cat->cat_name}}</option>
#endforeach
#endif
#endforeach
</select>
#error('category_id')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
#enderror
</div>
</div>
<div class="col-lg-2 col-xl-2 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Qty</label>
<input type="number" name="qty[]" class="form-control #error('qty') is-invalid #enderror" placeholder="Qty on combo" value="{{ old('qty') ?? 1 }}" required data-error="This field is required." />
<div class="help-block with-errors"></div>
#error('qty')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
#enderror
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Products</label>
<select class="products selectpicker form-control #error('product_id') is-invalid #enderror" multiple name="product_id[]">
</select>
#error('product_id')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
#enderror
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o change">
<label for=""> </label><br/>
<a class="btn btn-success add-more">+ Add More</a>
</div>
</div>
</div>
</div>
</div>

$(document).ready(function() {
$("body").on("click",".add-more",function(){
var html = $(".after-add-more").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".after-add-more").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".after-add-more").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 col-xl-12 col-lg-12">
<div class="after-add-more">
<div class="row">
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Categories</label>
<select class="selectpicker category form-control" name="category_id">
<option>Select Category</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option class="sub_child" value="1"> 1</option>
<option class="sub_child" value="2"> 2</option>
<option class="sub_child" value="3"> 3</option>
</select>
<span class="invalid-feedback" role="alert"><strong></strong></span>
</div>
</div>
<div class="col-lg-2 col-xl-2 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Qty</label>
<input type="number" name="qty" class="form-control" placeholder="Qty on combo" value="1" required data-error="This field is required." />
<div class="help-block with-errors"></div>
<span class="invalid-feedback" role="alert"><strong></strong></span>
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Products</label>
<select class="products selectpicker form-control is-invalid" multiple name="product_id">
<option value="a" >a</option>
<option value="b" >a</option>
<option value="c" >c</option>
<option value="d" >d</option>
<option value="e" >e</option>
</select>
<span class="invalid-feedback" role="alert"><strong></strong></span>
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o change">
<label for=""> </label><br/>
<a class="btn btn-success add-more">+ Add More</a>
</div>
</div>
</div>
</div>
</div>

Get selected value from drop down and pass selected value into submit button in php

I have two drop down from two different array.
i want to get/store selected value from drop down. so that i can pass/send selected value in submit button (href)
Example:supoose user select email as 123 and center as "training",so i need to pass thoes two value in submit button like below-
<main role="main">
<div class="row">
<div class="col-md-12">
<h4 class="heading-theme page-header pdt">Create Email Template</h4>
<span class="border-bottom display-block mb-20"></span>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3 col-md-12 mb-1">
<select class="custom-select" id="status" title="Status">
<option value="" selected>Select Template</option>
<?php
foreach ($emailTemplate as $row) {
?>
<option value="<?= $row['temp_desc'] ?>"><?= $row['temp_desc'] ?></option>
<?php
}
?>
</select>
</div>
<div class="col-lg-3 col-md-12 mb-1">
<select class="custom-select" id="status" title="Status">
<option value="" selected>Select Center</option>
<?php
foreach ($trainingCenter as $row) {
?>
<option value="<?= $row['organization_name'] ?>"><?= $row['organization_name'] ?></option>
<?php
}
?>
</select>
</div>
<div class="col-lg-4"></div>
</div>
<div>
<div class="row">
<div class="col-md-12">
<div class="mt-2"><a href=" /Mycenter/testmailtemplate/value1/value2" class="text-default btn btn-sm pri-btn pt-2 mr-3 ">
Submit
</a>
</div>
</div>
</div>
</main>

You can get both selected values using each loop inside some variable then split that values and finally add them to href of your tag.
Demo Code :
$("select").on("change", function() {
var values = "";
//traverse through all selects
$(".status").each(function() {
//separate values using "."
values += $(this).val() + ".";
})
//split values
var new_values = values.split(".");
var select_text= $('#status :selected').text();//getting selected text
$new_href = "/Mycenter/testmailtemplate/" + new_values[0] + "/" + new_values[1]+"/"+ select_text;
//add value to your href
$(".pri-btn").attr("href", $new_href)
console.log($new_href)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
<div class="row">
<div class="col-md-12">
<h4 class="heading-theme page-header pdt">Create Email Template</h4>
<span class="border-bottom display-block mb-20"></span>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3 col-md-12 mb-1">
<!--added class="status"-->
<select class="custom-select status" id="status" title="Status">
<option value="" selected>Select Template</option>
<option value="1">1th</option>
<option value="2">2th</option>
<option value="3">3th</option>
</select>
</div>
<div class="col-lg-3 col-md-12 mb-1">
<!--added class="status"-->
<select class="custom-select status" title="Status">
<option value="" selected>Select Center</option>
<option value="1">
1</option>
<option value="2">
2</option>
<option value="3">3
</option>
</select>
</div>
<div class="col-lg-4"></div>
</div>
<div>
<div class="row">
<div class="col-md-12">
<div class="mt-2"><a href=" /Mycenter/testmailtemplate/value1/value2" class="text-default btn btn-sm pri-btn pt-2 mr-3 ">
Submit
</a>
</div>
</div>
</div>
</main>

$(".custom-select").on("change", function() {
var value1 = $("#status1").val();
var value2 = $("#status2").val();
var url = '/Mycenter/testmailtemplate/'+value1+'/'+value2;
$(".pri-btn").attr("href", url );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
<div class="row">
<div class="col-md-12">
<h4 class="heading-theme page-header pdt">Create Email Template</h4>
<span class="border-bottom display-block mb-20"></span>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3 col-md-12 mb-1">
<!--added class="status"-->
<select class="custom-select status" id="status1" title="Status">
<option value="" selected>Select Template</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-lg-3 col-md-12 mb-1">
<!--added class="status"-->
<select class="custom-select status" id="status2" title="Status">
<option value="" selected>Select Center</option>
<option value="1">
1</option>
<option value="2">
2</option>
<option value="3">3
</option>
</select>
</div>
<div class="col-lg-4"></div>
</div>
<div>
<div class="row">
<div class="col-md-12">
<div class="mt-2"><a href=" /Mycenter/testmailtemplate/value1/value2" class="text-default btn btn-sm pri-btn pt-2 mr-3 ">
Submit
</a>
</div>
</div>
</div>
</main>

dropdown binding and removing option from remaining dropdowns

I have 3 dropdowns and that 3 dropdowns has same options.
options ex... kiran, viran, charan, narine.
If i select kiran in first dropdown that has to be not showing in remaining dropdowns(should show only viran, charan,narine). And if i select viran in next two dropdowns of anyone. The 3rd dropdown should show only charan and narine.
And i have 3 scope variables in my html for 3 dropdowns. u can see below please help me guys.
Here is my Html and am using Angular Js for this:
<html>
<body>
<div class="row">
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Primary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form37" name="ServiceProviderID" data-ng-model="residentprovider.pPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
<option value="" disabled>Select Primary Physician</option>
</select>
<label class="active" for="form37">Primary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Secondary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form38" name="ServiceProviderID" data-ng-model="residentprovider.sPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
<option value="" disabled>Select Secondary Physician</option>
</select>
<label class="active" for="form38">Secondary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Alternate Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form39" name="ServiceProviderID" data-ng-model="residentprovider.aPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName for item in serviceProviders">
<option value="" disabled>Select Alternate Physician</option>
</select>
<label class="active" for="form39">Alternate Physician:</label>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-sm" ng-click="createOrUpdateResidentProvider()">SAVE</button>
<button type="button" class="btn btn-danger btn-sm" id="CancelProblems_btn" ng-click="resetResident()">CANCEL</button>
</body>
</html>
<script>
$scope.createOrUpdateResidentProvider = function () {
blockUI.start();
$scope.providers = true;
$scope.residentprovider.ResidentID = $scope.selectedResidentID;
$scope.residentprovider.FacilityID = $scope.selectedFacilityID;
$scope.residentprovider.PrimaryPhysician = $scope.residentprovider.pPhysician;
$scope.residentprovider.SecundaryPhysician = $scope.residentprovider.sPhysician;
$scope.residentprovider.AlternatePhysician = $scope.residentprovider.aPhysician;
residentService.post($scope.constants.API.CREATE_NEW_RESIDENT_PROVIDER, $scope.residentprovider).then(
function (response) {
toaster.pop('success', response.message);
blockUI.stop();
},
function (response) {
toaster.pop('error', response.message);
blockUI.stop();
})
}
</script>

Use disable when ... ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID for item in serviceProviders"
var app = angular.module('myApp',[]);
app.controller('appCtrl', function($scope){
$scope.serviceProviders =[{"ServiceProviderID":1,personbase:{"FullName":"AAA"}},{"ServiceProviderID":2,personbase:{"FullName":"BBB"}},{"ServiceProviderID":3,personbase:{"FullName":"CCC"}}];
$scope.createOrUpdateResidentProvider = function () {
$scope.providers = true;
$scope.residentprovider.ResidentID = $scope.selectedResidentID;
$scope.residentprovider.FacilityID = $scope.selectedFacilityID;
$scope.residentprovider.PrimaryPhysician = $scope.residentprovider.pPhysician;
$scope.residentprovider.SecundaryPhysician = $scope.residentprovider.sPhysician;
$scope.residentprovider.AlternatePhysician = $scope.residentprovider.aPhysician;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="appCtrl">
<div class="row">
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Primary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form37" name="ServiceProviderID" data-ng-model="residentprovider.pPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID for item in serviceProviders" >
<option value="" disabled>Select Primary Physician</option></select>
<label class="active" for="form37">Primary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Secondary Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form38" name="ServiceProviderID" data-ng-model="residentprovider.sPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.pPhysician == item.ServiceProviderID for item in serviceProviders" >
<option value="" disabled>Select Secondary Physician</option></select>
<label class="active" for="form38">Secondary Physician:</label>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="md-form">
<div class="form-group ">
<label for="form76" class="active">Alternate Physician:</label>
<select class="form-control mdb-select select-dropdown require" id="form39" name="ServiceProviderID" data-ng-model="residentprovider.aPhysician"
ng-options="item.ServiceProviderID as item.personbase.FullName disable when residentprovider.sPhysician == item.ServiceProviderID || residentprovider.pPhysician == item.ServiceProviderID for item in serviceProviders">
<option value="" disabled>Select Alternate Physician</option></select>
<label class="active" for="form39">Alternate Physician:</label>
</div>
</div>
</div>
</div>
<br>{{residentprovider.pPhysician}}
{{residentprovider.sPhysician}} {{residentprovider.aPhysician}}<br>
<button type="button" class="btn btn-success btn-sm" ng-click="createOrUpdateResidentProvider()">SAVE</button>
<button type="button" class="btn btn-danger btn-sm" id="CancelProblems_btn" ng-click="resetResident()">CANCEL</button>
</body>

ng-change event of dropdown can be used to change the options of other dropdown
for eg.
<div ng-app="App" >
<div ng-controller="ctrl">
option 1:
<select id="ddl1" ng-model="dataSelected1" ng-change="removeValue(dataSelected1)"
data-ng-options="data as data.name for data in datas">
<option value="">Select</option>
</select>
<br/>
option 2:
<select id="ddl2" ng-model="dataSelected2"
data-ng-options="data as data.name for data in datas">
<option value="">Select</option>
</select>
</div>
</div>
$scope.datas=[{id:1,name:"kiran"},{id:2,name:"viran"},{id:3,name:"charan"},{id:4,name:"narine"}]
$scope.removeValue=function(item){
alert(item.name);
$('#ddl2 option')
.filter(function(i, e) { return $(e).text() == item.name}).remove();
}
demo sample
demo Updated