I have a form where I would like my users to add max 3 of languages skills and languages levels. I would like to only show it one and let user click to add one more (add one more "profile2" div, max add 3). I did not find anyway to do it.
my html code:
<div class="container">
<div class="profile2">
<label for="sel1" class="langlevel">Language</label>
<select class="form-control bfh-languages" data-language="en" id="sel1"> </select>
<label for="sel1" class="langlevel">Language Level</label>
<select class="form-control" data-language="en" id="sel1">
<option>Basic</option>
<option>Fluent</option>
<option>Professional</option>
<option>Native</option>
</select>
<button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button>
</div>
</div>
script
<script>
$("#btnAddLanguage").click(function () {
$('#container').append("<div class="profile2">
<label for="sel1" class="langlevel">Language</label>
<select class="form-control bfh-languages" data-language="en" id="sel1"> </select>
<label for="sel1" class="langlevel">Language Level</label>
<select class="form-control" data-language="en" id="sel1">
<option>Basic</option>
<option>Fluent</option>
<option>Professional</option>
<option>Native</option>
</select>
<button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button>
</div>");
});
</script>
is this what you need ? please check this.
<script>
$("#btnAddLanguage").click(function () {
var $appendItem = $('.profile2').html();
$($appendItem).appendTo('.profile2');
});
</script>
<div class="profile2">
<label for="sel1" class="langlevel">Language</label>
<select class="form-control bfh-languages" data-language="en" id="sel1"></select>
<label for="sel1" class="langlevel">Language Level</label>
<select class="form-control" data-language="en" id="sel1">
<option>Basic</option>
<option>Fluent</option>
<option>Professional</option>
<option>Native</option>
</select>
<button id="btnAddLanguage" class="btn btn-warning btn-md" type="button">Add Language</button>
</div>
Related
I am trying to create a search form within a page using Bootstrap 5 and the following code:
<div class="row mb-5">
<div class="col-lg-10 offset-lg-1">
<form class="form-inline" role="form">
<label for="field">Find all where...</label>
<select id="field" class="form-select">
<option value="company_name" selected>Company Name</option>
<option value="federal_ein" selected>EIN</option>
<option value="state">State</option>
<option value="city">City</option>
</select>
<label for="term">includes...</label>
<input type="text" class="form-control" id="term" placeholder="Enter full/partial term" name="term">
<button type="submit" class="btn btn-primary btn-lg">Search</button>
</form>
</div>
</div>
I want the form to be inline, with the text box stretched to fill unused space in the row. I can't figure out how to achieve this. Any help on it? Thanks!
This code seems to work well. Thanks!
<form id="frmSearch" name="frmSearch" role="form" class="was-validated">
<div class="row mb-4">
<div class="col-lg-2 offset-lg-1 text-end">Find companies where...</div>
<div class="col-lg-2 text-start">
<select ID="ddlType" Class="form-control rounded" required>
<option value="" selected>Search by...</option>
<option value="company_name">Company Name</option>
<option value="city">City</option>
<option value="federal_ein">EIN</option>
<option value="state">State</option>
</select>
</div>
<div class="col-lg-1 text-center">contains...</div>
<div class="col-lg-4 d-flex">
<input type="text" ID="tbTerm" class="form-control rounded text-black" required />
</div>
<div class="col-lg-1 mx-auto">
<button type="submit" ID="btnSearch" class="btn-success btn text-white">Search</button>
</div>
</div>
</form>
I'm using <label asp-for and <input asp-for tags inside my form to carry out "Create Form" action as well as Bootstrap for looks. How do I fix this bug, it's working with asp-for, I can create and edit successfully through these fields but its looks rather twisted than user friendly.
<div class="form-group">
<label asp-for="City" class="control-label"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger"></span>
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<label asp-for="Department" class="dropdown-item">HR</label>
<input asp-for="Department" class="form-control" />
<label asp-for="Department" class="dropdown-item">Sales</label>
<input asp-for="Department" class="form-control" />
</div>
<span asp-validation-for="Department" class="text-danger"></span>
</div>
</div>
Here is the result:
Before select
During select
After select
As you can see its not populating inside the text field but its there, I tested it. Maybe there is other way to do it with HTML tags?
Do you want something like this, you can use the <select> tag to implement the dropdown:
<div class="form-group">
<label asp-for="City" class="control-label"></label>
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Department" class="control-label"></label>
<select asp-for="Department" class="form-control">
<option selected>Choose Department</option>
<option value="HR">HR</option>
<option value="Sales">Sales</option>
<option value="Other">Other</option>
</select>
</div>
Result:
I have this form right here:
<form (ngSubmit)="onSubmit()" #testForm="ngForm">
<div class="form-group col">
<label for="a">a</label>
<select class="form-control" id="a" [(ngModel)]="form.a" name="a" required>
<option value="x">x</option>
<option value="y">y</option>
</select>
</div>
<div class="form-group">
<label for="b">b</label>
<input class="form-control" id="b" [(ngModel)]="form.b" name="b" required />
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">d
</label>
</div>
<div class="col text-right">
<button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid">Submit</button>
</div>
</form>
With this component-code behind:
export class FormComponent {
form = new Form();
submitted = false;
onSubmit() {
this.submitted = true;
}
}
What I want to achieve is that my button only gets enabled, when both the dropdown and the input field are filled in, which works with the required attribute, AND both checkboxes are checked, which doesn't work.
My question: Is there something like required for Checkboxes, or are there other ways to solve this problem?
Try this way:
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" [checked]="ch2" (change)="ch2= !ch2" class="form-check-input">c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" [checked]="ch1" (change)="ch1= !ch1" class="form-check-input">d
</label>
</div>
<div class="col text-right">
<button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid || !ch1 || !ch2">Submit</button>
</div>
I'm trying to dynamically add fields to the choices array when addNewChoice is clicked but still unsuccessful.
<form class="form-inline">
<fieldset *ngFor="let choice of choices">
<div class="form-group">
<select class="form-control" id="timeZonePicker">
<option value="-12" >(GMT -12:00) Eniwetok, Kwajalein</option>
<option value="-11" >(GMT -11:00) Midway Island, Samoa</option>
............
</select>
</div>
<div class="form-group">
<input type="time" class="form-control" id="startTimeInput">
</div>
<div class="form-group">
<input class="time" class="form-control" id="endTimeInput">
</div>
</fieldset>
</form>
<button class="pull-left btn btn-success" (click)="addNewItem()">Add Field</button>
<button class="pull-left btn btn-danger" (click)="removeItem()">Remove Field</button>
Here is the component.
export class TimeZonesComponent {
constructor(){}
choices = [{id: 1}, {id: 2}];
addNewChoice(){
var newItemNo = this.choices.length + 1;
this.choices.push({'id': newItemNo});
}
removeChoice(){
var lastItem = this.choices.length - 1;
this.choices.splice(lastItem);
}}
I've tried a bunch of different Angular.js solutions on here but no luck with Angular2. Any help is much appreciated!
No function like addNewItem and removeItem.
<button class="pull-left btn btn-success" (click)="addNewChoice()">Add Field</button>
<button class="pull-left btn btn-danger" (click)="removeChoice()">Remove Field</button>
I am trying to build a simple horizontal search & filtering form using Twitter Bootstrap as can be seen in the image attached.
I am trying to build it so it adapts to different screen sizes as shown in the image. The results that I receive from my code aren't according my expectations.
<div id="search_block" class="panel-body">
<form role="form" class="form-horizontal" method="post" action="">
<div class="form-group">
<label class="col-xs-2 col-sm-2 col-md-1 control-label" for="v_search">Search:</label>
<div class="col-xs-8 col-sm-8 col-md-4">
<input type="text" placeholder="Enter Search Keywords" value="" name="v_search" id="v_search" class="form-control">
</div>
<div class="button-group col-xs-8 col-sm-8 col-md-2">
<button class="btn btn-primary" value="search" name="search" type="submit">Search</button>
<button class="btn btn-default" value="reset" name="reset" type="reset">Reset</button>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 col-sm-2 col-md-1 control-label" for="filters">Filters:</label>
<div class="col-xs-8 col-sm-8 col-md-2" id="filters">
<select class="form-control" name="section_id">
<option value="all">All Sections</option>
<option value="all">Test</option>
</select>
</div>
<div class="col-xs-8 col-sm-8 col-md-2">
<select class="form-control" name="category_id">
<option value="all">All Categories</option>
<option value="71">Test</option>
</select>
</div>
</div>
</form>
My code can be found at: http://jsfiddle.net/NB89d/
You can use the col-*-offset classes to achieve what you want.
Demo: http://www.bootply.com/126439