I have pieced together this login form with a Javascript credential validator. For testing verification I have set the login to be Ryan for the username and ryan1234 for the password. When credentials are valid the user should be redirected to Facebook. But, it's not working. The credentials validate properly, but the window.location attribute sends to a broken location?
var modal = document.getElementById('id01');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var attempt = 3;
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "Ryan" && password == "ryan1234") {
alert("Login successfully");
window.location = "https://www.facebook.com/"; // Redirecting to other page.
return false;
} else {
attempt--; // Decrementing by one.
alert("You have left " + attempt + " attempt;");
// Disabling fields after 3 attempts.
if (attempt == 0) {
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
<div id="id01" class="modal">
<form class="modal-content animate" action="action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container-modal">
<label><b>Username</b>
</label>
<input type="text" placeholder="Enter Username" name="uname" id="username" required>
<label><b>Password</b>
</label>
<input type="password" placeholder="Enter Password" name="psw" id="password" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked">Remember me
</div>
<div class="container-modal" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
</div>
window.location = "https://www.facebook.com/"; // Redirecting to other page.
Isn't what you want... It should be window.location.href
Like this:
window.location.href = "https://www.facebook.com/"; // Redirecting to other page.
Related
I have a form and I want the submission button to be disabled when the form is submitted
form:
<form id="LoginForm" onsubmit='disableBtn()' asp-controller="Account" asp-action="Login" >
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input asp-for="Email" id="Email" class="form-control mrg15B" type="email" placeholder="ایمیل">
<span asp-validation-for="Email" class="text-danger"></span>
<input asp-for="Password" id="Password" class="form-control mrg15B" type="password" placeholder="کلـمه عبـور">
<span asp-validation-for="Password" class="text-danger"></span>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="RememberMe" /> #Html.DisplayNameFor(model => model.RememberMe)
</label>
</div>
<button type="submit" id="LoginBtn" class="btn btn-warning btn-block">ورود</button><br>
<br>
</div>
</form>
javascript code:
#section Scripts
{
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
function disableBtn() {
let userName = document.getElementById('Email').value;
let password = document.getElementById('Password').value;
if (userName != '' && password != '') {
let btn = document.getElementById('LoginBtn');
btn.disabled = true;
btn.innerHTML = 'please wait ...';
$('#LoginForm').submit();
}
}
</script>
}
And I tested:
$(document).ready(function () {
$('#LoginForm').submit(function () {
let userName = document.getElementById('Email').value;
let password = document.getElementById('Password').value;
if (userName != '' && password != '') {
let btn = document.getElementById('LoginBtn');
btn.disabled = true;
btn.innerHTML = 'please wait ...';
$('#LoginForm').submit();
}
});
});
But it takes a few seconds to reach the btn.innerHTML = 'please wait ...'; line
PS: if the user does not fill in the input, the validators will work and will not allow submission, in which case the button should not be deactivated.
Thankyou
Try to use button click event to submit the form, code like this (remove the onsubmit='disableBtn()' from the form tag):
<script type="text/javascript">
$(function(){
$("#LoginBtn").click(function(){
event.preventDefault(); //prevent the default submit event.
let userName = document.getElementById('Email').value;
let password = document.getElementById('Password').value;
if (userName != '' && password != '') {
let btn = document.getElementById('LoginBtn');
btn.disabled = true;
btn.innerHTML = 'please wait ...';
$('#LoginForm').submit();
}
});
});
</script>
The result as below:
I am trying to make a modal appear thanking the user for submitting the form but only if they completely filled out all the required inputs. I like the built in required feature in HTML but currently both pop ups happen when the submit button is pressed. I know an if else statement is required but cannot figure out how to show that the required field is satisfied in JS before popping up the modal.
<!-- THIS IS THE CONTACT FORM SECTION -->
<section class="contact-form">
<h1 class="uptop">CONTACT ME</h1>
<form method="get">
<input type="text" class = "name required" id="name" placeholder="NAME" required>
<input type="email" class="email required" id="email" placeholder="EMAIL" required>
<textarea id="message" class="message required" rows="5" cols="300" placeholder="MESSAGE"></textarea>
<input type="submit" class="submit" id="submit" value="Tell Me Something Good" >
</form>
</section>
<!-- The Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class ="modal-message">THANKS FOR THAT!</p>
</div>
</div
JavaScript:
var modal = document.getElementById('myModal');
var btnSubmit = document.getElementById("submit");
var spanClose = document.getElementsByClassName("close")[0];
var requiredFields = document.getElementsByClassName("required").required;
btnSubmit.onclick = function() {
modal.style.display = "block";
}
spanClose.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I think this could help
The innerHTML will do the job
function check(){
var name = document.getElementById('name').value;
if(name!=''){
setStatus("Success");
}else{
setStatus("Error");
}
}
function setStatus(message){
var inputStatus = document.getElementById('msg');
inputStatus.innerHTML = message;
}
<input id='name' name='name' /><span id="msg"></span>
<button type="submit" onClick="check()">Send</button>
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 failed asking this as my first question, hope this I do better.
"I just learned the basics of HTML/CSS but have almost to no idea of javascript. And I am making a website where I have a password box with a link button(disabled by default) leading to another page. My struggle is how to make a single password that when entered can enable that button in order to enter the other page. Sorry for my noobish question but am too new in the programming world."
So the html part for what I'm trying to do is:
<div class="whole">
<div>
<input type="password" placeholder="PASSWORD" required id="password" class="pass">
</div>
<div>
<a href="link">
<button class="button" id="button" type="submit" disabled>Click me!!!</button>
</a>
</div>
</div>
And all that I could do by research and on my own with the script was:
<script>
var pass1 = "pass";
var pass2 = document.getElementById("password");
if (pass1 == pass2) {
document.getElementById("button").disabled = false;
}
</script>
Sorry for my clumsiness again!
Thank you!!! :)
<div class="whole">
<div>
<input type="password" placeholder="PASSWORD" required id="password" onkeyup="check()" class="pass">
</div>
<div>
<a href="link">
<button class="button" id="button" type="submit" disabled="true">Click me!!!</button>
</a>
</div>
</div>
<script type="text/javascript">
var pass1 = "pass";
function check(){
var pass2 = document.getElementById("password").value;
if (pass1 == pass2) {
document.getElementById("button").disabled = false;
}
}
I created a fiddle , check it, I hope it will work
https://jsbin.com/qozawoj/edit?html,js,output
<div class="whole">
<div>
<input type="password" placeholder="PASSWORD" required id="password" class="pass" onkeyup="check()">
</div>
<div>
<button class="button" id="button" type="submit" onclick="go()" disabled="true">Click me!!!</button>
</div>
</div>
JS
var pass1 = "pass";
var pass2 = document.getElementById("password");
function check(){
if (pass1 == pass2.value) {
document.getElementById("button").disabled = false;
}
}
function go (){
alert('go');
}
You are close and you need a few more things.
Checkout the code below with // inline comments:
function myCheck(){ // called everytime password is entered
var pass1 = "pass";
var pass2 = document.getElementById("password").value; // you missed "value" !
if (pass1 == pass2) {
document.getElementById("button2").disabled = false; // enable link here
}
}
<div class="whole">
<div>
<input type="password" placeholder="PASSWORD" required id="password" class="pass" onkeyup="myCheck()"> <!-- myCheck() is called everytime the keyboard key goes from down to up -->
</div>
<div>
<a id="button2" href="http://rahul-desai3.github.io/chat/" disabled>button</a> <!-- notice the "disabled" attribute and NO <button> element -->
</div>
</div>
To make the link look like a button, use CSS.
First of all, I checked the similar posts but didn't find the answer I needed. I can't figure out what is the problem here. I use same form html codes and javascript in seperated files and it works fine but when I integrate those codes into my bootstrap page nothing is happening.
var count = 2;
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = ["Philip", "George", "Sarah", "Michael"];
var pwArray = ["Password1", "Password2", "Password3", "Password4"];
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Login was successful");
window.location = "http://www.google.com";
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid username and/or password. You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}
}
<!-- LOGIN MODAL -->
<div class="modal fade" id="login" role="dialog">
<div class="container">
<div class="modal-dialog">
<div class="row" style="margin-top:20px">
<div class="col-md-12">
<div class="well well-sm">
<form name="myform">
<h2>Please Login</h2>
<div class="form-group">
<input type="text" name="username" class="form-control input-lg" placeholder="Username">
</div>
<div class="form-group">
<input type="password" name="pword" class="form-control input-lg" placeholder="Password">
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<input type="submit" class="btn btn-lg btn-primary" value="Sign In" onclick="validate()">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END of LOGIN MODAL -->