This question already has answers here:
How do I redirect to another webpage?
(58 answers)
Closed 3 years ago.
After inputting login details i would like the target.html page to load in the same window. Currently it loads in a new tab.
<body>
<div class="loginbox">
<img src="images/avatar.png" class="avatar">
<h1>Login</h1>
<form>
<p>Username</p>
<input type="text" name="userid" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="pswrd" placeholder="Enter Password">
<input type="submit" onclick="check(this.form)" value="Login">
</form>
<script language="javascript">
function check(form) {
if (form.userid.value == "username" && form.pswrd.value == "password") {
window.open('target.html')
} else {
alert("Error Password or Username")
}
}
</script>
</div>
</body>
Use window.location:
window.location.href = 'target.html';
Because the button is in a form, you must also cancel the default behavior of the event with e.preventDefault(). Here's a full example:
function check(e) {
e.preventDefault();
if (e.target.form.userid.value == "username" && e.target.form.pswrd.value == "password") {
window.location.href = 'target.html';
} else {
alert("Error Password or Username")
}
}
<div class="loginbox">
<img src="images/avatar.png" class="avatar">
<h1>Login</h1>
<form>
<p>Username</p>
<input type="text" name="userid" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="pswrd" placeholder="Enter Password">
<input type="submit" onclick="check(event)" value="Login">
</form>
</div>
You can keep the type="submit" and use:
form.addEventListener('submit', function(event) {
event.preventDefault();
if (form.userid.value == "username" && form.pswrd.value == "password") {
window.open('target.html', '_self');
} else {
alert("Error Password or Username");
}
}, false);
Related
I have an input for username and one for password. When the username and/or password don't match, I successfully get the "alert", but when they do match, nothing happens. I can't figure out what I'm doing wrong.
I have tried windows.location.replace as well, with the same results.
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "password1") {
window.location ("http://stackoverflow.com");
}
else {
alert('incorrect username or password')
}
}
<form>
<label for="username" id="user">User</label>
<input type="text" placeholder="Username" name="username" id="username">
<br>
<label for="password">Pass</label>
<input type="password" name="password" id="password" placeholder="Password">
<br>
<button onclick="user1()">Submit</button>
</form>
It should be
window.location = 'http://stackoverflow.com';
instead of a function call. The other problem was the button causing a page reload. To fix that you should do:
<button type="button" onclick="user1()">Submit</button>
type="button" will prevent it from submitting the form by default.
demo
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "password1") {
window.location = "http://stackoverflow.com";
}
else {
alert('incorrect username or password');
}
}
<form>
<label for="username" id="user">User</label>
<input type="text" placeholder="Username" name="username" id="username">
<br>
<label for="password">Pass</label>
<input type="password" name="password" id="password" placeholder="Password">
<br>
<button type="button" onclick="user1()">Submit</button>
</form>
window.location="url"
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "password1") {
window.location="http://stackoverflow.com";
}
else {
alert('incorrect username or password')
}
}
<form>
<label for="username" id="user">User</label>
<input type="text" placeholder="Username" name="username" id="username">
<br>
<label for="password">Pass</label>
<input type="password" name="password" id="password" placeholder="Password">
<br>
<button onclick="user1()">Submit</button>
</form>
Assuming you are looking for window.open, where window.location will also work
function user1() {
var user = document.getElementById('username').value
var pass = document.getElementById('password').value
if (user == "admin" && pass == "password1") {
window.open("https://stackoverflow.com");
} else {
alert('incorrect username or password')
}
}
<form>
<label for="username" id="user">User</label>
<input type="text" placeholder="Username" name="username" id="username">
<br>
<label for="password">Pass</label>
<input type="password" name="password" id="password" placeholder="Password">
<br>
<button onclick="user1()">Submit</button>
</form>
Hi I'm trying to create a simple login form with 2 or 3 users where depending on who is logging in the redirect should be to different urls.
My code so far:
HTML
<h1 class="title">Logga in</h1>
<div class="grid__container">
<form name="login" onSubmit="return validateForm();" action="some website url" method="post" class="form form--login">
<div class="form__field">
<label class="fontawesome-user" for="login__username"><span class="hidden">Username</span></label>
<input name="usernameInput" id="login__username" type="text" class="form__input" placeholder="Username" required>
</div>
<div class="form__field">
<label class="fontawesome-lock" for="login__password"><span class="hidden">Password</span></label>
<input name="passwordInput" id="login__password" type="password" class="form__input" placeholder="Password" required>
</div>
<div class="form__field">
<input type="submit" value="Sign In">
</div>
</form>
</div>
JavaScript
function validateForm() {
var username = document.login.usernameInput.value;
var password = document.login.passwordInput.value;
var username1 = "user 1";
var password1 = "1234";
var username2 = "user 2";
var password2 = "4321";
if ((username == username1) && (password == password1)){
return "www.google.se";
}else if (username == username2) && (password == password2) {
return "www.facebook.se";
}else{
alert ("Login was unsuccessful, please check your username and password");
return false;
}
}
I have a form which has 3 separate input with a type of "submit".
The first two inputs output a message once they are clicked, but the final one is supposed to redirect to another page however it is not doing this. I think this is because the form is submitting and refreshing the page before it gets to the JavaScript for redirection.
Here is my code:
FORM.php
<form class="form" id="form" method="POST" enctype="application/x-www-form-urlencoded">
<br>
<input type="email" name="email" id="email" maxlength="80" value="<?php echo $email ?>" placeholder="Enter Your Email" /><br /><br>
<input id="button4" type="submit" value="Get Security Question" name="submit2" style="cursor:pointer;"/><br>
<br><input type="password" name="securitya"id="securitya" maxlength="20" value="<?php echo $securitya ?>" placeholder="Enter Your Security Answer" /> <br />
<br>
<input id="button3"type="submit" value="Check Answer" name="submit" style="cursor:pointer;"/>
<br>
<br><input type="password" name="newpassword" id="newpassword" maxlength="20" placeholder="Enter Your New Password" /> <br />
<br><input type="password" name="confirmpassword" id="confirmpassword" maxlength="20" placeholder="Re-Enter Your New Password" /> <br />
<br>
<input id="button2" type="submit" value="Change Password" disabled="disabled" name="submit" style="cursor:pointer;"/>
JavaScript
jQuery(function(){
$("#button2").click(function(){
$(".error").hide();
var hasError = false;
var passwordVal = $("#newpassword").val();
var checkVal = $("#confirmpassword").val();
if (passwordVal == '') {
$("#newpassword").after('<span class="error" >Please enter a password.</span>');
hasError = true;
} else if (checkVal == '') {
$("#confirmpassword").after('<span class="error">Please re-enter your password.</span>');
hasError = true;
} else if (passwordVal != checkVal ) {
$("#confirmpassword").after('<span id = "pass" class="error">Passwords do not match.</span>');
hasError = true;
}
if(hasError == true) { return false; }
else {
$("#button2").after('<span class="error">Passwords accepted.</span>');
window.location.href='adminsignin.php';
}
});
});
What is weird about this is the message 'Passwords accepted' appears on screen for a split second, but there is no redirection to 'adminsignin.php'
Can anyone help?
In your javascript, pass the event into the click handler, and preventDefault().
$("#butotn2").click(function(e) {
e.preventDefault();
...
}
the submit button has default behavior, so you'll want to prevent its default behavior so that you can perform your operations and then redirect with your window.location.href.
please try changing to document.location = 'your URL';
I have a web form that submits if my function validate form returns true in that function i wrote an if statement that if another function called usernamecheck returns true then return the validateform function true. I dont want the form to submit unless you click the button to check the username. I know i didnt write this the best way i hope you understand
<!-- Signup Form -->
<form name='signup' action="subscription.php" onsubmit="return validateForm();" method="post" >
<input type="text" id="signupUsername" name="signupusername" placeholder="Business Name" tabindex=1 required>
<input type="password" id="signupPassword" placeholder="Password" name="signuppassword" tabindex=2 required> <br>
<input type="text" id="ownerName" placeholder="Owner's Name" name="ownername" tabindex=3 required>
<input type="email" id="signupEmail" placeholder="Email" name="signupemail" tabindex=4 required>
<input type="tel" id="signupphoneNumber" placeholder="Phone Number" name="signupphonenumber" tabindex=5 required>
<input type="image" id="signupSubmit" src="images/signupBtn.jpg">
<input type="text" id="city" placeholder="City" name="city" tabindex=6>
<input type="text" id="state" placeholder="State" name="state" tabindex=7>
This is the button that you click to check your username if it exists
<input type="button" id='check' value="Check It">
//
</form>
<script type="text/javascript">
Below there is the function where if you click the button above it checks the function usernamecheck
$(function() {
$( "#check" ).click(function() {
return usernamecheck();
});
});
Below is the validateForm function where if usernamecheck returns true it returns true as well and submits the form
function validateForm()
{
if(usernamecheck() && $("#signupUsername").val().length < 4) {
return true;
}
}
function usernamecheck() {
$.post( "checkusername.php", { username: $("#signupUsername").val() })
.done(function( data ) {
result = JSON.parse(data);
if(result["status"]== "Username is taken")
{
alert("username is taken");
return false;
}
else if(result["status"]== "Username is Available") {
alert("username is Available");
return true;
}
else {
alert('You did not check the username');
}
});
}
</script>
<!-- Map Logo -->
<img src='images/map.jpg' id="map" class='menuitems'>
<!-- About Us Logo -->
<img src='images/aboutus.jpg' id="aboutus" class='menuitems'>
<!-- People Logo -->
<img src='images/people.jpg' id="people" class='menuitems'>
</div>
</div>
</div>
</body>
</html>
I am looking to make a simple form validation error message that displays under the username field.
I cannot seem to figure it out.
<form name ="myform" onsubmit="validation()">
Username: <input type ="text" name="username" /><br />
<input type ="submit" value="submit" />
<div id ="errors">
</div>
</form>
Here is my validation script:
function validation(){
if(document.myform.username.value == ""){ //checking if the form is empty
document.getElementById('errors').innerHTML="*Please enter a username*";
//displaying a message if the form is empty
}
You need to stop the submission if an error occured:
HTML
<form name ="myform" onsubmit="return validation();">
JS
if (document.myform.username.value == "") {
document.getElementById('errors').innerHTML="*Please enter a username*";
return false;
}
JavaScript
<script language="javascript">
var flag=0;
function username()
{
user=loginform.username.value;
if(user=="")
{
document.getElementById("error0").innerHTML="Enter UserID";
flag=1;
}
}
function password()
{
pass=loginform.password.value;
if(pass=="")
{
document.getElementById("error1").innerHTML="Enter password";
flag=1;
}
}
function check(form)
{
flag=0;
username();
password();
if(flag==1)
return false;
else
return true;
}
</script>
HTML
<form name="loginform" action="Login" method="post" class="form-signin" onSubmit="return check(this)">
<div id="error0"></div>
<input type="text" id="inputEmail" name="username" placeholder="UserID" onBlur="username()">
controls">
<div id="error1"></div>
<input type="password" id="inputPassword" name="password" placeholder="Password" onBlur="password()" onclick="make_blank()">
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
I would strongly suggest you start using jQuery. Your code would look like:
$(function() {
$('form[name="myform"]').submit(function(e) {
var username = $('form[name="myform"] input[name="username"]').val();
if ( username == '') {
e.preventDefault();
$('#errors').text('*Please enter a username*');
}
});
});