dropdown with form fields bootstrap 3 - javascript

I'm trying to build a dropdown that functions like in the image below (or go to kayak's website):
I need a dropdown field within the dropdown field, and then I need a couple of fields that allow incrementing/decrementing.
I couldn't even get a dropdown within the dropdown to work right. I tried variations of the following:
I've tried variations of:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<form>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
</form>
</div>
I didn't even know where to begin for the increment parts of each text field.
Any thoughts on how to do this?
UPDATE: I can't keep the main dropdown open to be able to click on the dropdown or increment/decrement field within the main dropdown. The main dropdown just closes on me. Below is my latest code:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
<div class="container">
<h2>Bootstrap Counter Field</h2>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>

Related

how to get the li element on button dropdown clicked?

<div class="input-group">
<div class="input-group-btn addon-button" toggle-dropdown>
<button type="button" class="button-m button-default dropdown-toggle http-button copyInput" data-toggle="dropdown" style="border-right:none !important;">
<span id="addresstype" class="custom-input">Http://</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-m dropdown-menu-m-small custom-dropdown-withInput w-100 p-0">
<li id="Http://">
Http://
</li>
<li id="Https://">
Https://
</li>
</ul>
</div>
</div>
What javascript code or directive to be used?

ui bootstrap append dropdown-append-to doesnt work

Im having this code with a ui-bootstrap dropdown:
<div class="btn-group" style="float: right" uib-dropdown keyboard-nav dropdown-append-to="projectTreeBtn.add">
<button type="button" class="btn btn-default projectTreeBtn" ng-click="deleteElement()"><span class="glyphicon glyphicon-remove"></span> Löschen</button>
<button type="button" class="btn btn-default projectTreeBtn" id="projectTreeBtn.add"><span class="glyphicon glyphicon-plus"></span> Hinzufügen</button>
<button type="button" class="btn btn-default projectTreeBtn" uib-dropdown-toggle><span class="caret"></span></button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="projectTreeBtn.add">
<li role="menuitem"></li>
<li role="menuitem"></li>
<li role="menuitem"></li>
<li role="menuitem"></li>
</ul>
</div>
I want the dropdown to be appended to the second button, but it always appears to be like this

link not work in Bootstrap dropdown button

This is my code :
<div class="btn-group" data-toggle="dis-rclick" data-target="#rightclickAlert">
<button type="button" class="btn btn-info">Translator</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="label-info" style="display: none">
Edit
</li>
<li class="label-danger">
Disable
</li>
</ul>
When I open the drop down list and click on any item i don't get any response.
For example: When I click on Edit I want to reload page but that doesn't work.
Whats wrong?

.clone() and .remove() method in jquery

My task is to achive the functionality, when I click on a button, then it add a full row, which is achived by me by .clone() method. Now I want to delete this. When I click on cross button, then only remove that line. As shown in image:
When I click on cross, then remove that line. My code is:
$(document).ready(function () {
$("button#add").click(function(){
$(".abcd:last").clone().appendTo(".wrapper");
});
$(".glyphicon-remove").click(function () {
$(".abcd:last").remove();
});
});
html:
<div class="wrapper">
<div class="form-group abcd" id="abcde">
<div class="col-sm-12" >
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">All days
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday</li><li class="week">Tuesday</li>
<li class="week">Wednesday</li><li class="week">Thusday</li>
<li class="week">Friday</li><li class="week">Saturdayy</li>
<li class="week">Sunday</li>
</ul>
</div>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<label for="exampleInputEmail1"> to </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<span class="glyphicon glyphicon-remove"></span>
</div>
</div>
</div>
</form>
<button type="button" id="add" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Add</button>
<button type="button" id="remove" class="btn btn-default dropdown-toggle" data-toggle="dropdown">remove</button>
I am able to add New line by click on add button, but unable to hide that line by click on cross.
Note: remove only that line, which line cross button is selected.

First, you'll need to change your clone to that :
$(".abcd:last").clone(true).appendTo(".wrapper");
Passing true mean that it is cloning events as well.
Then, in your remove function, you'll need to use this keyword. this will be the button clicked. You can then use DOM traversal method like closest to remove your row :
$(".glyphicon-remove").click(function () {
$(this).closest(".abcd").remove();
});

Alternatively, you can bind the event to the container like this:
$(document).ready(function () {
$("button#add").click(function () {
$(".abcd:last").clone().appendTo(".wrapper");
});
$(".wrapper").on('click', '.glyphicon-remove', function () {
$(".abcd:last").remove();
});
})

How can i add or append more then one dropdown [duplicate]

This question already has an answer here:
add previous functionality when click on add button(parent child concept in jquery) [closed]
(1 answer)
Closed 9 years ago.
My task is to add previous form when i click on add button.
When i click on Add button it will add all dropdown below each as shown in image.
And remove one line(means all 5 dropdown of one line).I am to do this functionality.
problem is:
how we can append or add one line each click on add button.
my coading is:
jQuery:
$(document).ready(function () {
$(".glyphicon").click(function () {
$(this).parents('.form-group').remove();
});
$(".add").click(function () {
$("form").parent(".form-group").add();
});
});
$(document).ready(function () {
$(".glyphicon").click(function () {
$(this).parents('.form-group').remove();
});
$(".add").click(function () {
$("form").parent(".form-group").add();
});
});
Html:
<div class="form-group">
<div class="col-sm-12" >
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">All days
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday</li><li class="week">Tuesday</li>
<li class="week">Wednesday</li><li class="week">Thusday</li>
<li class="week">Friday</li><li class="week">Saturdayy</li>
<li class="week">Sunday</li>
</ul>
</div>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<label for="exampleInputEmail1"> to </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<span class="glyphicon glyphicon-remove"></span>
</div>
</div>

Try using .clone() from jQuery lib and simply clone last element.
Clone manual here
EDIT:
The answer to this problem is in comments bellow ( jQuery on() function)

thank you I did this:
coading is:
$("#add").click(function(){
$(".abcd:last").clone().appendTo(".wrapper");
});
Refered link:
Cloning whole form elements after clicking button

Categories

Resources