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="#">
Related
I have this code, I don't know if it's true or not
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form name="ajaxform" id="ajaxform" action="https://www.golantelecom.co.il/rpc/web.account.rpc.php?action=login&p_action=" method="POST">
username: <input type="text" name="username" value ="1863818"/> <br/>
password: <input type="text" name="password" value ="000000000000" /> <br/>
</form>
<input type="button" id="simple-post" value="login" />
<script>
!!!
</script>
</body>
</html>
I want to log in silently, without going to the original login page, and saving cookies in my browser.
It prints a message on the html page under the login button: "Login successfully with 1863818" after pressing the login button.
How does the script know that this login is true or false?
I want the script to read the "source page" to search for a specific word (I specify it)
If it finds it, the login has been successful, and if it does not, it means that the login failed.
I have just started using GWTBootstrap. I have set up my login page and now I want to:
If login was unsuccessful stay on page
If value returned from the database is "1" go to htmlpage1.html
If value returned from the database is "2" go to htmlpage2.html
In this way if the wrong login information is entered I do not go to the next page and, if successful login, people with different access levels are presented with different information.
Is there a tutorial that covers this please?
My html code is:
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="input-block-level" placeholder="Email address">
<input type="password" class="input-block-level" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button id="SignIn" class="btn btn-large btn-primary" type="submit">Sign in</button>
<script type="text/javascript">
document.getElementById("SignIn").onclick = function () {
location.href = "htmlpage1.html";
};
</script>
</form>
</div> <!-- /container -->
You need to create an AJAX request inside on-click method in order to get some response from a POST url, based on it, you will redirect to the correct html.
Anyway, is better to use some framework to do that.
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>
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 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)