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
Related
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>
I am adding items to cart with ajax request but i don't know how to update the cart with ajax response.
This is my index.blade.php code from where i am adding items to cart with some inputs in cart:
<form id="product-1">
#csrf
<div class="modal-body cart-addon" style="margin-top: 20px">
<div class="food-item white">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="item-img pull-left">
<a class="restaurant-logo pull-left" href="#"><img id="image"/> </a>
</div>
<div class="rest-descr">
<h6><input id="name" name="name" style="width: 200px; border: none; margin-top: 15px" readonly></h6>
</div>
</div>
<!-- end:col -->
<div class="col-xs-6 col-sm-2 col-lg-2 text-xs-center"> <span class="price pull-left">$<input id="price" name="price" style="width: 50px; border: none" readonly></span></div>
<div class="col-xs-6 col-sm-4 col-lg-4">
<div class="row no-gutter">
<div class="form-group">
<select class="form-control" id="quantity" name="quantity" required>
<option selected="selected" disabled="disabled" value="">Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<select class="form-control" id="spice" name="spice" required>
<option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Spice</option>
<option value="Mild" style="font-size: 14px">Mild</option>
<option value="Medium" style="font-size: 14px">Medium</option>
<option value="Hot" style="font-size: 14px">Hot</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="naan" name="naan" required>
<option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Naan</option>
<option value="No Naan" style="font-size: 14px">No Naan</option>
<option value="Naan" style="font-size: 14px">Naan</option>
<option value="Garlic Naan" class="red">Garlic Naan +$1.00</option>
<option value="Roti" style="font-size: 14px">Roti</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="rice" name="rice" required>
<option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Lunch Rice</option>
<option value="No Rice" style="font-size: 14px">No Rice</option>
<option value="Rice" style="font-size: 14px">Rice</option>
</select>
</div>
<input class="form-control" name="instructions" id="instructions" placeholder="Instruction"/>
</div>
<div class="row">
<div class="col-md-7"></div>
<div class="col-md-2">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<div class="col-md-3">
<input hidden name="products_id" id="products_id">
<button type="submit" class="btn theme-btn">Add to cart</button>
</div>
</div>
</div>
</form>
Ajax Request:
<script>
$("#product-1").submit(function (e){
e.preventDefault();
let quantity = $("#quantity").val();
let spice = $("#spice").val();
let naan = $("#naan").val();
let rice = $("#rice").val();
let instructions = $("#instructions").val();
let products_id = $("#products_id").val();
let _token = $("input[name=_token]").val();
$.ajax({
url: "{{route('product.addToCart')}}",
type: "get",
data:{
products_id:products_id,
quantity:quantity,
spice:spice,
naan:naan,
rice:rice,
instructions:instructions,
_token:_token
},
beforeSend: function() {
},
success:function(response)
{
$("#product-1")[0].reset();
$('#product-modal').modal('hide');
$('#product-modal').trigger("click");
}
})
});
and this is my controller:
public function getAddToCart(Request $request)
{
$products = Products::find($request->products_id);
$quantity = $request->input('quantity');
$instructions = $request->input('instructions');
$spice = $request->input('spice');
$naan = $request->input('naan');
$rice = $request->input('rice');
$oldCart = Session::has('cart') ? Session::get('cart') : null;
$cart = new Cart($oldCart);
for ($i = 1; $i <= $quantity; $i++)
{
if ($naan == "Garlic Naan"){
$cart->garlic_add($products, $products->id, $instructions, $spice, $naan, $rice);
} else
$cart->add($products, $products->id, $instructions, $spice, $naan, $rice);
}
$request->session()->put('cart', $cart);
$oldCart = Session::get('cart');
$cart = new Cart($oldCart);
$request->session()->put('cart', $cart);
return back();
return redirect('/');
}
This is my blade part where i am showing cart.
#if(Session::has('cart'))
#foreach($carts as $product)
<div class="order-row bg-white">
<div class="widget-body">
<div class="title-row">{{ $product['item']['name'] }}
<form id="reduceProduct">
<input name="id" id="id" value="{{$product['item']['id']}}">
<button type="submit" style="background-color: transparent; border: 0;"><i class="fa fa-trash pull-right" style="color: #FF3300"></i></button>
</form>
</div>
<div class="title-row">{{ $product['instructions'] }}</div>
<div class="title-row">{{ $product['spice'] }}</div>
#if(!empty($product['rice']))
<div class="title-row">{{ $product['rice'] }}</div>
#endif
<div class="form-group row no-gutter">
<div class="col-xs-8">
<select class="form-control b-r-0" id="exampleSelect1">
<option>Size SM</option>
<option>Size LG</option>
<option>Size XL</option>
</select>
</div>
<div class="col-xs-4">
<input class="form-control" type="number" value="{{ $product['qty'] }}" id="example-number-input">
{{ $product['item']['price'] }}
{{ $product['price'] }}
</div>
</div>
</div>
</div>
#endforeach
<!-- end:Order row -->
<div class="widget-delivery clearfix">
<form>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6 b-t-0">
<label class="custom-control custom-radio">
<input id="radio4" name="radio" type="radio" class="custom-control-input" checked=""> <span class="custom-control-indicator"></span> <span class="custom-control-description">Delivery</span> </label>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6 b-t-0">
<label class="custom-control custom-radio">
<input id="radio3" name="radio" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Takeout</span> </label>
</div>
</form>
</div>
<div class="widget-body">
<div class="price-wrap text-xs-center">
<p>TOTAL</p>
<h3 class="value"><strong>$ 25,49</strong></h3>
<p>Free Shipping</p>
<button onclick="location.href='checkout.html'" type="button" class="btn theme-btn btn-lg">Checkout</button>
</div>
</div>
Can any help me with the code that how can i update the cart with ajax response.
ThankYou
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>
I have this dropdown
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
<div class="col-sm-5">
<select class="form-control" name = "LEAVE_ENTITLED" id = "LEAVE_ENTITLED">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
I want to hide this one,
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?<br>(If leave entitled)</label>
<div class="col-sm-5">
<select class="form-control" name = "SOLO_P">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
and then when I selected yes on the first dropdown, it will show the second dropdown. how can I do this ?
what i did is
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
<div class="col-sm-5">
<select class="form-control" name = "LEAVE_ENTITLED" id = "LEAVE_ENTITLED">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
<div class="solop box-body" style="display:none" id = "Yes">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?<br>(If leave entitled)</label>
<div class="col-sm-5">
<select class="form-control" name = "SOLO_P">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
then my javascript is
$(function() {
$('#LEAVE_ENTITLED').change(function(){
$('.solop').hide();
$('#' + $(this).val()).show();
});
});
By default, hide the second drop down on page load.
Then check the first drop down value to be 'Yes' and remove hide class for second drop down.
$('#LEAVE_ENTITLED').on('change', function() {
var $this = $(this),
$dropdown2 = $('#ddlSecond');
if ($this.val() == 'Yes') {
$dropdown2.removeClass('hide');
} else {
$dropdown2.addClass('hide');
}
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
<div class="col-sm-5">
<select class="form-control" name="LEAVE_ENTITLED" id="LEAVE_ENTITLED">
<option></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
</div>
<div class="box-body hide" id="ddlSecond">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?
<br>(If leave entitled)</label>
<div class="col-sm-5">
<select class="form-control" name="SOLO_P">
<option></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
</div>
I am trying to get the selected value from the dropdown.
I am creating the controls dynamically. I am not using ID attribute to avoid the problem of having multiple controls with the same ID/ duplicate IDs.
Here is how I am able to get the values of the textbox controls
$('.btn-success').off('click').on('click', function (e) {
e.preventDefault();
var row = $(this).closest(".row");
var lnameval = row.find("input[name='ContactLastName']").val();
});
Is it possible to get the selected value of the dropdown using the name attribute.
something like : var titleVal = row.find("input[name='ContactTitle']").val();
HTML :
<form id="formAddContact" role="form" class="form-horizontal">
<div class="modal-body">
<div id="errorMessageContainer2" class="alert alert-danger" role="alert" style="display:none;">
<ul id="messageBox2" class="list-unstyled"></ul>
</div>
#foreach (string cInfo in Model.emailList)
{
<div class="row" id="#cInfo.Replace("#","")" style="display: none;">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-3 control-label">
<label>Title:</label>
</div>
<div class="col-md-3">
<select class="form-control ToCapture" name="ContactTitle">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lblfname">First Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactFirstName" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lbllname">Last Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactLastName" type="text" value="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" value="Add Contact" class="btn btn-success">
<input type="button" value="Cancel" class="btn btn-default">
</div>
<br/>
}
<hr />
</div>
</form>
Just a little change needed :
row.find("select[name='ContactTitle']").val();
It's not an input.