I am new to angular 5. I need a help to add dropdown menu, when I select the contents in dropdown the search box should be displayed.
This is text box code.I need to put this in dropdown so that when I'll select A i need to get search text box for A. When i select module same text box should be displayed for module.
<div class="col-sm-1">
<label for="A">A:</label>
</div>
<div class="col-sm-3">
<input type="text" name="A" [(ngModel)]="A" class="form-control" id="A">
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-primary" (click)="searchA()">search</button>
</div>
<div class="col-sm-1">
<label for="module">MODULE:</label>
</div>
<div class="col-sm-3">
<input type="text" name="module" [(ngModel)]="module" class="form-control" id="module">
</div>
<div class="col-sm-1">
<button type="submit" class="btn btn-primary" (click)="searchModule()">search</button>
</div>
</div>
Instead of two search text boxes, I want use dropdown to display single search textbox.
Here is a short example of accomplishing it. (i ignored bootstrap for brevity)
It was possible, by declaring my dropdown value as a variable called "searchOption" and then using it as a condition for every search button.
Select
<select [(ngModel)]="searchOption">
<option value="A">A</option>
<option value="module">module</option>
</select>
<button type="submit" class="btn btn-primary" (click)="searchA()" *ngIf="searchOption == 'A'">searchA</button>
<button type="submit" class="btn btn-primary" (click)="searchModule()" *ngIf="searchOption == 'module'">searchModule</button>
Related
In my app i want the user click on participate button to participate to an event and i want he will receive an email in the same time when he click !
The 2 function work well in the app but i can't make them in the same time when the user click on participate button !!
I have two routes with two different controllers:
Route::post('/participations/{id}','App\Http\Controllers\EventController#participate')->name('participate');
Route::post('/event/mails','App\Http\Controllers\EmailController#participate')->name('mails');
This is my form :
<form action="{{route('mails')}}" action="{{route('participate', [$event->id])}}" method="POST">#csrf
<div class="modal-body">
<div class="form-goup">
<label>Your name *</label>
<input type="text" name="friend_name" class="form-control" required="">
</div>
<div class="form-goup">
<label>Your email *</label>
<input type="email" name="friend_email" class="form-control" required="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Participate</button>
</div>
</form>
I can't find a way to fix that ! any help ?
Thanks in advance !
I used this Bootstrap 3 code to change radios into buttons:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 1" checked>Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 2">Option 2
</label>
</div>
It works well in the jsfiddle but in my website the color of buttons are not changed when clicked. It always is like this:
But the submitted value is correct.
I added this code to add .active class manually:
// Change the color of selected radio button
$('label.btn').click(function() {
$(this).parent('.btn-group').children('label.btn').addClass('active');
$(this).removeClass('active');
});
UPDATE:
This code is not needed. You just need to add class 'active' to one of labels initially.
This code works well without any js:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="sim_type" value="option 1" checked>Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 2">Option 2
</label>
</div>
I am creating a bootstrap btn-group that I want to give the user the ability to select one or no options from. Everything on the data end is working great except for the fact that I can not remove the active class from the button when the user turns it off.
<div class="btn-group" id="localRasterBG" data-toggle = "buttons">
<label class="btn btn-default localBaseMaps" id="btnLand Cover" data-layerName="Land Cover" onclick="rasterButtonClick(event)" >
<input type="radio" name="options" id="btnLandCover" autocomplete="off"> Land Cover
</label>
<label class="btn btn-default localBaseMaps" data-layerName="Elevation" onclick="rasterButtonClick(event)">
<input type="radio" name="options" id="btnElevation" autocomplete="off"> Elevation
</label>
<label class="btn btn-default localBaseMaps active" id="btnPopulation" data-layerName="Population" onclick="rasterButtonClick(event)">
<input type="radio" name="options" id="btnLandScan" autocomplete="off"> Population
</label>
</div>
However, I am unable to remove the "active' class with javascript:
function rasterButtonClick(e){
e.target.removeClass("active");
}
Any idea what I could be doing wrong?
Thanks, Tyler
removeClass is a jQuery function, you need to change it to:
$(e.target).removeClass("active");
I want to create somthing that in bootsrap:
[colorpicker | input box | button] [toggle button]
I have used:
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send</button>
<button class="btn btn-default">Users</button>
</span>
</div>
However, I don't know what colorPicker for bootstrap I should use (only 9 colors pickers) and how to add it on left side.
Any help is welcome.
Fiddle: http://jsfiddle.net/5B5v5/
Since I think you're saying you want a color picker with just 9 color options, I would go with a dropdown instead of a fully baked color-picker plugin... like so:
<div class="form-inline">
<div class="input-group">
<div class="input-group-btn">
<!-- COLOR PICKER -->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><span style="color:cyan" class="glyphicon glyphicon-tint"></span> Cyan</li>
<li><span style="color:blue" class="glyphicon glyphicon-tint"></span> Blue</li>
<li><span style="color:magenta" class="glyphicon glyphicon-tint"></span> Magenta</li>
<li>...more...</li>
</ul>
<!-- END COLOR PICKER -->
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div>
<button class="btn btn-primary" type="button">Send</button>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-user"></span></button>
</div>
</div>
DEMO: http://www.bootply.com/ecziRvg9Jg
If you do find a true color picker that lets you do 9 colors only, attach it to the button I commented in the code.
It seems buttons-radio no longer works in Bootstrap 3
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-default" value="1" type="button" >1</button>
<button class="btn btn-default" "value="2" type="button" >2</button>
</div>
It has been replaced with radio button inputs. Is there any way to bring back the only one button allowed to be checked in a group with buttons? I need to be able to have the group be totally unpicked after one item has been selected so radio buttons won't do.
This ended up being the answer for me to keep using buttons in a radio type in BS3:
$(this).addClass("current").siblings().removeClass("active");
This ended up being the answer for me to keep using buttons in a radio type in BS3:
$(this).addClass("current").siblings().removeClass("active");
Could you give all of the radio's the same name=? Then they'll toggle each other..
<label class="radio-inline">
<input type="radio" name="radioGroup" id="radio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="radioGroup" id="radio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="radioGroup" id="radio3" value="option3"> 3
</label>
Demo: http://bootply.com/75922
Add
data-toggle="button"
to each radio button
Source http://labs.thecssninja.com/bootleg/index.html#buttons
Add input type="radio" inside tab:
<a href="#prices" class="btn btn-default active" data-toggle="tab">
<input type="radio">Prices
</a>