I have an issue where by I need a nicer-looking way to use select option that caters to Countries (240+ countries). I plan to use select2 to enhance the searching experience.
Now, a regular select-option with some values in it will just look like this
<select>
<option value=..></option>
<select>
But in the case of selecting Nationality, there are 240+ countries and suddenly a nice piece of code like this will look terrible.
<div class="form-group">
<label for="alias" class="col-sm-2 control-label">Alias</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" id="alias" placeholder="Employee alias">
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-2 control-label">DoB</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" id="dob" placeholder="Date of birth">
</div>
</div>
<! 240++ lines worth of options->
Any inputs?
You can use JQuery and Array() for this kind of things someway. Just put the countries you want to be shown in var countries which is array. But it will be easier to make .cvs file that has all the country names on the database and call them from it. Anyways this JQuery source might help for your question.
$(document).ready(function(){
var countries = new Array();
/* here you put all the countries you want in array */
countries = ["Korea", "USA", "China", "India", "etc"];
for(i = 0;i < countries.length;i++) {
$("#select2").append("<option value='"+countries[i]+"'>"+countries[i]+"</option>");
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>test</title>
</head>
<div class="form-group">
<label for="alias" class="col-sm-2 control-label">Alias</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" id="alias" placeholder="Employee alias">
</div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-2 control-label">DoB</label>
<div class="col-sm-10">
<input type="text" class="form-control input-sm" id="dob" placeholder="Date of birth">
</div>
</div>
<!-- 240++ lines worth of options -->
<div class="form-group">
<label for="select2" class="col-sm-2 control-label">Select Country</label>
<div class="col-sm-10">
<!-- this is where countries enters -->
<select name="" id="select2">
</select>
</div>
</div>
</body>
</html>
Related
I am developing a system I have been asked to do but the form elements are not clickable to enter any info in the fields, I have tried moving the form tag to above the very first div in the code below in case it was the issue but did not work unfortunately. I am not sure what else to try, can someone have a look at the code below please
Update: I have got the form elements working by adding zindex: 9999; to .form-group class in the CSS but now the datetimepicker is appearing behind the select dropdown menu. I have uploaded a screenshot of the issue to the link below
Here is a screenshot of my issue:
My code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12" id="detail">
<form name="addData" id="addData" action="" method="post">
<div class="row">
<div class="form-group col-lg-3">
<input type="hidden" name="eventID" id="eventID" class="form-control">
<label for="StartDate">Start Date: </label>
<input type="date" class="form-control" required name="StartDate" id="StartDate" />
</div>
<div class="form-group col-lg-3">
<label for="StartTime" style="margin: 0 0 15px 0;">Start Time: </label>
<div class='input-group date' id='datetimepicker3'>
<input name="StartTime" id="StartTime" type='text' required class="form-control" />
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
<div class="form-group col-lg-3">
<label for="StartDate">End Date: </label>
<input type="date" required class="form-control" name="EndDate" id="EndDate" />
</div>
<div class="form-group col-lg-3">
<label for="EndTime" style="margin: 0 0 15px 0;">End Time: </label>
<div class='input-group date' id='datetimepicker4'>
<input name="EndTime" id="EndTime" required type='text' class="form-control" />
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
<div class="row">
<div class="form-group col-lg-3">
<label for="riders_name">Riders Name: </label>
<select class="form-control" style="height: 34px;" required name="riders_name" id="riders_name"></select>
</div>
<div class="form-group col-lg-3">
<label for="horses_name">Horses Name : </label>
<select class="form-control" style="height: 34px;" required name="horses_name" id="horses_name">
<option value="">--Empty--</option>
</select>
</div>
<div class="form-group col-lg-3">
<label for="instructor_name">Instructor Name : </label>
<select class="form-control" style="height: 34px;" required name="instructor_name" id="instructor_name">
<option value="">--Empty--</option>
</select>
</div>
<div class="form-group col-lg-3">
<label for="groom_name">Groom Name : </label>
<select class="form-control" style="height: 34px;" required name="groom_name" id="groom_name">
<option value="">--Empty--</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="form-group col-lg-9">
<label for="comments">Comments : </label>
<textarea name="comments" id="comments" class="form-control"></textarea>
</div>
<div class="form-group col-lg-3">
<label for="Repeat">Repeat : </label>
<select class="form-control" style="height: 34px;" required name="Repeat" id="Repeat">
<option value="0">none</option>
<option value="1">Daily</option>
<option value="2">Weekly</option>
<option value="3">Monthly</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-lg-1">
<button type="submit" class="btn btn-primary" name="submit" id="submit">Submit</button>
</div>
<div class="form-group col-lg-1">
<button type="submit" class="btn btn-danger" name="cancel" id="cancel">Cancel</button>
</div>
<div class="form-group col-lg-5">
</div>
<div class="form-group col-lg-5">
</div>
</div>
</form>
</div>
<script>
$.getJSON("fullcalendar/getriders.php", function(data) {
var select = $('#riders_name'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
} else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value) {
options[options.length] = new Option(value['name'], value['id']);
});
});
$.getJSON("fullcalendar/getinstructors.php", function(data) {
var select = $('#instructor_name'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
} else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value) {
options[options.length] = new Option(value['name'], value['id']);
});
});
$.getJSON("fullcalendar/getgrooms.php", function(data) {
var select = $('#groom_name'); //combo/select/dropdown list
if (select.prop) {
var options = select.prop('options');
} else {
var options = select.attr('options');
}
$('option', select).remove();
$.each(data, function(key, value) {
options[options.length] = new Option(value['name'], value['id']);
});
});
</script>
I see several empty <select></select> tags in your form. I suspect you are intending text fields there? If so you need to replace <select></select> with <input type="text" />.
Example, this:
<label for="riders_name">Riders Name: </label>
<select class="form-control" style="height: 34px;" required name="riders_name" id="riders_name"></select>
...should be:
<label for="riders_name">Riders Name: </label>
<input class="form-control" type="text" style="height: 34px;" required name="riders_name" id="riders_name" />
Select drop down always higher z-index set by default by browsers. You have two row one underneath other. You should in top row set higher z-index value with position: relative; then I hope it will work as expected.
Add CSS code with following way:
.higher-z-index {
postion: relative; // This line help z-index work relatively
z-index: 999;
}
Your markup will be something like that:
<div class="row higher-z-index">
.....
....
</div>
<div class="row">
.....
....
</div>
Why this approach:
You should keep it mind this is dose not matter how much z-index value applied in .form-group selector it will work for only sibling elements. But in your case it is going behind of next row elements because modern browsers set by default higher z-index in each next sibling elements until we set explicitly. So underneath row getting higher z-index than top row. So it is dose not matter how many higher z-index value are applied inside of top row container, all will go behind of next row container.
Pardon me if the question is absurd. I need to do something like this.
I have this two external css files in my html document.
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/mdb.css">
There is a form in my html as follows:
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>New Affiliate Signup</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="fname">First Name</label>
<div class="col-md-5">
<input id="fname" name="fname" type="text" placeholder="First Name" class="form-control input-md" required="">
</div>
</div>
</fieldset>
</form>
mdb.css - contains the same classes and Ids as that of bootstrap.css but they have been manipulated to give advanced visual effects (hovering,button colors, shadow colors and other advanced features) without affecting the core content of the bootstrap.css
But I don't need mdb.css to affect in my <form> yet I still need it for other elements in my <html> document (Headers, Carousels etc...)
Since I have already linked the mdb.css it will affect all the elements including <form>.
Can I only be able to link bootstrap.css to my <form> without linking mdb.css and without removing mdb.css inside <head>
Like putting a <div> around <form> and setting only the bootstrap.css stylesheet to that <div>?
Please someone help me?
I think that one solution could be to add a class "without-mdb" to your form and add ":not(.without-mdb)
Why dont you just add individual classes to your mdb.css stylesheet that do what you want it to do and include it within your element? Rather than trying to update standard bootstrap classes.
This is the simpler option but would require some refactoring of your mdb.css stylesheet.
Example
.redBackground
{
/* !important rule overrides any existing styles on the element */
background: red !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>New Affiliate Signup</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="fname">First Name</label>
<div class="col-md-5">
<!-- Add the new css class as additional class in your markup !-->
<input id="fname" name="fname" type="text" placeholder="First Name" class="form-control input-md redBackground" required="">
</div>
</div>
</form>
You cannot apply CSS files to elements. You apply CSS rules from CSS files to elements.
To keep the bootstrap styles of your <form> element AND keep both CSS files without changes in the head section, you will have to add a specific selector to the <form> (like
a class .no-mdb) and notate some additional CSS rules with higher specificity, that revert the mdb styles to the bootstrap styles.
Here is a working example:
.no-mdb {
/* your reverting styles go here.
make sure your styles have a higher specificity to properly overwrite your existing styles */
color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-6">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</div>
<div class="col-xs-6">
<form class="no-mdb">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</div>
Nevertheless the better approach would be, to properly handle the form in your mdb.css.
My text area place holder is not showing up. All previous answers I have seen here describe there should be no space or new line between opening and closing tags of text area and my code don't have both. Is data-validation-required-message is creating problem ? How can I solve this.
Here is my code:
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
I go and try
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
But it`s work for me !:S
It works, check the snippet:
Demo: https://reactiveraven.github.io/jqBootstrapValidation/
$(function() {
prettyPrint();
$("input,textarea,select").jqBootstrapValidation(
{
preventSubmit: true,
submitError: function($form, event, errors) {
// Here I do nothing, but you could do something like display
// the error messages to the user, log, etc.
},
submitSuccess: function($form, event) {
alert("OK");
event.preventDefault();
},
filter: function() {
return $(this).is(":visible");
}
}
);
$("a[data-toggle=\"tab\"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
<link rel="stylesheet" href="https://reactiveraven.github.io/jqBootstrapValidation/css/prettify_bootstrap.css">
<link rel="stylesheet" href="https://reactiveraven.github.io/jqBootstrapValidation/css/bootstrap.css">
<script src="https://reactiveraven.github.io/jqBootstrapValidation/js/jQuery-1.7.2-min.js"></script>
<script src="https://reactiveraven.github.io/jqBootstrapValidation/js/bootstrap.js"></script>
<script src="https://reactiveraven.github.io/jqBootstrapValidation/js/prettify.js"></script>
<script src="https://reactiveraven.github.io/jqBootstrapValidation/js/jqBootstrapValidation.js"></script>
<form class="form-horizontal" novalidate>
<div class="control-group">
<label class="control-label" for="email">Email address</label>
<div class="controls">
<input type="email" name="email" id="email" required>
<p class="help-block">Email address we can contact you on</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="emailAgain">Email again</label>
<div class="controls">
<input type="email" data-validation-matches-match="email" data-validation-matches-message="Must match email address entered above" id="emailAgain" name="emailAgain">
<p class="help-block">And again, to check for speeling miskates</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="terms-and-conditions">Legal</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="terms-and-conditions" name="terms-and-conditions" required data-validation-required-message="You must agree to the terms and conditions">
I agree to the terms and conditions
</label>
<p class="help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label">Quality Control</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="qualityControl[]" value="fast" data-validation-minchecked-minchecked="2" data-validation-minchecked-message="Choose two" data-validation-maxchecked-maxchecked="2" data-validation-maxchecked-message="You can't have it all ways" >
Fast
</label>
<label class="checkbox">
<input type="checkbox" name="qualityControl[]" value="cheap">
Cheap
</label>
<label class="checkbox">
<input type="checkbox" name="qualityControl[]" value="good">
Good
</label>
<p class="help-block"></p>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Test Validation <i class="icon-ok icon-white"></i></button><br />
</div>
</form>
Note
Now if you want to display this message Please enter a message. then you have to validate this using jQuery. Because its data-validation-required-message is used to display custom validation message.
I have created a basic form that contains various input elements (mainly text) all of the text boxes have the 'Required' attribute set plus a simple regex pattern. Using Angular 2's Form directive I am disabling a button if the field text inputs are empty or the regex is not met. This works as expected. However, thrown into the mix is a 'Select' element with 2 'Option' child elements. The first is my default and the second my data bound list. I would like to set the form.invalid property to true if the initial:
<option value="default">Select a department...</option>
is selected from the combo box.
My issue as it stands is that if I enter valid data into all of my text boxes but leave the combo box as 'Select a department...' the form.invalid property is false and the button is enabled. As 'Select a department...'
is not a valid value I need the button to become disabled if that is selected?
Current HTML select code as it stands
<form class="form-inline" #form="ngForm" novalidate>
<div class="col-sm-12">
<div class="form-group" [class.has-error]="AddfirstName.invalid && AddfirstName.touched">
<label class="col-sm-12 control-label" for="AddfirstName">First Name:</label>
<div class="col-sm-12">
<input class="form-control" #AddfirstName="ngModel" required pattern="\D+" placeholder="First Name" [ngModel]="firstName" (ngModelChange)="firstLetterOfFirstNameToUpperCase($event)"
name="firstName">
<div class="alert alert-danger" *ngIf="AddfirstName.invalid && AddfirstName.touched ">First Name Is mandatory and cannot contain numbers</div>
</div>
</div>
<div class="form-group" [class.has-error]="AddlastName.invalid && AddlastName.touched">
<label class="col-sm-12 control-label" for="AddlastName">Last Name:</label>
<div class="col-sm-12">
<input class="form-control" #AddlastName="ngModel" required pattern="\D+" placeholder="Last Name" [ngModel]="lastName" (ngModelChange)="firstLetterOfLastNameToUpperCase($event)"
name="lastName" />
<div class="alert alert-danger" *ngIf="AddlastName.invalid && AddlastName.touched ">Last Name Is mandatory and cannot contain numbers </div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group" [class.has-error]="AdduserName.invalid && AdduserName.touched">
<label class="col-sm-12 control-label" for="AdduserName">User Name:</label>
<div class="col-sm-12">
<input class="form-control" #AdduserName="ngModel" required placeholder="User Name" ngModel name="userName" />
<div class="alert alert-danger" *ngIf="AdduserName.invalid && AdduserName.touched">User Name Is mandatory</div>
</div>
</div>
<div class="form-group"[class.has-error]="Addpassword.invalid && Addpassword.touched">
<label class="col-sm-12 control-label" for="Addpassword">Password:</label>
<div class="col-sm-12">
<input type="password" class="form-control" #Addpassword="ngModel" required placeholder="Password" ngModel name="password" />
<div class="alert alert-danger" *ngIf="Addpassword.invalid && Addpassword.touched ">Password Is mandatory</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group" [class.has-error]="hasDepartmentError">
<label class="col-sm-12 control-label" for="Department">Department:</label>
<div class="col-sm-12">
<select class="form-control" id="Department" #AddDepartment="ngModel" [(ngModel)]="addDepartment"
[ngModelOptions]="{standalone: true}"
(change)="validateDepartment(AddDepartment.value)"
(blur)="validateDepartment(AddDepartment.value)">
<option value="default">Select a department...</option>
<option *ngFor="let department of departmentList">{{department.name}}</option>
</select>
<div class="alert alert-danger" *ngIf="hasDepartmentError">Department Is mandatory</div>
</div>
</div>
</div>
<div class="col-sm-12">
<button class="btn btn-primary" (click)="addUser(AddfirstName.value, AddlastName.value, AdduserName.value, Addpassword.value, AddDepartment.value);
AddfirstName.value=null;AddlastName.value=null;Addpassword.value=null;AdduserName.value=null;" [disabled]="form.invalid">Add</button>
</div>
</form>
</div>
</div>
Remove the value from your first option and mark your select required:
<select class="form-control" id="Department" #AddDepartment="ngModel" [(ngModel)]="addDepartment"
[ngModelOptions]="{standalone: true}"
(change)="validateDepartment(AddDepartment.value)"
(blur)="validateDepartment(AddDepartment.value)"
required>
<option>Select a department...</option>
<option *ngFor="let department of departmentList">{{department.name}}</option>
</select>
Seems you have forgotten to put required on your select. Your two-way binding also seems to take away the default value of the drop down list, so I would loose that and just use ngModel instead. You really don't need to use two-way binding in forms, the form names take care of that, and when you submit the form, you have a nice object to work with.
when you loose the ngModel, you also drop the ngModelOptions and use the name attribute instead, which would be needed for the form.
I'm also unsure about the validateDepartment method. You wouldn't need it, as you can validate this in the template.
So all in all the final snippet of your select could look like this:
<select required #addDepartment="ngModel" name="addDepartment" ngModel>
<option value="">Select a department...</option>
<option *ngFor="let department of departmentList">{{department.name}}</option>
</select>
<div *ngIf="addDepartment.errors?.required">
Department required!
</div>
Here's a
Plunker
to play with, where you can also see the object created from the form! :)
I am just learning and coding the same time with Boostrap and the layout I am thinking is something like this:
Row
<SmallerColumn that hold label 1> <Larger Column that hold the control 1>
<SmallerColumn that hold label 2> <Larger Column that hold the control 2>
EndRow
So for example a combobox and a label that says what is that conmbox for.
For example: Country: Combobox of Countries
form-horizontal class of bootstrap is what you need. However different rows will be taken care of by the form-group class. But using a form-control class will lead you to have a border around the text as:
In order not to have a border, using control-label as the class.
Try this code:
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Islands:</label>
<div class="col-sm-10">
<label class="control-label" id="l1" >Combobox of Islands 1</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Countries:</label>
<div class="col-sm-10">
<label class="control-label" id="l2" >Combobox of Countries 1</label>
</div>
</div>
</div>
Here is a jsfiddle: https://jsfiddle.net/mayank_shubham/an197vva/
The question is very simple, but somehow confusing for first timers, don't sweat it, it only requires a quick read on Bootstrap's documentation regarding form control layout.
An extract of the layout would be:
<form class="form-horizontal">
<div class="form-group">
<label for="inputField" class="col-sm-2 control-label">LabelText</label>
<div class="col-sm-10">
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputField" class="col-sm-2 control-label">LabelText</label>
<div class="col-sm-10">
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</form>
No need for .row as .form-group will take care of newly appended elements.