By default the input area is set to readonly. Now I want that if user selected the Selection 3 the input area will now be inputable with text. How can I do this?
<div class="form-group">
<label for="selections">Options:</label>
<select class="form-control" id="selections" required>
<option value="sel1">
Selection 1</option>
<option value="sel2">
Selection 2</option>
<option value="sel3">
Selection 3</option>
</select>
</div>
<label for="textsection">Text to be edit:</label>
<input type="text" class="form-control" id="textsection" maxlength="34"
placeholder="User can type here if he select option 3" readonly>
you need to use Javascript, select the elements (select and the input), add an Event Listener on your select element, then you can create a function to handle this behavior. Try something like this:
const select = document.querySelector("#selections");
const text = document.querySelector("#textsection");
select.addEventListener("change", handleSelectChange);
function handleSelectChange(event) {
const value = event.target.value;
value === 'sel3' ? text.readOnly = false : text.readOnly = true;
}
You'll have to include this script in your HTML file.
Related
I have a dropdown menu using an *ngFor loop and all the options are data bound. I'm trying to put a placeholder in until one option is selected and if I use the first set of code the placeholder appears perfectly but when I include the [(ngModel)] (which I need) the placeholder disappears.
Note: The ngModel is bound to the index of the dropdown so I can use that to filter a JSON file, which is why I also have an index running.
I've tried using 'placeholder' and 'required placeholder' and adding an initial option in before the for loop options
HTML Code with working placeholder but no ngModel
<label for="filter-coach-sel">Option</label>
<select required placeholder="" class="form-control" id="filter-coach-sel" >
<option hidden value="" disabled selected>Select an option </option>
<option *ngFor = " let coach of navHistory;">{{coach.account.name}}</option>
</select>
HTML Code with ngModel but placeholder no longer works
<div class="form-group">
<label for="filter-coach-sel">Coach</label>
<select required placeholder="" [(ngModel)]="selectedCoachIndex" (change) = "changeCoach()" class="form-control" id="filter-coach-sel" >
<option disabled selected>Select one category </option>
<option *ngFor = " let coach of navHistory; let i = index" value="{{i}}"> {{coach.account.first_name}}</option>
</select>
</div>
Since you are using ngModel to bind the select box, your placeholder option also needs to be one among the value. Try initializing as selectedCoachIndex=""; as assigning value="" for your option
<div class="form-group">
<label for="filter-coach-sel">Coach</label>
<select [(ngModel)]="selectedCoachIndex" class="form-control" >
<option disabled selected value="">Select one category </option>
<option *ngFor = " let coach of navHistory; let i = index" value="{{i}}"> {{coach.first_name}}</option>
</select>
</div>
And your .ts file would have something like this
navHistory = [{
first_name: 'Bob'
},{
first_name: 'Jon'
},{
first_name: 'Mat'
}];
selectedCoachIndex = "";
Stackblitz Demo
I'm writing a simple form, but I've encountered a problem. The form must generate an url like this
https://website.com/properties/hotelvinadelmar?locale=es&check_in_date=22-03-2019&check_out_date=25-03-2019&number_adults=4&number_children=9
The part after /properties/ (in this case, "hotelvinadelmar") is a code for an especific hotel, while the rest is the information the customer provide to check if there's availability.
I wrote this form:
Sucursal: <br>
<select name="test" id="id" required>
<option value="hotelvinadelmar?locale=es">Viña del Mar</option>
<option value="hotelsantiago1?locale=es">Nueva Providencia</option>
<option value="hotelsantiago2?locale=es">Providencia</option></select>
<br><br>
</select>
this almost work, but generates an url like this (...)/properties/?test=hotelvinadelmar?locale=es&number_adults=1(...)
Which is creating an url structured like this
[form action (the url I entered)][Option Name][selected Option Value]
But the thing must be like this
[form action (the url I entered)][selected Option Value]
How can this be achieved? Thanks in advance!
this is the correct behavior because the submitted form data test=hotelvinadelmar will be added after the URL
(...)/properties/, in order the achieve the desired result you can try to add action attribute to your form as <form action="/hotel"> and change the select as:
<select name="hotelname" required>
<option value="hotelvinadelmar">Viña del Mar</option>
<option value="hotelsantiago1">Nueva Providencia</option>
<option value="hotelsantiago2">Providencia</option></select>
<br><br>
</select>
the generated link will be: (...)/properties/hotel?name=hotelvinadelmar(...)
or you can use a javascript function with onSubmit event, for example:
<script>
function submitForm(){
var hotelName = document.getElementById('hotelName').value;
var param1Value = document.getElementById('id').value;
switch(hotelName) {
case 'hotelvinadelmar':
window.location.href = '/hotelvinadelmar?param1=' + param1Value + '¶m2=' + (...);
break;
case 'hotelsantiago1':
window.location.href = '/hotelsantiago1?param1=' + param1Value;
break;
}
// stop submit
return false;
}
</script>
<form onsubmit="submitForm()" method="get">
<select id="hotelName" required>
<option value="hotelvinadelmar">Viña del Mar</option>
<option value="hotelsantiago1">Nueva Providencia</option>
<option value="hotelsantiago2">Providencia</option></select>
</select>
<input type="submit" value="submit"/>
</form>
Capture the submission event and update the form action attribute to append the hotel name to the submission path:
document.forms[0].addEventListener("submit", function (evt) {
let ff = evt.target;
ff.action = "/properties/" + ff.hotelname.options[ff.hotelname.selectedIndex].value;
});
You'll need remove the locale property from your select input. Simply add a hidden form element (or selectable option) to your form:
<input type="hidden" name="locale" value="es">
An example url:
https://website.com/properties/hotelvinadelmar?locale=es&hotelname=hotelvinadelmar&val1=one&val2=two
Here's a demonstration how the form action attribute can be updated:
document.forms[0].addEventListener("submit", function (evt) {
evt.preventDefault(); // demonstration only
let ff = evt.target;
ff.action = "/properties/" + ff.hotelname.options[ff.hotelname.selectedIndex].value;
console.log(ff.action); // demonstration only
return false; // demonstration only
});
<form action="/properties/" method="get">
<input type="hidden" name="locale" value="es">
Sucursal:
<select name="hotelname" id="id" required>
<option value="hotelvinadelmar">Viña del Mar</option>
<option value="hotelsantiago1">Nueva Providencia</option>
<option value="hotelsantiago2">Providencia</option>
</select>
<input type="hidden" name="val1" value="one">
<input type="hidden" name="val2" value="two">
<input type="submit">
</form>
I have a drop down which by default on page load it select "PLEASE SELECT USECASE" in the dropdown
But i am expecting "EUC Proxy" to be selected on page load instead of "PLEASE SELECT USECASE"
HTML IS SHOWN BELOW
<div class="form-group">
<label for="bot">Use Case</label>
<select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
<option value="-1" [selected]="isSelected"> Please Select Use Case </option>
<option *ngFor="let uc of useCaseList" [value]="uc.BOTId"> {{uc.BOTName}}
</option>
</select>
</div>
</div>
*HTML i CHANGED TO *
[selected]="1"
But it doesn't made any difference.See the changed HTML Below
<div class="form-group">
<label for="bot">Use Case</label>
<select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
<option *ngFor="let uc of useCaseList" [selected]="1" [value]="uc.BOTId"> {{uc.BOTName}}
</option>
</select>
</div>
</div>
SAME IN IMAGE
I am getting "test Bot" selected in drop-down, which is last item in the drop down like below:
But i am expecting this: where uc.BOTId =1 is "EUC Proxy" Not "test Bot"
TS file
ngOnInit() {
getUsecaseList() {
this.manageBotService.getAllBots().subscribe(res => this.useCaseList = res);
}
}
Why i am unable to select "EUC Proxy" which having uc.BOTId =1 on page load?
Remove [selected] from your options.
The [(ngModel)] part from your 'select' will set the value to selected (depending on the value the 'scheduleModel.UsecaseId' has.
I didn't see you using the instruction that makes it default:
value='default'
for instance:
<select name='test'>
<option value='default' selected='selected'>Please select the value</option>
<option value='value1'>value1</option>
<option value='value2'>value2</option>
</select>
Set scheduleModel.UsecaseId = 1 after loading the drop-down on ng-init().
I don't know how to change this, but whenever I use my select option, it always goes to null.
This is my HTML code,
<select type="number" class="footer" id="chooser"
ng-change="selectchange(selectedPage)"
ng-model="selectedPage" min="1"
ng-options="x for x in pages">
<option value="" selected="false" hidden>
</select>
Is there any reason it changes to null. Because when it changes it sends another request to angular.
What is the problem here, and how to solve it?
Use this in html
<select class="footer" id="chooser" ng-change ="selectchange()" ng-model="selectedPage" ng-options="x in pages"></select>
And in your controller:
$scope.selectedPage = "1";
$scope.pages = [1, 2, 3, 4];
$scope.selectchange = function() {
console.log("selectedPage changed to : ", $scope.selectedPage);
}
For more information read https://docs.angularjs.org/api/ng/directive/select
You have set the option value to null and it always selected by selected tag. So it select null value every time, remove that option value and use ng-options to set the options in your selected box. No need to use option tag.
<select type="number" class="footer" id="chooser"
ng-change="selectchange(selectedPage)"
ng-model="selectedPage" min="1"
ng-options="x for x in pages">
<-- <option value="" selected="false" hidden> --> // remove this line
</select>
<div class="form-group">
<label class="col-md-4 control-label" for="is_present">Is Present?</label>
<div class="col-md-4">
<select id="is_present" name="is_present" class="form-control" *ngIf="candidates.is_present === true">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</div>
I have this code in my html component. I receive a boolean data from API, I would like to know what the best way to use *ngIf to add selected in option tag if the API data is true or false.
Slightly change to Rahul's answer, because from what I understand, you are receiving a boolean value that is should not be the same as candidates.is_present. Therefore store the boolean value to a variable, e.g bool, and then just have the [(ngModel)]="bool" in your select:
<select name="is_present" [(ngModel)]="bool" *ngIf="candidates.is_present">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
Just use candidates.is_present
<select id="is_present" [(ngModel)]="defaultValue" name="is_present" class="form-control">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
and in TS file,
if(candidates.is_present){
this.defaultValue = 'Yes';
}else
{
this.defaultValue = 'No';
}
as i can understand from question you want to select the value in select box based on some candidates.is_present. So here you need to bind the data using [(ngModel)]="candidates.is_present" ,and be sure to include FormsModule in your imports. we use *ngIf when we want our element to remove/add to dom based on some conditions.hope you got the answer