Is it possible to use a button as a link in ASP.NET? I am aware that Response.Redirect can be used in the button's OnClick handler, but that would cause two trips (a POST and a GET) to the server instead of one, and I'd like to avoid that if I can.
If that's not possible, then how can I disguise my link as a button, and has the 'pressed-in' effect when clicked? I tried wrapping a link within a button, and setting appropriate CSS styles such as text-decoration:none to the link, but the link only works when I click on the text within the button, not the entire button.
The simplest way I know is to use location.href property in OnClientClick event of button.
See following example:
<asp:Button ID="btnEdit" runat="server" Text="Edit"
OnClientClick="window.location.href='your edit URL here'" />
Related
Hey I have a div which is wrapped by a Link component, and inside that div I have more buttons, but the problem is, when I click on the inner smaller buttons, I actually click on the Link component as well, so I get redirected which is not what I want... How do I fix this?
it seems as though both the link and the button get clicked but if i am intending to click the button only i want to avoid the parent link.
What I mean is, the Link is used to navigate to some URL when you click on it. Putting elements inside that for other tasks. like a blog post, you click on the parent it will redirect you, but on the child the button will allow you to delete it
was coding this in nodejs react so i was using onClick events
example
<Link to="/blog-post">
<div className="link-post-container">
...blog
<button className='deleteButton'></button>
</div>
</Link>
I have tried event.stopPropagation on the button but it still doesn't seem to do anything. Is it because the Link is an href instead of a onClick?
SOLUTION
so using some of the possible solutions below i started messing around and noticed by in the onClick of the deleteButton, if i add the following in, it works:
event.preventDefault()
with this, the redirect because of the href does not occur anymore and only the button click event will take place
const handleClick = event => {
event.stopPropagation()
// then write rest of your onclick code
}
<button className='deleteButton' onClick={handleClick}></button>
The click event propagates from the button upwards in the DOM tree until it reaches the root (simplified explanation - you can learn more about event propagation here). This is why the link also registers it and runs its onclick handler, redirecting you to another site.
You can call event.stopPropagation() inside your button's onClick handler to stop the event from reaching the encapsulating link.
source
So the idea is just to have this switch pages to "explore.html" when it clicked but I've been trying to get it to work for hours and it won't. I've tried changing it to a "href=()" and it didn't work either. Do I just write it as an instead of a ?click here to see the code I'm having trouble with...
You are doing it wrong, As on click function you are giving a link directly which is not the correct syntax for on click, you need to apply the window location for it where you want to redirect, here is the code for the button to redirect, and if you want to use href then you need to use anchor tag and need to apply a css to same to make it like button
<button onclick="window.location.href='/linktoredirect'">Continue</button>
href using anchor tag
Continue
Or you can use like following
<form method="get" action="/linktoredirect">
<button type="submit">click</button>
</form>
Hope this will work for you
Just replace your onclick as follow
From :
onclick="explore.html"
to
onclick="window.location = 'explore.html'"
onclick is an event. If you want to redirect other page then use "href".
example:
link text
I currently have a button that is functioning a little strange. Whenever you click right in the middle of the button, it works and carries on the requested action. However, if you click anywhere near the outside border of the button, then the action doesn't get carried out.
Here is the current code:
#if(mode == "Edit"){
<div class="Delete"><button class="btn btn-danger">
#Html.ActionLink("Delete Profile", "Delete", "GPS", new { Id = Model.provider.Company.Id.Value, oem = Model.provider.Id},
new { onclick = "return confirm('Are you sure you want to delete this provider?
All GPS Devices attributed to this provider will be removed as well.')" })</button></div>
}
If you check the resulting HTML of your code you will see the following structure:
<div>
<button>
<a></a>
</button>
</div>
Your event onclick is only attached to the <a> tag, so if you click in any place inside the <button> but outside the <a>, the action won't be fired.
By default <a> tags are inline, it means (among other things) its size is defined by its content so it won't fullfill the <button>, you can see this visually using the inspect tools from any brosers (like Chrome Developer Tools).
You can fix this using CSS to change the dimensions of your <a> tag. Try with display:block, width and height.
The final answer will depend on your other style rules.
I am trying to make a button in a Modal take you to a new page but It wont change page.
Here is a pastebin for the whole lot - http://pastebin.com/2TBgYpbv
but the problem is this code here -
<button href="manager.php?staffname=<?php echo"$staffname";?>&ban=true" class="btn btn-primary">Confirm</button>
Please explain why it's not redirecting
Thanks in advance.
Change the button to an anchor. Keep the css classes etc. Or, add a button click handler to change window.location. I suggest the first option.
The button tag does not have an href attribute. Read more about button on w3schools
I have a link which opens a table on the same page if user clicks on the link. What I want to know is that is there another way to link on the same page rather than doing this:
[Open Grid]
This is because in the url it displays # at the end of the url so I want to know is there another way to link on the same page than href="#".
Thanks
Why even use an <a> tag if you are just binding an event handler to the element. Just use a <span> and style it. You can even give it cursor:pointer if you want that link feel/look
just return false in javascript and the link will not be followed when clicked, but you can still open your tables using js, as i suspect you do right now
as I understand you alread have some function binded to the click event of this link, right? if so you can just use href="javascript:void(0)", this way is much better, because in this case browser doesn't add a context menu items such as "Open link in new tab" or "Copy link address" to this link.
If you're using Javascript to detect when an element is clicked, you don't have to use tha anchor tag, or the href attribute.
You could do <a id="showGrid">Open Grid</a> and then something like $('a#showGrid').click(...); if using jQuery. To get the "link cursor" you can do a {cursor: pointer} in CSS. It'll look the same, but you won't get that # in the browser's address bar.