I'm fiddling around with a pretend "Logon screen" but am having trouble when it comes to redirecting the page.
I've tried a couple of different suggestions that I've found on the site, but so far nothing has worked.
I honestly think I'm just doing it wrong.
Any advice?
HTML
<div class="title"><h1>Webby Site</h1></div>
<div class="login-page">
<div class="form">
<form class="login-form">
<input id="User" type="text" placeholder="username"/>
<input id="PWord" type="password" placeholder="password"/>
<button class="button">Login</button>
<p class="message">Not registered? <a>Create an account</a></p>
</form>
</div>
</div>
JS
$(document).ready(function(){
$('.button').click(function(){
if ($('input#User').val() === "1" && $('input#PWord').val() === "1"){
document.location.href = "www.yoursite.com";
} else {
alert('Incorrect Account Details');
}
});
});
Code I've tried (in the same area as document.location.href)
document.location
window.location
window.location.href
location.href
By default, button acts like input type="submit", so it's trying to submit your form. Use event.preventDefault() to avoid this behaviour.
Correct way to redirect is setting window.location.href.
Also, I strongly recommend not to try client-side authentification, because anyone could just read login and password in your js file.
For HTML, you can use <button onclick="location.href='url'">text</button>
You can also use <button onclick="window.location.replace(url)">text</button>
Related
I have tried multiple of things making the code to redirect, my teacher told me that I need to use method POST, while the following code is the working one which the method get, if I change the method to POST it cannot redirect. I tried using the location.href inside my code, it doesn't seem to work at all. I even tried putting the return false in my javascript. May I know how can I fix these issues?
The following are my code for my form
<form action="/Membership/member-profilepage/member_home.html">
<div class="row">
<div class="col-1">
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<input type="checkbox" id="rmbpw" name="rmbpw" value="rmbpw">
<label for="rmbpw" id="rmbpw" name="rmbpw"> RememberMe</label>
<input type="submit" value="Login" onclick="login()">
</div>
<script src="login.js"></script>
</div>
</form>
This will be the code for my javascript
function login(){
alert("Login Successfully!");
}
Oh, Guys, I figure out an answer after doing a couple more research and trying a few more things. I cannot use input type="submit". Hence, I need to use input type="button" to do the redirection.
So this code works kinda but it opens another webpage up and leaves the login screen up. I have tried window.location.href, window.location.replace ,window.location="", none of it works. I would love for it to work in one tab but the open window is the only thing working. please help me.
<html>
<body>
<form onsubmit="return checkPswd()">
<input id="user" type="text" name="username"
placeholder="username">
<input id="pass" type="password" id="pass" name="password">
<input type="submit" name="submit" value="submit"
onclick="checkPswd();" onkeydown="checkPswd()">
</form>
</body>
<script type="text/javascript">
function checkPswd(){
var confirmpassword = "admin";
var username = document.getElementById('user').value;
var password = document.getElementById("pass").value;
if(password == confirmpassword){
window.open('redu.html')
}else{
alert('try again');
}
}
</script>
</html>
You are calling checkPswd onsubmit, onkeydown, and onclick, and after that you you are actually submitting a form which is meant to redirect to another url. Make up your mind where do you want to call the checkPswd?
On a side note: Are you really storing the password in javascript variable? which can be viewed by everyone (right-click on page and view source).
Assuming you want to continue with checking password in javascript do the following to fix your issue:
Remove the onsubmit from Form tag.
Remove the onkeydown event.
Change type of input field from "submit" to "button"
And don't use window.open() because that opens a new window, leaving the current one opened as it is.
use window.location.href = "redu.html";
This will not submit the form (hence redirect) and will only checkPswd on click of button.
I got my website over on the Github Pages Service. I'm trying to implement the FormSpree free contact form but after you submit the form, it redirects you to a different website. Something I'd like to avoid. So I looked it up on the internet and of course others wanted to get rid of it too (I omitted my email in the below picture).
This is the form I got above but it doesn't actually work at all. It worked before I tried to fiddle with it though.
Here is what the form looks like by default from FormSpree:
<form action="//formspree.io/your#email.com"
method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
Here is my version (which worked fine before I tried to get around the redirect)
<div class=modal-body style="background-color: #454545">
<p>Please use the form below to contact us regarding feedback or any questions you may have!
We will never use the information given below to spam you and we will never pass on your
information to a 3rd party.</p>
<p>As we are using <a target="_blank" href="http://formspree.io">FormSpree</a> for this form
please consult their privacy policy for any questions regarding this matter.</p>
<form id="contactform" method="POST">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span>
<input name="form-name-input" type="text" name="name" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Email</span>
<input name="form-email-input" type="email" name="_replyto" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Subject</span>
<input name="form-subject-input" type="text" name="subject" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Description</span>
<textarea name="form-description-input" name="description" class="form-control" rows="4" cols="60" required></textarea>
</div>
<input type="text" name="_gotcha" style="display:none" />
<input class="btn btn-success" data-dismiss="modal" type="submit" id="form-submit-btn" value="Submit">
<input type="hidden" name="_next" value="http://www.dynamicrealities.net" onclick="FormSentConfirmation()"/>
</div>
<script>
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com');
</script>
</form>
</div>
<div class="modal-footer" style="background-color: #333333">
<button class="btn btn-danger btn-bg" data-dismiss="modal" type="button" id="form-dismiss-btn" onclick="">Close</button>
</div>
And when I call _next I want it to execute the following alert:
function FormSentConfirmation() {
alert('Thanks for the email, we\'ll be in touch promptly.');
}
When I press the Submit button, all that happens is that the form goes away but I don't receive any emails. I'm probably just doing this wrong as I am fairly new still to HTML/JavaScript.
Update: The feature available only on paid plans.
Use this hidden input field inside the form for redirection after form submission. You can redirect users to a page that you like or you have created by using this code block.
<input type="hidden" name="_next" value="//site.io/thanks.html" />
replace value with a valid thank-you page URL.
Follow this link for a tutorial on how to use Formspree and also a video demo
Follow their AJAX example at the bottom: https://formspree.io/
$("#sendMessage").on("click", function() {
$.ajax({
url: "//formspree.io/dynamicrealities#gmail.com",
method: "POST",
data: {message: "hello!"},
dataType: "json"
});
});
Remember to include jQuery as well for this to work. Remove the:
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com
and replace it with my code and change the selector. Or use $("form").on("submit"...
Here is my example, which sends you a mail and prompts an alert for the user: http://jsfiddle.net/228d4snb/
Do anything you'd like to do right before that return false;
You can put the form in an iframe so only the iframe gets redirected. What I did was create a separate html doc with just the contact form html (and any associated scripts) and then in my actual contact.html page I put:
<iframe src="contact-form.html" class="container"></iframe>.
Style the iframe to the appropriate size and with no border and it should work swimmingly.
I have a design requirement in html and CSS,
In my website user can access few components without logging in ,if user tries to access any feature which needs login authentication,a small window has to be embedded on top of existing page and all remaining features has to be blurred(not accessible until user login).. asking for user login details... I was adding a sample image for reference.... Some one suggest me how to achieve this.....
thank you.
You can find a similar question here: How to implement login popup in html/javascript
You can use javascript to show/hide the login form
<script language="JavaScript" type="text/javascript">
function login(showhide){
if(showhide == "show"){
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
document.getElementById('popupbox').style.visibility="hidden";
}
}
</script>
and the form:
<div id="popupbox">
<form name="login" action="" method="post">
<center>Username:</center>
<center><input name="username" size="14" /></center>
<center>Password:</center>
<center><input name="password" type="password" size="14" /></center>
<center><input type="submit" name="submit" value="login" /></center>
</form>
<br />
<center>close</center>
</div>
Once you got that popup login, then customize it/add php or whatever you need.
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
and if HTML:
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
I'm trying to find a way to navigate to a url when a user enters the right password in my form, and display an error alert if they enter the wrong one. I'm a complete newbie to js and used these two links: Password correct? then redirect & Adding an onclick function to go to url in javascript? to put my current code together. My current code is:
<form class="hero-form">
<fieldset>
<div class="row-fluid">
<label>Enter your passcode</label>
<input type="password" name="password" maxlength="8" class="span7" id="password" placeholder="e.g. 12345678" required/>
<button class="btn btn-info btn-large span5" id="joe_btn" input type="submit" value="Submit" onclick="if (document.getElementById('password').value == '12345678') location.href = 'http://example.url.here'; else alert('Please check your passcode and try again');">Enter</button>
</div>
</fieldset>
</form>
So far I can get it to return an alert if the password is correct, but as soon as I replace:
alert('congrats, correct password')
with this it doesn't work.:
location.href = 'http://your.url.here'
Any help would be grately appreciated. Please post the full code for your response, as I'm an absolute beginner with js and could easily miss something out if you only post snippets.
Thanks heaps,
Your code should be like this:
<script type="text/javascript">
function onSubmit() {
if (document.getElementById('password').value == '12345678') {window.location.href = 'http://google.co.in'; }else{ alert('Please check your passcode and try again');}
}
</script>
<fieldset><form class="hero-form" action="#">
<div class="row-fluid">
<label>Enter your passcode</label>
<input type="password" name="password" maxlength="8" class="span7" id="password" placeholder="e.g. 12345678" required/>
</div>
</form></fieldset>
<button class="btn btn-info btn-large span5" id="joe_btn" onclick="onSubmit()">Enter</button>
Your mistake: The button should not submit the form so I have taken it outside the form. And I have updated the location.href to window.location.href
Hope it works.
You set the location.href fine, but the problem is that before the browser has a chance to navigate to that new page, your form gets submitted (because the user clicked on a type="submit" button). Submitting the form causes the browser to begin a new navigation to the form's action, which cancels the navigation you initiated by setting location.href. In your code, the form's action has not been set, so it defaults to the same page you are already on. In effect, the browser will navigate back to the same page, and so it looks like nothing is happening - although you might notice that the content of your form has appeared in the browser's nav bar.
You need to prevent the browser from automatically submitting the form when the button is clicked. One way to do this is to add return false; to the end of your onclick action:
onclick="if (document.getElementById('password').value == '12345678') location.href = 'http://example.url.here'; else alert('Please check your passcode and try again'); return false;"
window.location.href = 'http://your.url.here';
Note that I put window in front of location.