I am making a website in which the login page has a button that is not setup as a button and it needs to call a function. I add the:
onclick="signin()"
to the code on line 216. (see code here: http://pastebin.com/Uq2nfWTQ)
I have tried adding the function below the div's and on a main.js file. Neither are working. Where should I put the function so that the button actually works? Also, the function is a redirect to a different page, so would I do that with:
window.location = "PUT LOCATION HERE"
This is the bare minimum of what you're describing:
<html>
<head>
<script>
function signin() {
console.log("Hello, I work!");
}
</script>
</head>
<body>
<form action="javascript:void(0);" method="get">
<input type="submit" value="Sign In" onclick="signin()">
</form>
</body>
</html>
Comparing that to your paste bin, you don't have a signin function anywhere.
Thus is an example
<!DOCTYPE html>
<html>
<body>
<p>Click the button to go to signin page.</p>
<button onclick="signin()">Try it</button>
<p id="demo"></p>
<script>
function signin() {
location.href = 'signin.php';
}
</script>
</body>
</html>
Some people have JavaScript disabled or hampered for various reasons; making a web page that requires JavaScript just to go to another page is super irritating for those people! (I am one of them.)
Plus, JavaScript-based navigation is never as useful as regular links. You can middle-click normal links to open them in a new tab, for example, and I do this all the time; it breaks on JavaScript-powered "fake" links, because the page's code can't run in the new tab. In general, using JavaScript to emulate an existing browser feature is a poor idea.
So if navigation is all you're doing, just make a regular link with an <a> and style it with CSS to look like a button. A good (albeit ugly) start:
a#signin-button {
display: inline-block;
background: lightgray;
border: 1px outset gray;
text-decoration: none;
}
OR, make it a plain submit button. (Not recommended as much, since you can't do as much with a submit button — e.g., middle-click to open in a new tab doesn't work.)
<form action="signin.html" method="GET">
<input type="submit" value="Sign In">
</form>
Related
The following code does not redirect to the given webpage
<form>
<button onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
</form>
It is so because when you create a button within the form tags, it is created as a submit button by default. So, instead of redirecting the webpage, it submits the data and reloads the current webpage.
The following code will do the required job because now, the type of the button is button and not submit.
<button type="button" onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
Even better, you can place your redirect code into a JavaScript function. Then you can call that function from within your HTML code. Like this
<script type="text/javascript">
<!--
function redirectTo(sUrl) {
window.location = sUrl
}
//-->
</script>
<button onclick="redirectTo('../magnet/index.php')">Get HTML!</button>
Hope this will work for you. Cheers
The answer was to add type="button" like #shivamag00 explained.
But be careful with replace(), it's not possible to use "back" to navigate back to the original document since you are replacing the history state.
An alternative is to use the assign() function, (documentation here)
Suppose you have a base url as
www.website.come
and want to go to
www.website.come/new-page
it's simple
<button type="button" onclick='window.location.assign("new-page")'>Go to new page</button>
It's worked for me, hope it's useful for someone else.
I am trying to use elninotech/uppload, as it looks like it will do what I want (give me a portable, easy to use, powerful file upload button). However when I click on the button, the upload dialog appears and disappears (press pause, in debugger, before pressing button, then single step. On 2nd step dialog appears, on 3rd step it disappears).
What am I doing wrong?
<html>
<body>
<form class="profile">
<button id="uploadButton">upload image</button>
</form>
<img id="profilePicImage"/>
</body>
<script src="https://unpkg.com/uppload/dist/uppload.min.js"></script>
<script>
const profilePicture = new Uppload({
value: "https://randomuser.me/api/portraits/men/17.jpg",
bind: ["#profilePicImage"],
call: ["form.profile button#uploadButton"],
//endpoint: "https://example.com/upload_backend",
allowedTypes: "image"
});
</script>
</html>
I found a very complex example on their website https://elninotech.github.io/uppload/ I spent some time debugging, and looking at their code. This is what I found.
An element may have the attribute data-uppload-button to mark it as an uppload button. I don't know how that can work with more than one button.
A default button in form dose not work (it causes the problem described in the question). Changing the button to a span works (but is un-intuitive to user). Changing the form to a div, works. Changing the button type to button works.
From the git-hub issue tracker https://github.com/elninotech/uppload/issues/21#issuecomment-445997614
When you have an HTML form element without a method, it defaults to GET. If it has a button inside it, the form assumes it's a submit button, and therefore refreshes the page on pressing it. This means that if you have button without a type="button", the page is refreshed. This means the original state is reverted and you don't see Uppload open up. That's why you need a type="button" on buttons you don't want to submit the page. Alternately, you can have a event.preventDefault() and return false on the onSubmit event on the form too.
Here is the working code:
<html>
<body>
<form class="profile">
<button type="button" id="uploadButton">upload image</button>
</form>
<img id="profilePicImage"/>
</body>
<script src="https://unpkg.com/uppload/dist/uppload.min.js"></script>
<script>
const profilePicture = new Uppload({
value: "https://randomuser.me/api/portraits/men/17.jpg",
bind: ["#profilePicImage"],
call: ["div.profile button#uploadButton"],
//endpoint: "https://example.com/upload_backend",
allowedTypes: "image",
services: ["upload", "camera", "link"],
crop: {
startSize: [100,100, "%"]
}
});
</script>
</html>
I have not yet tested with a working endpoint (server)
I have a popup called picker.html that contains two options - either going to the options page (that crossrider doesnt natively support) or opening up a webpage. There could also be more options.
Now, when the "Go to Options" button is pressed i want to change the popup to go to the file options.html.
I tried using appAPI.browserAction.setPopup but it only work after another click on the browser action making it useless. window.location also doesnt work as crossrider always uses background.html and there's no API to just get the path of a resource file.
You can use document.open and appAPI.resources.get to change the whole HTML. Then you need to run crossriderMain to make sure all used resources are being loaded.
See the working example below. From my experience it's not possible to change the height of the new popup / page, please edit this answer if someone finds a tested possibility (CSS doesn't appear to be working here).
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function crossriderMain($) {
appAPI.resources.includeCSS('html/bootstrap.min.css');
appAPI.resources.includeCSS('html/skin.css');
appAPI.resources.includeJS('js/bootstrap.min.js');
}
appAPI.ready(function($) {
$("#gooptions").click(function() {
var newDoc = document.open("text/html", "replace");
newDoc.write(appAPI.resources.get('options.html'));
newDoc.close();
$("body").css("width","400px");
crossriderMain($);
eval(appAPI.resources.get('js/bootstrap.min.js'));
//Use eval with any JS you need to load for the new page, it won't be loaded from crossriderMain($)!
});
$("#goproton").click(function() {
appAPI.openURL({url: "https://protonmail.ch/login", where:"tab", focus:true});
window.close();
});
});
</script>
</head>
<body>
<div class="well bs-component" style="margin:0; border-radius:0; border:none; padding:5px;">
<div class="form-horizontal">
<div class="col-lg-12" style="margin-bottom:5px; padding:0;">
<button type="submit" class="btn btn-default" id="gooptions" style="width:100%;">Go to Options</button>
</div>
<div class="col-lg-12" style="padding:0;">
<button type="submit" class="btn btn-primary" id="goproton" style="width:100%;">Open ProtonMail</button>
</div>
</div>
</div>
</body>
</html>
I am fairly new to jquery and javascript, but certain that I can use it to get the result I desire. I would like to have the background-image of the add to cart button change on click. From my research,on this site and others,I have come to the code pasted below;for which the html is only the snippet for the button, which I copied from the Magento Go store source. I feel I am close but I think that I am not "identifying?"(for lack of the proper term) the class of the button correctly. If I had access to the php templates I think I would have an easier time customizing but this is the route that was chosen. I appreciate any insight given.
<script>
google.load("jquery", "1.9.1");
google.setOnLoadCallback(function() {
$('btn-cart').onClick function() {
$(this).css('background-image', 'url(image2)');
});
});
</script>
<style>
.btn-cart{
background-image: url('image1');
width: 100px;
height: 100px;
}
</style>
<html>
<body>
<button type="button" title="Add to Cart" class="button btn-cart" onclick="setLocation('http://charmit.gostorego.com/checkout/cart/add/uenc/aHR0cDovL2NoYXJtaXQuZ29zdG9yZWdvLmNvbS9jaGFybXMuaHRtbA,,/product/366/')">
<span><span>Add to Cart</span></span></button>
</body>
</html>
Really unsure about the title question. Feel free to suggest. :)
Hi guys! I created a very simple code, that would represent my web.
Here is my home page:
<html>
<script type="text/javascript">
function getPage(linkPage,variables,divName){
$.get(linkPage + "?" + variables,function(data){$(divName).html(data);});
}
function show(){
//functionName("path","data","idName");
getPage("AjaxPages/hi.php","","#container");
}
</script>
<body>
<div id="container">
First Name<input type="text" />
<input type="button" value="next" onClick="show();"/>
</div>
</body>
</html>
Basically, it ask for information, Name for example. When the button NEXT is click it will call a javascript function that will call a certain page or the NEXT PAGE that will load on the div with the Id Container.
NEXT PAGE
On the next page, it will then ask another question, like Last Name for example. But then, I want to go back to the previous page to make same changes.
HERE is the code:
<script type="text/javascript">
function show(){
ajaxgetdata("index.php","","#container1");
}
</script>
<div id="container">
Last Name<input type="text" />
what to make changes on the previous page?<input type="button" value="back" onClick="show();"/>
</div>
When button back is clicked, it will just call the previous page, but will not include the text that you input on the textbox.
I know that it happens because it just call the page..
Is there a way? that when back button is clicked, it will reload the previous page, with all the contents/inputs.
:) :( :'( :/ :|
Don't load any additional pages. Do everything with AJAX.
If you don't want, some server-side script may help :D
If you can use HTML5 in your site, you can take a look at the History API which can handle navigation and fires a "popstate" event, to which you can pass data.
There's a good example here:
http://diveintohtml5.info/history.html
You could do something like this:
window.addEventListener("popstate", function(e) {
if(!e.state || !e.state.firstName) {
return;
}
document.getElementById('firstName').value = e.state.firstName;
});
That even will trigger everytime you go back or forward, and you could just organize some function or array with the information you need.
Hope it helps.