onclick="location.href='manaliPackages.html'" not working - javascript

I want to link my button with another page. I am using the code given below to do so.
<button type="button" value="button text" class="commonBtn"
onclick="location.href='manaliPackages.html'";> View Variations</button>
But it is not working... Why not?

Your code should work just fine
(I'm assuming manaliPackages.html is a file in the same directory as the html file holding your code.)
For example: link/to/your/html/file.html contains the following:
<button type="button" value="button text" class="commonBtn"
onclick="location.href='manaliPackages.html'";> View Variations</button>
Clicking this button would open: link/to/your/html/manaliPackages.html
Also, it is considered bad practice to use inline code, you should consider adding an event listener instead.
Please provide a snapshot of your browser console

Related

Click button in webpage with Javascript

Currently, I'm doing an application and I need login to this one particular website. Basically, I need to make this button click using a javascript but I have no idea how to.
This is the button code I retrieved from the website:
<button type="submit" class="uk-width-1-1 uk-button uk-button-primary uk-button-large">Sign in</button>
Thank you for your help in advance
You can click on the button programmatically, in case of pure javascript :
(function(){document.querySelector('button[type="submit"]').click();})()
In case of Android JS Interface :
webView.loadUrl("javascript:(function(){"+
"l=document.querySelector('button[type=\"submit\"]');"+
"e=document.createEvent('HTMLEvents');"+
"e.initEvent('click',true,true);"+
"l.dispatchEvent(e);"+
"})()");
The general way to have button click events is to use something like jQuery. For example lets set the button to have an ID
<button id="my-button" type="submit" class="uk-width-1-1 uk-button uk-button primary uk-button-large">Sign in</button>
Then we would apply a click event to it with jQuery
$('#my-button').click(function(){alert('button has been clicked');})
Instead of the alert you could put whatever code you want in there :D
Example: Codepen example
EDIT: Example for a class:
Example for a class
(Note that we use a "." instead of "#" in the call)
-Kyle

When I use input type="button" a function works well but when I use button it doesn`t

I call the same function with those two types of button. With the first it works perfectly but with button it works well at the first but in less than one second it looks like refresh the page.
<input type="button" id="bProv" value="filtrar" onclick="filtroP()"/>
<button id="bProv" onclick="filtroP()">filtrar</button>
The type of a <button> element defaults to submit, so it will run the JS and then immediately submit the form.
Use <button type="button" ... if you don't want form submission.
That said, hard coding a button (which does nothing without JS) goes against the principles of unobtrusive JavaScript (which are part of best practise programming for the WWW).

html5 form submission issue

I have a piece of javascript which is initialized on the click of a button, and takes information from a form input to perform geolocation etc based on the data.
The issue I am having is that I have to place the button outside of the form in the html, otherwise when it is clicked, no javascript is fired!
This of course means that my users cannot hit enter in the offending text box (as they lose their data!)
Is there a way I can stop this from happening and be able to include the button in the form?
The HTML is:
<form>
<input id="addyInput" placeholder="Don't forget postcode!" size="25">
</form>
<button id="start" onclick="initialize()">Find Me!</button>
I can also include some of the javascript if needs be! (although that works fine!) :)
Thanks!
use :
<button id="start" onclick="return initialize()">Find Me!</button>
and then make sure initialize() returns false.

Open button in new window?

How would I go about making the button open in a new window, emulating "a href, target = _blank"?
I currently have:
<button class="button" onClick="window.location.href='http://www.example.com';">
<span class="icon">Open</span>
</button>
The button isn't in a form, I just want to make it open in a new window.
Opens a new window with the url you supplied :)
<button class="button" onClick="window.open('http://www.example.com');">
<span class="icon">Open</span>
</button>
I couldn't get your method to work #Damien-at-SF...
So I resorted to my old knowledge.
By encasing the input type="button" within a hyperlink element, you can simply declare the target property as so:
<a href="http://www.site.org" target="_blank">
<input type="button" class="button" value="Open" />
</a>
The 'target="_blank"' is the property which makes the browser open the link within a new tab. This attribute has other properties, See: http://www.w3schools.com/tags/att_a_target.asp for further details.
Since the 'value=""' attribute on buttons will write the contained string to the button, a span is not necessary.
Instead of writing:
<element></element>
for most HTML elements you can simply close them with a trailing slash, like so:
<element />
Oh, and finally... a 'button' element has a refresh trigger within it, so I use an 'input type[button]' to avoid triggering the form.
Good Luck Programmers.
Due to StackOverflow's policy I had to change the domain in the example:
https://meta.stackexchange.com/questions/208963/why-are-certain-example-urls-like-http-site-com-and-http-mysite-com-blocke
<input type="button" onclick="window.open(); return false;" value="click me" />
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
You can acheive this using window.open() method, passing _blank as one of the parameter. You can refer the below links which has more information on this.
http://www.w3schools.com/jsref/met_win_open.asp
http://msdn.microsoft.com/en-us/library/ms536651(v=vs.85).aspx
Hope this will help you.
If you strictly want to stick to using button,Then simply create an open window function as follows:
<script>
function myfunction() {
window.open("mynewpage.html");
}
</script>
Then in your html do the following with your button:
Join
So you would have something like this:
<body>
<script>
function joinfunction() {
window.open("mynewpage.html");
}
</script>
<button onclick="myfunction()" type="button" class="btn btn-default subs-btn">Join</button>

self destruct button in html

Is it possible to destroy an html button. If it is clicked because it already served its purpose after clicking.
You can do so with JavaScript:
<button onclick="this.parentNode.removeChild(this)">Label</button>
Yes, it is possible, by using JavaScript to set its CSS property "display" to "none".
See also Seven ways to toggle an element with JavaScript.
I think you can do also by
<input type="button" onclick="this.style.visibility='hidden';">
Yes, you can disable or hide it. Example:
<input type="button" onclick="this.disabled=true;" />
However, if you do this to the submit button, it may not work properly. The value for the button will not be included in the form data, so if the server looks for the button data to find out what it was that caused the form to submit, it won't find it.
Yes you can do like this:
<input type="button" onclick="this.style.display = 'none';">

Categories

Resources