I just made pop up login with JavaScript:
<script type="text/javascript">
function show_Window(id){
var e = document.getElementById(id);
if(e.style.display == 'block'){
e.style.display = 'none'
}else{
e.style.display = 'block'
}
}
</script>
and inside this window there is login form and ID is popUpLogin:
<div id="popUpLogin">
<div id="content">
<div id="exit">
<p>X</p>
</div>
<form method="POST">
<?
if(isset($error))
{
?>
<label class="loginLabel"><b>KÄYTTÄJÄNIMI: </b></label><input type="text" class="input" name="usernameInput" placeholder="" required></input>
<br><br>
<label class="loginLabel"><b>SALASANA: </b></label><input type="password" class="input" name="passInput" placeholder="" required></input>
<br><br>
<button type="submit" name="loginButton" class="loginButton">KIRJAUDU</button>
</form>
<br><br><br><br>
REKISTERÖIDY
</div>
It works fine, if login details are OK, but if password or username is wrong page reloads and this popup window shutdown and there is not error message in this popup login. How i can keep this window open after this button refresh page?
Considering that you are using a raw html form for your login, the proper pattern would be to have your backend set the error state. So after the page reloads, the login form would re-open and probably show a helpful message to the user like "your email/password combo wasn't found etc". I can't tell you much about how write that without knowing your backend, but probably the backend would set a JS variable in the scope of this page.
Alternately, you could turn the login into an JS form and not reload the page, which might improve your ux here (google XMLHttpRequest or sending forms through javascript if you aren't already familiar with this pattern)
Related
I made a custom form with mailchimp, with custom css and custom JavaScript for errors. But, when you click on submit, the form redirects you to a thank you page or to a error page, and I don't like that.
In my JavaScript code, I already have the error' messages set onclick.
This is my html (I only put the input codes):
<form action="----/subscribe/post-?u=----;id=----" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="text" value="" name="FNAME" class="required form-input" placeholder="Nome..." id="mce-FNAME">
<div id="obbligo-nome" class="obbligo" style="color:red">Required</div>
<input type="email" value="" name="EMAIL" class="required email form-input" placeholder="Email..." id="mce-EMAIL">
<div id="obbligo-email" class="obbligo" style="color:red">Required</div>
<input type="radio" value="Acconsento al trattamento dei miei dati personali." name="CONSENSO" id="mce-CONSENSO-0">
<div id="obbligo-consenso" class="obbligo" style="color:red">Required</div>
<input type="submit" value="ACCEDI" name="subscribe" id="mc-embedded-subscribe" class="button">
So, I set my vars and my onclick, and everything works fine.
var username=document.getElementById("mce-FNAME");
var email=document.getElementById("mce-EMAIL");
var consenso=document.getElementById("mce-CONSENSO-0");
var login=document.getElementById("mc-embedded-subscribe");
login.onclick=function() {
if (username.value.length==0){
document.getElementById("obbligo-nome").style.display = "block";
}
if (email.value.length==0){
document.getElementById("obbligo-email").style.display = "block";
}
if (consenso.checked==false){
document.getElementById("obbligo-consenso").style.display = "block";
}
}
The only problem is that it redirects by submitting to a mailchimp's thank you page or to the errors page (I don't want this, I'd like to show everything on my website page into the form).
I know that this redirect is caused by the "form action" in the html, but how can I block this? Thank you so much.
PS: I saw other questions about this, but I didn't understand so much, I'm new to javascript and I don't know jQuery.
You can use Axios for Ajax requests.
Then you dont need the "form" tag and can send data without reloading or redirecting the page
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 am trying to make my website first ask Simple data and than continue loading the page, but I can't figure it out.(so first ask data and than print PRINT THIS AFTER)
this is what I have now:
<html>
<h1>PRINT THIS BEFORE</h1>
<form id="login">
name: <input id="name" type="text">
password: <input id="password" type="password">
<input value="log-in" type="button" onclick="sendIt()">
</form>
<script>
var send = false;
function sendIt() {
send = true;
}
var i = setInterval(function(){
console.log("f")
if(send) {
document.getElementById("login").remove();
clearInterval(i)
}
}, 100);
</script>
<h1>PRINT THIS AFTER</h1>
please help me
-------------EDIT----------------
I decided to use innerHTML to edit the html in a div with the id edit so it wont load the html yet
Code:
<html>
<h1>PRINT THIS BEFORE</h1>
<form id="login">
name: <input id="name" type="text">
password: <input id="password" type="password">
<input value="log-in" type="button" onclick="sendIt()">
</form>
<script>
var send = false;
function sendIt() {
send = true;
}
var i = setInterval(function(){
console.log("f")
if(send) {
document.getElementById("login").remove();
document.getElementById("edit").innerHTML = "<h1>PRINT THIS AFTER</h1>";
clearInterval(i)
}
}, 100);
</script>
<div id="edit">
</div>
I've read the other replies here and your comments. As others here suggested, the easiest way to do this would be to either hide the H1 or put the H1 in a hidden div, and you can then show that div via your "sendIt" function with Javascript if the login was successful. For what it's worth, you can't "pause" a site from loading content. Anything embedded in the HTML is going to load regardless of what Javascript is doing.
If hiding the content is not good enough (maybe for security reasons, you don't want to show someone content unless they are signed in, as hiding it would still let them view the source), there's only two other ways to do this. The first is server side programming. Post to the same page and if the login conditions exist, show the content instead of the login form.
The second method you can use an AJAX request. If the login is successful, you can dynamically load content from another web page on your server that contains the content you want to show. Note, the page you are dynamically loading should have some type of security (like server side programming) that validates if the person is logged in, otherwise you're back in the same hole, same goes for the server side method. If the content or AJAX page isn't validated in some way, they will find a way to view it anyway.
This problem is a little steeper than what you are asking us, but there are plenty of tutorials out there on a simple AJAX request or using server side programming languages like PHP. Now that you have an idea of how to do this, you can start experimenting.
<html>
<h1>PRINT THIS BEFORE</h1>
<form id="login">
name: <input id="name" type="text">
password: <input id="password" type="password">
<input value="log-in" type="button" onclick="sendIt()">
</form>
<script>
var send = false;
function sendIt() {
send = true;
}
var i = setInterval(function(){
console.log("f")
if(send) {
document.getElementById("login").remove();
document.getElementById("h1show").removeAttribute("hidden");
clearInterval(i)
}
}, 100);
</script>
<h1 id="h1show" hidden>PRINT THIS AFTER</h1>
Use hidden attribute on the h1, and then just remove it by :
document.getElementById("h1show").removeAttribute("hidden");
and it will show up.
Your form making submit when you press on button then page refresh is happen and you see your form again.
If you want to make request without page refresh you should return false on submit and have to use AJAX technology.
You can use CSS to show\hide your site content or backend to control your HTML.
If you want that your HTML will not contain a site content, after login make redirect to page with cookie checking or load a site content via AJAX.
get necessary info
login.html
<h1>PRINT THIS BEFORE</h1>
<form id="login" action="data.html">
name: <input id="name" type="text" required>
password: <input id="password" type="password" required>
<button type="bubmit">log in</button>
</form>
if prev page contains required info send to new page
data.html
<h1>PRINT THIS AFTER</h1>
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.