How can I input a link in the button when I press the button?
<div class="buttons">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</div>
Also you can trigger a link by JavaScript.
<button
onclick="window.location(this.getAttribute('data-link'))"
data-link="/hello">go to hello</button>
One way could be to use an anchor tag instead of the button and make it look like a button.
HTML:
<div class="buttons">
<a class="btn custom-btn position-bottom-right"> Add to cart</a>
</div>
CSS:
.custom-btn {
border: medium dashed green;
}
Alternatively, you could do:
<button class="btn custom-btn position-bottom-right" onclick="location.href='yourlink.com';"> Add to Cart </button>
Try this:
<a href='http://my-link.com'>
<button class="GFG">
Click Here
</button>
</a>
You can use the anchor tag and provide a Bootstrap class for the button, like,
<a class="btn btn-success" href="link"> Add to Cart</a>
If the label "Add to cart" matches the expectations, we'd be talking about a form. A form that causes an element to be added typically uses the POST method:
<form class="buttons" method="post" action="/path/to/add/to/cart/script">
<input type="hidden" name="product" value="123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Alternatively, there's GET as well:
<form class="buttons" method="get" action="/path/to/add/to/cart/script?product=123">
<span class="sold-out-tag position-top-right">Best Seller</span>
<button class="btn custom-btn position-bottom-right"> Add to cart</button>
</form>
Since GET doesn't carry additional payload, you'll get the same effect with a regular anchor:
Add to cart
You don't want search engine spiders to populate carts, so you typically leave GET for data fetching.
Related
<div class="modal-footer">
<button class="btn cancel-red" type="button" ng-click="cancel()">Cancel</button>
<button class="btn confirm-blue" type="button" disabled="disabled=" ng-click="confirm())">Confirm</button>
</div>
I want to click the button, but the code I'm using doesn't work,Help me, please again!!
WebView21.CoreWebView2.ExecuteScriptAsync("document.getElementsByClassName('btn confirm-blue')[0].disabled='';") don't work.
WebView21.CoreWebView2.ExecuteScriptAsync("document.getElementsByClassName('btn confirm-blue')[0].click();") don't work.
I have a label thats a button. I need to be able to disable it. ng-dialog doesnt work. If i use ng-diable it shows disabled, but the button is still functional. Which is bad. The label button is still clickable. Yes, i could use a regular button, but for this situation I need to use the label button.
<label type="button" class="btn btn-primary btn-block btn btn-primary btn-sm btn-block hist-button"
id="importHistEditButton" ng-controller="ImportHistoryController"
ng-click="getImportHistory(editSource.sourceId); showDialog();">
<span class="icon-plus"></span> Import History
Is there a way to disable the label button so its not clickable?
You could use CSS to make the label not clickable.
<style type="text/css">
label.btn.hist-button {
pointer-events: none;
}
<style>
This works well in most browsers except IE.
You can add this bit of CSS that looks for the "disabled" data attribute ng-disabled is adding. Here is an example:
label[disabled]{
pointer-events:none;
}
<label type="button" class="btn btn-primary btn-block btn btn-primary btn-sm btn-block hist-button"
id="importHistEditButton" ng-controller="ImportHistoryController"
onClick="alert('hello')" disabled>Try to click me! </label>
I'm trying to make these buttons display next to each other, I'm guessing I would want it to be an inline-block style so there is some space between them. I have tried to add display: inline and display: inline-block (not at the same time) to #being-survey-btn, but no luck there. I've also attempted to add those properties to .btn but no luck there either. I've tried putting <span> tags around all of it (inside the divs) as well as putting <span> tags around the <button> tags and I've come up with nothing. Using bootstrap.
My cshtml:
<div id="finish-survey-container">
<div id="finish-survey-items">
#using (Html.BeginForm("MakePDF", "HabitatManagement"))
{
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Save as PDF</button>
}
#if (ViewBag.Type == "Habitat Management")
{
using (Html.BeginForm("Index", "HabitatManagement", new { userId = ViewBag.UserID }))
{
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Finish</button>
}
}
</div>
</div>
I have also attempted styling through an ActionLink (this is actually how I originally had it before trying out Html.BeginForm syntax):
#Html.ActionLink("Save as PDF", "MakePDF", null, new { #id="begin-survey-btn", #class = "btn btn-default btn-lg", #style = "display: inline-block"})
I know I must be missing something rather obvious. Anybody have an idea?
EDIT
Generated HTML:
<div id="finish-survey-container">
<div id="finish-survey-items">
<form action="/HabitatManagement/MakePDF" method="post">
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Save as PDF</button>
</form>
<form action="HabitatManagement?userId=#" method="post">
<button id="begin-survey-btn" class="btn btn-default btn-lg" type="submit">Finish</button>
</form>
</div>
</div>
Each Html.BeginForm creates a form element, so your code will end up like
this
<form>
<button>..</button>
</form>
<form>
<button>..</button>
</form>
Your problem is that the form elements are by default block. That is what you need to fix, and to do that you should set these form elements to be display:inline-block
Something like
#finish-survey-items form{display:inline-block;}
He wants you press the button "Download" disappearing text.
<button class="btn btn-default" type="button" id="getInfo" onclick="getVideosInfo();">Download!</button>
<div id="infobox">
My TEXT
</div>
Here is what you can do, this code uses just 3 extra lines of jQuery code. Following is my solution:
$('#getInfo').click(function(){
$('#infobox').hide();
});
function getVideosInfo(){
//...
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-default" type="button" id="getInfo" onclick="getVideosInfo();">Download!</button>
<div id="infobox">
My TEXT
</div>
Here is an external fiddle supporting this.
you need of course java script... but then it works like the following
function getVideosInfo(){
infobox = document.getElementById("infobox");
infobox.style.display = "none";
}
<button class="btn btn-default" type="button" id="getInfo" onclick="getVideosInfo();">Download!</button>
<div id="infobox">
My TEXT
</div>
On my website I used a span tag to pull a button and a text input left from the footer of a twitter bootstrap modal display, the pictures will show this.
For some reason the two buttons on the left and lower than the two on the right, how can I raise the two on the left?
HTML:
CSS:
.modal-footer .floatLeft {
float: left;
}
HTML:
<div class="modal-footer">
<span class="floatLeft">
<input placeholder="out of" class='changeMaxMark' style='margin-top:9px;'id='maxMarkBox' name='maxMarkBox' type='text'>
<button id='changeMaxMark' name='changeMaxMark' class='btn btn-success'> Set All </button>
</span>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" id="markSave" onClick="togleMarkSave()">Save Changes</button>
</div>
link to picture 1(http://snag.gy/i5FRT.jpg)
link to picture 2(http://snag.gy/2Y9Q2.jpg)
First of all remove the span. Bootstrap has specific CSS classes to pull things left. pull-left which I added to the first two elements.
The edited HTML is this:
<div class="modal-footer">
<input placeholder="out of" class='changeMaxMark pull-left' id='maxMarkBox' name='maxMarkBox' type='text'>
<button id='changeMaxMark' name='changeMaxMark' class='btn btn-success pull-left'> Set All </button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" id="markSave" onClick="togleMarkSave()">Save Changes</button>
</div>
You also had a specific style on the input field to push margin-top down 9px that is unecessary.
No custom CSS classes or additional markup is necessary.
Here is the working JSFiddle