When I click on the following button, I would like to be redirected to the route specified in the href. However it doesn't work:
<button href="/auth"> Google+ </button>
I am not sure if it matters but I am running a node app.
How can I navigate to a route on button click?
Buttons were not initially designed for the purpose of redirecting to a new page. Instead, what you are looking for is the a tag. From reading the comments, however, it is clear that you would like to keep the button element and add the same functionality for redirecting without the use of JavaScript, so I will provide a couple of solutions:
With JavaScript
var button = document.getElementById('myButton');
button.onclick = function() {
location.assign('https://stackoverflow.com/questions/52229901/navigate-to-route-on-button-click/');
}
<button id="myButton">Visit Website</button>
Without JavaScript
<form action="https://stackoverflow.com/questions/52229901/navigate-to-route-on-button-click/">
<input type="submit" value="Visit Website"/>
</form>
You can use the following solution to navigate to the route on a button click:
<button onclick="clickFun()"> Google+ </button>
<script>
clickFun() {
window.location = '/auth';
}
</script>
Buttons need an onClick handler. The href attribute is for links (anchor tags, more specifically).
<button onClick='someFunction'>Google</button>
<script>
someFunction() {
window.location = 'some-url';
}
</script>
You can use an a element instead:
Google+
The best way to rout some different page: we have native javascript method
location.asign('here your link');
For example
var btn = document.getElementById('btn');
btn.onclick = function() {
location.assign('https://stackoverflow.com/questions/52229901/navigate-to-route-on-button-click');
}
<button id="btn">
click
</button>
Its very simple you can't use link inside the button tag but you can add tag outside the button tag
for example
<a href='www.google.com'><button>Click me</button></a>
rest depends on your css skills
You can put the link inside the button and give the link href property , style the href class as per need
<button class="button is-success" onclick={submit}>
<a href="/auth" class="href">
Save changes and Submit
</a>
</button>
You can nest your button inside the anchor tag
<a href="/auth">
<button> Google+ </button>
</a>
Related
I am trying to Create a website and in which there is a button and i have gave it a link to redirect on same page like :-
<button>Explore</button>
<div id="explore">
</div>
When i am opening or refreshing the page, without clicking on button it redirects me to #explore div but i want it to redirect on a click.
So please help me to solve this problem
Thanks in Advance :)
You should delete an anchor from an tag and put the functionality instead to a JS. For example:
<button id="buttonAnchor">Explore</button>
<div id="explore">
</div>
<script>
let btn = getElementById('buttonAnchor');
btn.onclick = function() {
explore = getElementById('explore');
window.scrollTp(0, explore.offsetTop;
}
</script>
you can use below code like...
Method-1
<button>Explore</button>
<div id="explore">
</div>
Method-2
<button>Explore</button>
<script>
$("#myLink").click(function() {
window.location.reload();
});
</script>
this might be very basic but I am still trying to figure it out because I cannot seem to get it correct.
The button
<a class="fusion-button button-flat button-square button-xlarge button-default button-40" target="_blank"><span class="fusion-button-text fusion-button-text-left">KÖP DITT CAMPINGKORT HÄR!</span></a>
And I need to add this
Köp Camping Key Europe
Some things needs changing such in the next code but you get the idea, how can I make button work, so when they press it it open module? When I use the second code without button and only link, it works fine, module shows up.
Please help :)
Try this
<button type="button" class="fusion-button-text fusion-button-text-left"
onclick="CampingKeyEurope(' blank', 'sv')">Button Text</button>
Building off the comment by Sterling Archer, you should attach event listeners outside of your HTML, so if you are using JQuery, in your $(document).ready() function you would add your onclick event there to your button like so:
$('.fusion-button-text.fusion-button-text-left').on('click', function() {});
Try using an event listener:
<a id="btn" class="fusion-button button-flat button-square button-xlarge button-default button-40" target="_blank">
<span class="fusion-button-text fusion-button-text-left">KÖP DITT CAMPINGKORT HÄR!</span>
</a>
document.getElementById('btn').onclick = function () {
CampingKeyEurope(' blank', 'sv');
};
I suggest looking through here, Its very useful: https://www.w3schools.com/jsref/event_onclick.asp
I'm trying to change a certain word in the title of a page dynamically with javascript depending on which link in the nav is clicked on. So for instance, if the "Asia" link is clicked I want the h2 to display: "You are in Asia" or if the "Europe link is clicked I want the h2 to say: "You are in Europe."
The html for the nav bar:
<div id="zone-nav">
<a href="" id="surge-btn"</a>
<a href="" id="latin-btn"</a>
<a href="" id="africa-btn"</a>
<a href="" id="asia-btn"</a>
</div>
The html I have thus far for the title that needs to be changed: `
<h2 id="zoneName">You are in<span id="zoneName"></span></h2>`
I know I need to write a function to determine what link is pressed, but I am a little confused on how to approach this.
if you add some extra markup to your html, you can use a single jQuery event handler:
<div id="zone-nav">
<a class="zone-select" href="" id="surge-btn">Surge?</a>
<a class="zone-select" href="" id="latin-btn">Latin</a>
<a class="zone-select" href="" id="africa-btn">Africa</a>
<a class="zone-select" href="" id="asia-btn">Asia</a>
</div>
now the event handler:
$(document).ready(function() {
$(".zone-select").on("click", function() {
$("#zoneName").html($(this).html());
};
});
Firstly you need to deal with your duplicate id here:
<h2 id="zoneName">You are in<span id="zoneName"></span></h2>
Note we cannot have the same id otherwise we don't know how to get an element by it's id. So remove the uneeded one on the h2:
<h2>You are in <span id="zoneName"></span></h2>
Then add event's to your a tags:
<div id="zone-nav">
<a onclick="update('Surge')" id="surge-btn" >item1</a>
<a onclick="update('Latin')" id="latin-btn" >item2</a>
<a onclick="update('Africa')" id="africa-btn" >item3</a>
<a onclick="update('Asia')" id="asia-btn" >item4</a>
</div>
Note: This can be done purely in JavaScript or be done easily in jQuery. But since you did not mention it I will not be using jQuery. We could iterate through by ClassName and have the links be a class, but that's no more simple then the way above.
For the JavaScript we need to return false to prevent the default behavior of a anchor tag:
function update(text) {
document.getElementById("zoneName").innerHTML = text;
return false;
}
Here is a working Fiddle
Would there be a way to keep the updated text in the even if the page reloads?
Yes there is a way to do this without having to use a server-sided language. What I will do is use HTML 5 web storage, note this will only work for browsers that support HTML 5 (which is all of the modern ones), you can use cookies if you need support for older browsers that work similarly for the following example. In this case I will be using sessionStorage which saves the information even until the browser is closed.
I will emulate a href to the same page for the <a> tags, we need to do this because we need to save out information before we move to a new page. After I save I will call location.reload() that will act as a refresh. Note that you could make this move to an entirely new page as well, just include the script on the new page and use window.location.href = "newPageUrl" ( jsfiddle prevents me from moving to a new page ).
The HTML will be the same but the JavaScript will be updated as followed:
window.onload = function() { // When the page loads
if(sessionStorage.zoneName) { // Check if the session exist
// update the page with the session info
document.getElementById("zoneName").innerHTML = sessionStorage.zoneName;
}
}
function update(text) {
sessionStorage.zoneName = text; // store the text into a session called "zoneName"
location.reload(); // reload the page
return;
}
Here is a working Fiddle
Here's an example of what you could do for the africa-btn (this will require jQuery, I hope that's alright):
$(document).ready(function() {
$("#africa-btn").on("click", function() {
$("#zoneName").html("Africa");
};
// Other buttons here
});
What this is doing is attaching an action to the "click" event of the africa-btn anchor tag. When it's clicked it should update the span's html as described above. You can add further click events in a similar way.
Using $("#africa-btn") to bind the click event is a way to do it specifically for that one button, so you'll have to do it for each id.
This would update the selected zone in the dom
<div id="zone-nav">
<a id="africa-btn" onclick="updateZone('africa'); return false;"> </a>
<a id="asia-btn" onclick="updateZone('asia'); return false;"> </a>
</div>
function updateZone(countryName){
document.getElementById('zoneName').innerText = countryName;
return false;
}
are you looking for something like this :
Simple html and javascript only:
http://jsfiddle.net/q9L37c32/
Asia
I have a a link as below
link
and javascript function1 include submit form action
now I want to use JavaScript to prevent Ctrl + mouse click to open new tab on this a link for IE(>=6), FF, and Chrome.
Updated to fix
1. update href="javascript:void(0)"
2. update onclick="function1();return false;"
Note: I'm not using a JavaScript library such as jQuery or Dojo.
The A tag is used for links or references. If you mainly want a clickable function I would suggest to use the button tag and style it like a link with css.
For example, bootstrap does this with the btn-link class:
<button type="button" onclick="function()" class="btn btn-link">Link</button>
This has the advantage over using a span or div element that it is clear to browsers, search machines and screenreaders that this is supposed to be a clickable element.
If you want to execute a function on click of an element, use a div tag instead of an anchor tag
<div onclick="function1()" style="cursor:pointer">link</div>
EDIT: a div tag is a block element and will push the link to a new line. And as Jan has suggested move styles to a CSS. Used inline style for ease here.
<span onclick="function1()" style="cursor:pointer">link</span>
[Edited]
You can do whatever you want to do from within the event's function (onclick) and don't use href at all. For the mouse hover cursor effect use style="cursor:pointer".
example code:
<html>
<head>
<title></title>
<script type="text/javascript">
function fn(){
/* do something */
}
</script>
</head>
<body>
<a style="cursor:pointer" onclick="fn()">1234</a>
</body>
</html>
I am using backbone, bootstrap "collapse". I am trying to change the class when the button is clicked..
html
<button id="btnCollapse" class="btn" type="button">
<i id="accordionIcon-{{id}}" class="icon-down"></i>
</button>
js
CollapsePress : function(event) {
//change the class back and forth with every click (icon-down to icon-right)
}
You haven’t given enough information for me to be sure this is correct, but try this:
$(event.target).find('i').toggleClass('icon-down icon-right')