I have a button in which there is a link. When I mouseover the button, the cursor changes, but clicking the button doesn't do anything. Instead I have to click the link inside. How can I reformat my code, so that the button itself is clickable and not just the link inside of it?
<button class="alert alert-primary" role="alert" style="margin:30px;" >
</button>
You can use Onclick button event.
<button onclick="window.location.href='https://www.google.com/'"></button>
So basically, it's not getting you anywhere simply because there is no content (text, icon, image, etc) within the anchor tag to click on.
Try the code below and you should be taken to the link specified in the "href" attribute of the anchor tag.
<button class="alert alert-primary" role="alert" style="margin: 30px;" > Search on Google </button>
Related
I'm using ejs templates for my webpage, and I'm having layout troubles.
I have a button inside a <div> that's set to display:none as a dropdown, and should show up when the container is hovered over. Instead, the buttons that should be in the dropdown are rendered outside of it and have seemingly no relation to it.
Source ejs file:
<button class="mdc-button mdc-button--raised dropdown" id="clear">
Clear
<div class="mdc-card dropdown-content">
<p>Test</p>
<button>TestButton</button>
</div>
</button>
And the resulting page according to chrome's element viewer:
<button class="mdc-button mdc-button--raised dropdown" id="clear">
Clear
<div class="mdc-card dropdown-content">
<p>Test</p>
</div>
</button>
<button>TestButton</button>
The <p> tag still displays correctly
I don't believe you can put a button element within a button element.
Try it out on MDN here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
This is the example input I put into their live editor. When you inspect the button, you'll get the same output as you've shared in your post.
<button class="favorite styled"
type="button">
<button>Hello</button>
Add to favorites
</button>
Depending on where you need the button, you could try styling the outside or inside element to look like a button as a work around!
I wanna switch this code:
Inapoi
With a button. I want a button who redirect to ”selectare_gen.php”
I tried:
<button onclick="location.href='selectare_gen.php'">Inapoi</button>
But all it does is refreshing the current page..
It should be
<button type="reset" onclick="location.href='selectare_gen.php'">
Inapoi
</button>
The type="reset" is a workaround to prevent the browser from interpreting the button as a form element which causes the reload.
Check this link over here. It should answer your question.
How to create an HTML button that acts like a link?
Many browsers think that the <button> tag will cause a submit that's why it's appearing to just refresh the page. If you use an input type="button" it wouldn't have this effect:
<input type="button" onclick="window.location='selectare_gen.php';" value="Inapoi" />
I have the following:
<form action="/Account/LogOff"
id="logoutForm"
method="post">
#Html.AntiForgeryToken()
<button>Logout</button>
<i class="fa fa-user"></i>
</form>
The form is submitted when I click the button. However I would like to change the button
to use a fontawesome icon. Meaning I don't want the button at all. Just to have a fontawesome icon that the user can click on.
How can I change it so that the form gets submitted when I click on the icon instead of
the button?
There are many ways of getting this done!
Adding background image
To add the background image to the button itself, you can add this CSS property.
Try this:
button {
background-image: url('..url/to/image');
}
Adding image as the content of the button
Or this one which will add the image in the button instead of the Logout image, try this:
<button><img src="url/to/image.png" alt="photo" /></button>
Submitting the form using the image
Or this one, which is just a simple image, but using JS, you submit the form when the image is clicked, like this:
<i onclick="submit()">Text or something</i>
<form id="form" method="post">
// elements here..
</form>
And in the JS, this one:
function submit () {
document.getElementById("form").submit();
}
Note the onclick method, and the function! :) You will get the form submitted once the user clicks on the i and the form with the ID form will be submitted!
Try this
<button><i class="fa fa-user"></i> Logout</button> //It will add user icon before the text
I have the problem with labels within buttons because a click on the label is also causing the button click to fire.
So I got two fired events after each other, what I don't want of course.
My buttons with label included look like this:
<button id="b" name="Button" class="btn btn-primary btn-large">
<label id="b_button_label" class="fontf">
Click me
</label>
</button>
Is there any quick solution, perhaps with jQuery, to prevent the double firing?
Yep, solution is not to put labels inside your buttons.
The labels are meant to describe the control itself, and clicks on a control's label will act like a click on the control itself.
From the spec:
The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using for attribute, or by putting the form control inside the label element itself.
You can use stopPropagation event in jQuery from bubbling up the event
$(function() {
$('#b_button_label').on('click' , function(e) {
e.stopPropagation();
// Your code goes here
});
});
Also why do you want to add the Label inside the button when you have the value field to display its text.
I don't think this is a valid HTML code. You cannot add a LABEL inside a BUTTON. A simple way of adding text to your button is:
<button id="b" name="Button" class="btn btn-primary btn-large">click me</button>
How to get hover message when mouse goes on a button.
Thanks
Use a title attribute.
<input type='button' value='Press me' title='This is my title' />
The attribute title matters here. Just add the title attribute and write the message to be given in button tag.
example :
<button title="Message needs to be shown">My button</button>
This should work fine. if you are using link for the button:
<button>My button</button>