<select name="status" required>
<option selected disabled>status</option>
I have set required attribute in html select.
My first option set selected disabled for display text.
However it will cause required attribute not working.
anyone know how to solve this problem?
Set <option>'s value to empty string ('').
Updated Code
<select name="status" required>
<option selected disabled value="">status</option>
<!-- Additional options here (at least one should not be disabled) -->
</select>
Explanation
select will return the value of the selected option to the server when the user presses submit on the form. An empty value is the same as an empty text input → raising the required message.
More info (w3schools)
The value attribute specifies the value to be sent to a server when a form is submitted.
Example
document.querySelector('form').onsubmit = (e) => {
e.preventDefault();
const status = e.target[0].value;
console.log(`Your status is: "${status}"`);
}
<form>
<select name="status" required>
<option selected disabled value="">Select a status...</option>
<option value="Good">Good</option>
<option value="Bad">Bad</option>
</select>
<input type="submit" value="Submit">
</form>
Related
<label>Mark All Present:</label>
<input type="checkbox" name="checkall" ng-model="checkall">
<select name="status{{$index}}" ng-model="attendance_data[$index].status" required>
<option value="">Select Status</option>
<option value="Present" data-ng-selected="checkall">Present</option>
<option value="Late">Late</option>
<option value="Absent">Absent</option>
</select>
<span ng-show="submitted && attendance_form.status{{$index}}.$error.required">is Required</span>
On click on checkbox value selected as present,
but at the time of submission it shows is Required.
If i selected value with mouse on by one its working.
Quick look at the ngSelected documentation: Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.
You should update your checkbox to set the select model value appropriately on ngChange.
I have a menu page & I have few options. When I click any option, the page should redirect to a login page. Where in the login page, I have a select drop down which contains 4 options. Based on the menu selection, I need to display option which should be the default selected. That is if I click on supplier option in the menu, I need to display supplier option selected in the login page.
<a [routerLink]="['/login', {'params': 2}]"> Go </a>
So I'm just passing a parameter in URL & based on this I'm trying to select an option in the login page.
<select name="role" class="form-control input-xs input-sm input-md" [(ngModel)]="role">
<option *ngIf="{"params":"2"}" value="" disabled>Login as</option>
<option *ngIf="{"params":"3"}" value="1" selected="selected" >Supplier</option>
<option *ngIf="{"params":"4"}" value="2" selected="selected">Customer</option>
<option *ngIf="{"params":"5"}" value="3" selected="selected">OEM</option>
</select>
I'm not getting my expected result. Can somebody help me with this?
Your question is so general but I mention a sample answer. I hope it can help you.
In select tag, if you want to set a value as default you should set selected="selected" for it but in angular, you can use it as dynamic and bind it to a variable like [selected]="something === true".
If you write something like below i.e
<select name="role" class="form-control input-xs input-sm input-md">
<option value="" [selected]="myUrl === 'Login'">Login as</option>
<option value="1" [selected]="myUrl === 'TSP'">TSP</option>
<option value="2" [selected]="myUrl === 'Telemarketer'">Telemarketer</option>
<option value="3" [selected]="myUrl === 'TRAI'">TRAI</option>
</select>
Then declare myUrl in your typescript file public myUrl: string;
Now just set myUrl value to each route you would like its name to be the default.
See also Stackblitz
If the below code order status is equal then selected same will displayed in drop down.
{{ordsts.statusName}}
I have to make a form for a contact page.
I want that people put their names, email, phone number etc. etc. in different input's. The input's are all tagged with REQUIRED.
If I try to submit the form and I forget to fill in for example a name, it will give a notification that you didn't fill in your name.
That's good.
However, my dropdown menu is also required even if I don't select a value from the dropdown, I will not get a notification.
<div class="form-group">
<select class="selectpicker" name="dropdownmenu" id="selectpicker" required>
<option selected="selected" value="first_value" disabled>Kies je onderwerp</option>
<option value="dropdown_advertentie">Advertentie</option>
<option value="dropdown_suggestie">Suggestie</option>
<option value="dropdown_opmerking">Opmerking</option>
</select>
So the first value, 'Kies je onderwerp' is selected when you open the page. But when that is still selected and you click the submit button, I need a notification that you didn't select a value.
Your value for the first option has to be empty for a required check.
<select required>
<option value="">Kies je onderwerp</option>
<option value="dropdown_advertentie">Advertentie</option>
<option value="dropdown_suggestie">Suggestie</option>
<option value="dropdown_opmerking">Opmerking</option>
</select>
you can use a js validation as bellow
function validateForm() {
var x = document.forms["myForm"]["field_name"].value;
if (x == ""|| x=="first_value") {
alert("Name must be filled out");
return false;
}
}
If you are not ready to leave it empty, you can validate it by using below script. Check below snippet for reference.
$('#btnSubmit').click(function() {
if ($('#selectpicker :selected').text() == 'Kies je onderwerp') {
alert('please select a valid value');
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form><select class="selectpicker" name="dropdownmenu" id="selectpicker" required>
<option selected="selected" value="first_value" disabled>Kies je onderwerp</option>
<option value="dropdown_advertentie">Advertentie</option>
<option value="dropdown_suggestie">Suggestie</option>
<option value="dropdown_opmerking">Opmerking</option>
</select>
<input type="submit" id="btnSubmit" value="submit">
</form>
<form>
<div class="form-group">
<label for="sel1 primary"></label>
<select class="form-control" id="sel1">
<option *ngFor="let group of instanceList"(click)="change_group(group.name)" > {{group.name}}
</option>
</select>
</div>
</form>
Sorry for bad indentation.
Instancelist list is the array of object contain, id, name, groupnumber.
I want to get the value of selected option in my calling method and want to display it in console.
function change_group(groupname){
this.change_to=groupname;
console.log(change_to);
}
The problem is, the given function not even call upon selecting value in dropdown.
Why not leave the option tags alone and just subscribe to the selection changed event in the <select> tag
<select class="form-control" id="sel1" (change)="onGroupChange($event)">
(click) on <option> is usually not how to do it.
Use instead ngModel
<select class="form-control" id="sel1" ngModel (ngModelChange)="change_group($event)">
<option *ngFor="let group of instanceList" [ngValue]="group"> {{group.name}}
</option>
Here are two different datalist one with patient filenumber other with state
<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
<datalist id="patient-list">
<option value='49'>pc123</option>
<option value='48'>pc162</option>
<option value='47'>pc183</option>
<option value='45'>pc193</option>
</datalist>
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
<datalist id="state-list">
<option value='delhi'>delhi</option>
<option value='mumbai'>mumbai</option>
<option value='Haryana'>Haryana</option>
<option value='Gurgaon'>Gurgaon</option>
</datalist>
When you open drop down menu for both you will notice input for patient show value & innerHTML both and inverted(on clicking it enters value inside input field). And in State input it just simply show state
What's the reason of these different behaviors?
I want to input to show just innerHTML of option like state input and have different data in value & innerHTML
While I cannot answer your exact question, I.E. "What is the reason of this", I can tell you why it happens.
As a result of the intended functionality of the program running the code (whichever web browser you're running) the .innerHTML attribute is shown to the right of the option element only if the .innerHTML value and the .value value differ.
Here is a fiddle showing this in action, I've changed the first option to have the same .innerHTML value and .value value as an example: https://jsfiddle.net/87h3bcwd/
Further Reading on the Datalist Element that I found useful in answering this question: http://www.w3.org/TR/html5/forms.html#the-datalist-element
Code:
<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
<datalist id="patient-list">
<option value='49'>49</option>
<option value='48'>pc162</option>
<option value='47'>pc183</option>
<option value='45'>pc193</option>
</datalist>
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
<datalist id="state-list">
<option value='delhi'>delhi</option>
<option value='mumbai'>mumbai</option>
<option value='Haryana'>Haryana</option>
<option value='Gurgaon'>Gurgaon</option>
</datalist>
Using <datalist> doesn't work like <select>. It always displays the value attribute and doesn't let you change it by default.
This answer shows how to display different text if you need to - it consists of using a data- attribute and processing it with JavaScript:
Show datalist labels but submit the actual value