<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.questions = ["Select a question from the following options.", "What is your favorite color?", "What is your favorite sport?","What is your favorite car?","What is your first pet name?","What is your first car color?"];
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label for="firstname" class="col-sm-3 control-label" id="consumerChoice">Consumer's Choices</label>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-9">
<select ng-model="selectedName" ng-options="x for x in questions" class="form-control">
</select>
</div> <div class="col-sm-3">
<input type="text" class="form-control" placeholder="Answer">
</div></div>
<div class="row">
<div class="col-sm-9">
<select ng-model="selectedName" ng-options="x for x in questions" class="form-control">
</select>
</div> <div class="col-sm-3">
<input type="text" class="form-control" placeholder="Answer">
</div></div>
<div class="row">
<div class="col-sm-9">
<select ng-model="selectedName" ng-options="x for x in questions" class="form-control">
</select>
</div> <div class="col-sm-3">
<input type="text" class="form-control" placeholder="Answer">
</div></div>
</div>
</div>
</body>
</html>
I'm developing multiple security questions in the dropdown and its answers using angular js. The problem is that these questions come from an array inside the controller and on clicking on drop down, all the other dropdowns are also changing and first selected option should not be displayed in the other drop downs.I need to avoid it.I don't know where I'm making the mistake.
ng-model should be different for each select:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.questions = ["Select a question from the following options.", "What is your favorite color?", "What is your favorite sport?", "What is your favorite car?", "What is your first pet name?", "What is your first car color?"];
$scope.model = {};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label for="firstname" class="col-sm-3 control-label" id="consumerChoice">Consumer's Choices</label>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-9">
<select ng-model="selectedName1" class="form-control">
<option value="{{x}}" ng-repeat="x in questions track by $index">{{x}} </option>
</select>
</div>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="Answer">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<select ng-model="selectedName2" class="form-control">
<option ng-if="selectedName1 != x" value="{{x}}" ng-repeat="x in questions track by $index">{{x}} </option>
</select>
</div>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="Answer">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<select ng-model="selectedName3" class="form-control">
<option value="{{x}}" ng-if="selectedName1 != x && selectedName2 != x" ng-repeat="x in questions track by $index">{{x}} </option>
</select>
</div>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="Answer">
</div>
</div>
</div>
</div>
</body>
</html>
please set different names for different select tags
You cannot use same model for different select tags.
Related
I have created first dropdown which returns a bit. It is either Outbound or Inbound and based on that selection I need to enable the respective further Outbound or Inbound dropdown. It means one dropdown will remain disabled.
<div class="form-group" id="type">
<label class="control-label col-md-2">#Localiser["Outbound"] / #Localiser["Inbound"]</label>
<div class="col-md-10">
<select id="outboundInboundType" name="outboundInboundType" asp-items="#await SelectLists.OutboundInboundTypes()" class="form-control"></select>
</div>
</div>
```
Based on the selection of above code I need to open Either 'Outbound' dropdown shown below
```
<div class="form-group" id="claimOutbound">
<label asp-for="ClaimStatus" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="ClaimStatus" class="form-control" asp-items="#await SelectLists.ClaimStatusTypes()"></select>
<span asp-validation-for="ClaimStatus" class="text-danger"/>
</div>
</div>
```
Or Inbound Dropdown below
```
<div class="form-group" id="claimInbound">
<label asp-for="ClaimStatus" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="ClaimStatus" class="form-control" asp-items="#await SelectLists.InboundClaimStatusTypes()"></select>
<span asp-validation-for="ClaimStatus" class="text-danger" />
</div>
</div>
```
I need to achieve this using Jquery, I have tried using the ajax call but it is not working
Here is a working solution.
function showAproprateSelect(sender){
var val = $(sender).val();
//Hides all .select-container divs
$(".select-container").addClass("hidden-div");
//Shows the related div.
if(val == "inbound"){
$("#claimInbound").removeClass("hidden-div");
}
else if(val == "outbound"){
$("#claimOutbound").removeClass("hidden-div");
}
}
.hidden-div{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="type">
<label class="control-label col-md-2">#Localiser["Outbound"] / #Localiser["Inbound"]</label>
<br/>
<div class="col-md-10">
<select id="outboundInboundType" name="outboundInboundType" asp-items="#await SelectLists.OutboundInboundTypes()" class="form-control" onchange="showAproprateSelect(this);">
<option value="none">Select a value</option>
<option value="inbound">Inbound</option>
<option value="outbound">Outbound</option>
</select>
</div>
</div>
<br/>
<div class="form-group select-container hidden-div" id="claimOutbound" >
<label asp-for="ClaimStatus" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="ClaimStatus" class="form-control" asp-items="#await SelectLists.ClaimStatusTypes()">
<option value="select">Outbound value</option>
</select>
<span asp-validation-for="ClaimStatus" class="text-danger"/>
</div>
</div>
<br/>
<div class="form-group select-container hidden-div" id="claimInbound">
<label asp-for="ClaimStatus" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="ClaimStatus" class="form-control" asp-items="#await SelectLists.InboundClaimStatusTypes()">
<option value="select">Inbound value</option>
</select>
<span asp-validation-for="ClaimStatus" class="text-danger" />
</div>
</div>
You can try this code:
var boundType= function () {
if ($("#outboundInboundType").find(":selected").val() == `your desired value`) {
$("#claimOutbound > select").prop('disabled', false);
}
else {
$("#claimOutbound > select").prop('disabled', true);
}
};
$(boundType);
$("#outboundInboundType").change(boundType);
I'm having issues with my last row not showing at all when I compile the program. I tried many things but there seems to be an issue with the Select element because what ever I try to add after the first Select row doesn't show up.
What am I missing?
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="~/css/OpenStore.css" asp-append-version="true" />
</head>
<p align="center" style="color:red">
Open Store
</p>
<div class="OpenStore">
<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype = "multipart/form-data">
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row col-md-13">
<label class="col-form-label col-md-6">Store # :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Store Name :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Language :</label>
<div class="col-sm-3">
<select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"/>
<datalist id="Languages">
<option data-value="English">English</option>
<option data-value="Fr">French</option>
</datalist>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Group :</label>
<div class="col-sm-3">
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"/>
<datalist id="Groups">
<option data-value="2">>Laura</option>
<option data-value="3">Melanie Lyne</option>
</datalist>
</div>
</div>
</div>
</div>
</form>
</div>
</html>
Here is what it looks like in chrome:
html render
The second <select> is not shown, because the closing </select> tag is missing. <select> tags are used with <option> tags inside them.
<select asp-for="LanguageId" class="form-control form-control-sm" id="Language"
style="width:100px">
<option data-value="English">English</option>
<option data-value="French">French</option>
</select>
The list attribute is not valid for select. If you want to use a datalist you should switch to <input> tags.
Please use the <select></select> instead of <select/>
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
<form class="form-horizontal" asp-action="SearchStore" asp-controller="Home" method="get" enctype="multipart/form-data">
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row col-md-13">
<label class="col-form-label col-md-6">Store # :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreId" value="" style="width:100px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Store Name :</label>
<div class="col-sm-3">
<input class="form-control form-control-sm" asp-for="StoreDescription" value="" style="width:350px;" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Language :</label>
<div class="col-sm-3">
<select list="Languages" asp-for="LanguageId" class="form-control form-control-sm" id="Language" style="width:100px"></select>
<datalist id="Languages">
<option data-value="English">English</option>
<option data-value="Fr">French</option>
</datalist>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group form-group-sm col-sm-6 col-md-13">
<div class="row">
<label class="col-form-label col-md-6">Group :</label>
<div class="col-sm-3">
<select list="Groups" asp-for="StoreTypeId" class="form-control form-control-sm" id="Group" style="width:100px"></select>
<datalist id="Groups">
<option data-value="2">>Laura</option>
<option data-value="3">Melanie Lyne</option>
</datalist>
</div>
</div>
</div>
</div>
</form>
I have to access nearest element of dropdown.
Below html have multiple dropdown and input boxes, so while select others in dropdown i have to enable and disable the nearest input box of the block.
<div class="form-block" *ngFor="let applicant of consumerData;">
<div class="form-row">
<div class="form-group">
<label class="label__select-form--hidden">Type</label>
<div class="select-dropdown">
<select class="select-menu" (change)="onTypeChange($event.target.value)">
<option value="medical">Major Medical</option>
<option value="Others">Others</option>
</select>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="othersLabel">Others</label>
<div class="form-textbox">
<input class="form-control" id="othersLabel" name="othersLabel">
</div>
</div>
</div>
</div>
For quick review, i have updated stackblitz.
Thanks in advance for quick solution.
Declare Template Variable in your Select Button then use the template variable to disable the input button i have edited the code try this way
<div class="form-block" *ngFor="let applicant of consumerData;">
<div class="form-row">
<div class="form-group">
<label class="label__select-form--hidden">Type</label>
<div class="select-dropdown">
<select class="select-menu" #v (change)="onTypeChange($event.target.value)">
<option value="medical">Major Medical</option>
<option value="Others">Others</option>
</select>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="othersLabel">Others</label>
<div class="form-textbox">
<input class="form-control" id="othersLabel" name="othersLabel" [disabled]="v.value=='Others'">
</div>
</div>
</div>
Example:https://stackblitz.com/edit/angular-2yuwyf
I'm trying to do that bootstrap model:
But the alignement isn't working well because there's a dropdown list (It's not all elements of the same type).
This is what I came for:
This is my fiddle:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="form-group">
<label class="col-xs-3 control label">Prefix:</label><br />
<div class="col-xs-5 selectContainer">
<select name="prefix" class="form-control">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
</div>
</div>
</div>
<div class="row">
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="fname" name="fname">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" class="form-control" id="lname" name="lname">
</div>
</div>
<div class="row">
<label for="suffix">Suffix:</label>
<input type="text" class="form-control" id="suffix" name="suffix">
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="info">Information:</label>
<textarea class="form-control" rows="4" id="info" name="info"></textarea>
</div>
</div>
</div>
</div>
</body>
</html>
How can I fix this alignment problem?
Try something like this: http://www.bootply.com/TvgQizWRZw
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<label for="prefix">Prefix</label>
<select name="prefix" class="form-control" id="prefix">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
</div>
<div class="col-md-6">
<label for="tbLastName">Last name</label>
<input type="text" class="form-control" id="tbLastName">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="tbFirstName">First Name</label>
<input type="text" class="form-control" id="tbFirstName">
</div>
<div class="col-md-6">
<label for="tbSuffix">Suffix</label>
<input type="text" class="form-control" id="tbSuffix">
</div>
</div>
</div>
<div class="col-md-4">
<label for="tbInfo">Information</label>
<textarea rows="4" cols="50" class="form-control" id="tbInfo">Test</textarea>
</div>
</div>
</div>
I'm experiencing an odd behaviour in Bootstrap where a col-sm-6 is expanding on top of the sibling column above it, which renders the sibling column unclickable.
Please see source code and live demo here: Codepen
Resize the output window to xs size (below 768px) to experience the issue).
The checkbox for 'As above' is unclickable because the phyiscal address 'Address line 1' is expanding above it, creating a sort of barrier.
The issue can be solved by adding 'col-xs-12' in addition to the 'col-sm-6', but Bootstrap should figure this one out by itself without this (as it normally does). Any ideas what is causing this?
EDIT:
One could argue that I should put all my fields in different rows, but for various reasons I'd like to keep everything within one row and let Bootstrap figure out the flow of the items, which normally works fine.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Postal address</h3>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalAddressLine1">Address line 1*</label>
<input type="text" class="form-control" id="inputPostalAddressLine1" required="" data-parsley-required-message="Please enter your postal address.">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalAddressLine2">Address line 2</label>
<input type="text" class="form-control" id="inputPostalAddressLine2">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalState">State*</label>
<select class="form-control" id="inputPostalState" required="" data-parsley-required-message="Please select the state from the dropdown.">
<option value="">Please Select</option>
<option value="nsw">NSW</option>
<option value="nt">NT</option>
<option value="qld">QLD</option>
<option value="sa">SA</option>
<option value="tas">TAS</option>
<option value="vic">VIC</option>
<option value="wa">WA</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalPostcode">Postcode*</label>
<input type="text" class="form-control" id="inputPostalPostcode" required="" data-parsley-error-message="Please enter a valid postcode." data-parsley-length="[4, 4]" data-parsley-type="digits">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPostalSuburb">Suburb*</label>
<input type="text" class="form-control" id="inputPostalSuburb" required="" data-parsley-required-message="Please enter your suburb.">
</div>
</div>
<div class="col-xs-12">
<h3>Physical address</h3>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="checkbox checkbox-default">
<label>
<input type="checkbox" value="" id="use-postal-address" data-parsley-multiple="use-postal-address">
<span class="icon"></span>
<span class="text">As above (use postal address)</span>
</label>
</div>
</div>
</div>
<div class="col-sm-6 ">
<div class="form-group">
<label for="inputPhysicalAddressLine1">Address line 1*</label>
<input type="text" class="form-control" id="inputPhysicalAddressLine1" required="" data-parsley-required-message="Please enter your physical address.">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalAddressLine2">Address line 2</label>
<input type="text" class="form-control" id="inputPhysicalAddressLine2">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalState">State*</label>
<input type="text" class="form-control" id="inputPhysicalState" value="NSW" disabled="disabled">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalPostcode">Postcode*</label>
<input type="text" class="form-control" id="inputPhysicalPostcode" required="" data-parsley-error-message="Please enter a valid postcode." data-parsley-length="[4, 4]" data-parsley-type="digits">
</div>
</div>
<div class="clearfix hidden-xs"></div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputPhysicalSuburb">Suburb*</label>
<input type="text" class="form-control" id="inputPhysicalSuburb" required="" data-parsley-required-message="Please enter your suburb.">
</div>
</div>
</div>
</div>
I think you're not clearing your floats properly across media queries.
Add .col-sm-6{overflow:hidden} to see if it solves it, then try to clear your floats whenever possible.
Also, read up on this, it might be helpful