How to display tooltip of a disabled materialized button - html

I tried using solution on the web but can't get working I want to display tooltip of a disabled button. I use materialized css.
Here is my html of button:-
<div class="input-field col s7">
<button id="btn" class="btn blue-grey tooltipped" data-tooltip="Button will be Enabled after file upload" disabled>Submit</button>
</div>

Actually you can't enable the tooltip for the disabled <button> or <a>, but you can do a trick and wrap your button inside a <span> then add the tooltip to that <span> element instead of <button> itself. So you have to manage the <span> tooltip in enabling/disable events.
So your code should be something like this:
document.addEventListener("DOMContentLoaded", function() {
var elems = document.querySelectorAll(".tooltipped");
var instances = M.Tooltip.init(elems);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="input-field col s7">
<span class="tooltipped" data-tooltip="Button will be Enabled after file upload">
<button id="btn" class="btn blue-grey" disabled>Submit</button>
</span>
</div>

Related

Create an input link in the button

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.

File name not showing in file input in bootstrap

I have this html code
<head>
<link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>
<body>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
</div>
<script src="./Depd/jquery.slim.min.js">
</script>
<script src="./Depd/popper.min.js"></script>
<script src="./Depd/bootstrap.min.js"></script>
</body>
When I run and try to upload a file by clicking browse and select a file i want to change the label text to the name of the file I uploaded how can I achieve that?
I'm using bootstrap. If you don't use bootstrap and use normal html it works in default way and shows the file name. But I have to use bootstrap here. So, please suggest a solution that goes with bootstrap.
You're going to need to use some JavaScript for this. I'll walk you through the steps: First detect when a file gets uploaded, then get the file name and update the label contents with the filename. Below is a brief example.
let input = document.getElementById("inputGroupFile04");
let label = document.querySelector("label[for='inputGroupFile04']");
input.addEventListener("change", e => {
label.innerText = input.value.split(`C:\\fakepath\\`)[1];
});
<head>
<link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>
<body>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>
</div>
<script src="./Depd/jquery.slim.min.js">
</script>
<script src="./Depd/popper.min.js"></script>
<script src="./Depd/bootstrap.min.js"></script>
</body>
If you require any more clarification please don't hesitate to ask.

How can I make a button link to another page?

This is my HTML so far
<button type="button" formaction="contact.html">Get In Touch!</button>
For some reason when I click on the button in a browser it doesn't take me to the contact.html page. All the pages that came up in google helped me learn new button attributes, but I couldn't figure out how to make the page redirect on click.
If you are using bootstrap, you can use this to do it for you:
Link Button
See http://www.w3schools.com/bootstrap/bootstrap_buttons.asp
Try the following:
<input type="button" onclick="location.href='contact.htm';" value="Contact" />
The better way is that you surround the above code with <form></form>.
Try these methods:
<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
Click Me
</button>
<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
Click Me
</button>
<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
Click Me
</button>
<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
Click Me
</button>
<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
Click Me
</button>
<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
<input type='submit' value='Click Me'/>
</form>
<!-- Using html anchor tag -->
<a href='https://stackoverflow.com'>
<button>Click Me</button>
</a>
How about this?
<button type="button">Get In Touch!</button>

How to get clickable button inside form label in radio control

I want to have a radio group where each label contains a clickable icon on the right that does NOT select the element, only executes a click event. Clicking on any other area within the label should select that item in the radio group. But clicking on the icon should ONLY execute that code.
The problem is that the <label> assumes all control of any click within its area. I have adjusted x-indexes and simply can't get the icons to be clickable without also selecting the item in the radio group. I am using angularjs and ionic framework.
<label class="item-button-right item item-radio" >
<input type="radio" name="radio-group">
<div class="item-content disable-pointer-events" >
<span>My Radio Button</span>
<button ng-click="doSomething(); $event.stopPropagation();" class="button button-icon radio-button">
<i class="button-icon icon ion-ios-information-outline"></i><i class="icon ion-ios-arrow-right"></i>
</button>
</div>
<i class="radio-icon disable-pointer-events icon ion-checkmark"></i>
</label>
If i understood you correclty, then you can add a ng-click option in the ng-repeat. Then just pass in the scope name and do stuff with that. Example
Html Example
<h5>Your group</h5>
<ul class="list-group" ng-repeat="obj in objs">
<li class="list-group-item">
{{obj.name}}
<button class="btn btn-primary btn-xs" data-title="View" data-toggle="modal" data-target="#view" ng-click="Dosomething(obj.name)"><span class="glyphicon glyphicon-pencil"></span></button>
<input type="radio" ng-model="color.name" ng-value="specialValue">
<input type="radio" ng-model="color.name" value="red">
color = {{color.name | json}}
</li>
</ul>
script example
app.controller('ExampleController', ['$scope', function($scope) {
$scope.color = {
name: 'blue'
};
$scope.specialValue = {
"id": "12345",
"value": "green"
};
$scope.Dosomething = function(name) {
alert("MyName");
};
}]);
You can also take the css positioning route by moving the button/icon html out of the label, then use css to preposition it where you need it. kind of like in this fiddle: https://jsfiddle.net/nwx9kzw1/
Here's some sample css to get the job done:
.special-icon-class{
position:relative;
z-index: 999;
top:1px;
left:25px;
}

How to enable a disabled button by clicking on another button?

I have two buttons:
<button onclick=initialize() id="1" data-role="button" data-mini="true" data-corners="false" data-theme="b">Show My Position</button>
<button onclick=calcRoute() id="2" data-role="button" data-mini="true" data-corners="false" data-theme="b">Evacuate !</button>
I want to have the second button disabled by default, and have it enabled if clicking on the first button. How do I accomplish this?
Please see the following answers to questions:
Disable Buttons in jQuery Mobile
How to disable html button using JavaScript?
The simplest approach would be (just a pure example w/out taking into consideration browsers, etc):
<html>
<head>
<script>
function enableButton2() {
document.getElementById("button2").disabled = false;
}
</script>
</head>
<body>
<input type="button" id="button1" value="button 1" onclick="enableButton2()" />
<input type="button" id="button2" value="button 2" disabled />
</body>
</html>