I want to create a clickable button which send me the user at the form section(at same page).
<button type="button" class="btn btn-primary btn-sm">
send me to the form
</button>
...
<form id="form1">
<div class="form-group">
...
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
But I didn't find any solution.
Is there any why to do it without rely on jquery/JS? If not then how to target the form? Here is my codepen in case you need it.
nest your button in the link tag this way:
<a href="#form-1">
<button type="button" class="btn btn-primary btn-sm">
send me to the form
</button>
Related
If I would need to add a tooltip to a disabled button, I would just wrap the button and place the tooltip on the wrapper.
But how can I add a tooltip to a disabled button if the button is part of a button group? I of course could again use a wrapper, but the button group wouldn't look correct anymore. I would like to not add any extra css for this.
<div class="btn-group btn-group-sm">
<button class="btn btn-success" type="submit" (click)="...">
...
</button>
<button class="btn btn-secondary" type="button" (click)="...">
...
</button>
// this is bad as it breaks the button group style
<div [ngbTooltip]="someConditionThatCanBeTrue ? 'tooltipMessage' : ''">
<button class="btn btn-sm btn-danger" type="button"
[disabled]="someConditionThatCanBeTrue" (click)="...">
...
</button>
</div>
</div>
You can do it by simply adding btn-group btn-group-sm class to the:
<div **class="btn-group btn-group-sm"** [ngbTooltip]="someConditionThatCanBeTrue ? 'tooltipMessage' : ''">
.....
</div>
<button type="button" class="btn btn-outline-secondary mb-3">Order now</button>
I have already tried adding href in between but it's not working.
<button type="button" class="btn btn-outline-secondary mb-3" href="http://webofpicasso.net">Order now</button>
you need to wrap your button In an anchor tag.
like this:
Order now</button>
I have a simple submit button like this:
<button
type="submit"
value="Create New Item"
className="btn btn-lg btn-primary btn-block mt-4"
/>
and I've been wondering, why the value (label of the button) has the default value instead of desired one ("Create New Item"), no matter what I do.
The same goes to input type="submit", but after reading this, I decided to stick with button.
Any ideas why I can't change the value?
<input type="submit" value="Create New Item" className="btn btn-lg btn-primary btn-block mt-4" />
Change button, to input type="submit"
Try this one,
<button onClick={onClickMethod}> Click Here </button>
if you want to change the text inside a button dynamically; you should set it like:
<button>{this.state.buttonLabel}</button>
Just use the element like this
<button type="submit" className="btn btn-lg btn-primary btn-block mt-4">Create
New Item</button/>
You no need to specify the input type, just replace with as below:
<button className="btn btn-lg btn-primary btn-block mt-4">
Create New Item
</button>
You can add onClick event.
PLease delcare the button as below
<button type="submit" className="btn btn-lg btn-primary btn-block mt-4">
Create New Item
</button>
I have this button and I want to make it calls methods when I click on "Select" and another method when I click "Change":
<button type="button" class="btn btn-default" *ngIf="!edit" class="btn btn-default">
<span *ngIf="isNullOrUndefined(class?.classForeignId)">Select</span>
<span *ngIf="!isNullOrUndefined(class?.classForeignId)">Change</span>
</button>
i have tried to put (click)="method()", but did not work. I'm so confused to what can I do. Please help
(click)="method()" is indeed the way to go.
<button type="button" class="btn btn-default" *ngIf="!edit" class="btn btn-default">
<span (click)="selectMethod()" *ngIf="isNullOrUndefined(class?.classForeignId)">Select </span>
<span (click)="changeMethod()" *ngIf="!isNullOrUndefined(class?.classForeignId)">Change </span>
</button>
Demo
Create 2 different buttons instead of 2 different spans in button and call the different methods in click on both elements.
<button type="button" class="btn btn-default" *ngIf="!edit && isNullOrUndefined(class?.classForeignId)" class="btn btn-default" (click)="method1()">
Select
</button>
<button type="button" class="btn btn-default" *ngIf="!edit && !isNullOrUndefined(class?.classForeignId)" class="btn btn-default" (click)="method2()">
Change
</button>
I am trying to create a button group with css bootstrap framework.
I was able to create button-group with no problem. But, one of my buttons should be wrapped with a form to perform post request when clicking it.
Here is my code
<div class="btn-group btn-group-xs pull-right" role="group">
<a href="/salecategories" class="btn btn-primary" title="Show all salecategories">
<span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
</a>
<a href="/salecategories/2/edit" class="btn btn-primary" title="Edit SaleCategory">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<form method="POST" action="/salecategories/salecategory/2" accept-charset="UTF-8" style="display: inline;" novalidate="novalidate">
<input name="_method" value="DELETE" type="hidden">
<input name="_token" value="8123RX6LbCpxo7LDdp3eettEXGzdfbS9gvzjbbWP" type="hidden">
<button type="submit" class="btn btn-danger btn-xs" title="Delete SaleCategory" onclick="return confirm("Confirm delete?")" id="sometest">
<span class="glyphicon glyphicon-trash" aria-hidden="true" title="Delete SaleCategory"></span>
</button>
</form>
</div>
The above code work but the "red button" is not aligned with the rest at the following screenshot shows.
How can I align the "red" button with the other two?
Here is a jsfiddler to allow you to tinker with the code. Note, the fiddler shows the button now connected but the screenshot shows not aligned because I am using a different font for my app.
You can wrap the whole button group in the form. That way you can keep the three buttons together side by side.
<form action="/salecategories/salecategory/2">
<div class="btn-group btn-group-xs" role="group">
Show all
Edit
<button type="submit" class="btn btn-primary">Delete</button>
</div>
</form>