I have a login/register element where users login and register in the same form. The form exists of email and password. The downside is if a user mistypes his/her email....since then a new user will be added unintentionally to mysql.
I would like an alert of some kind where users can click 'yes' or 'no' to create a new account.
Any ideas how to do this best?
I don't think having a login / registration form being the same form and same submit button is a good idea. If you really want, I think Amazon has something similar where you type in your username and then use a radio button to select "I'm a new customer" or "I have a password." They have to specify on login which they want, and then they click "Login" to either login or signup (depending on their selection.)
Doing it that way makes it more intentional for a user to either login or signup.
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var c=confirm("Do you want to create an account?");
if (c==true)
{
document.getElementById("frm1").setAttribute("action","create.php");
}
document.getElementById("frm1").submit();
}
</script>
</head>
<body>
<form id="frm1" action="login.php">
<label for="email">Email:</label>
<input type="text" name="email" />
<label for="password">Password:</label>
<input type="password" name="password" />
<input type="button" onclick="show_confirm()" value="Submit" />
</form>
</body>
</html>
Related
So what I want to do it kind of like a login form, but rather than it being individual users, it's more of a password locked page.
Here's sort of what I have for php
<?php
$user = $_POST['user'];
if($user == "placeholder")
{
include("randomfile.html");
}
else
{
if(isset($_POST))
{?>
<form id="login" method="POST">
User <input type="text" name="user" id="userID"></input><br/>
<input type="submit" name="submit" value="Go"></input>
</form>
<?}
}
?>
and it's basically doing what I want it to do, but if you were to go back (like use the go back button in the browser) it doesn't get rid of that submitted text (in this case, it would be "placeholder").
Any suggestions of any other way to do this, maybe easier or more basic because I just started with php, and is it possible so that if you enter "placeholder" and submit it, then go back, it doesn't have the User field already filled out with what you previously submitted?
<form id="login" method="POST" autocomplete="off">
That work for all the form, I think is the easiest. Ref: form:autocomplete
First and foremost, this is my 1st time writing PHP code, so please forgive my newbie'isms.
I have a login form with 3 submit buttons (post method) named login, register and forgot. If I select login button, the login function in the PHP code gets called, however, the same is not true for the register and forgot buttons. Its almost like the only submit button that is working is the login buttons. My best guess at this point is there is id/name that not correct. For the sake of brevity I've removed the CSS portion. Any points in the right direction will be most appreciated.
<?php
function login(){
//do stuff
echo "Login";
}
function register(){
// do stuff
echo "Register";
}
function forgot(){
//do stuff
echo "Forgot";
}
if($_SERVER["REQUEST_METHOD"] == "POST") {
if(isset($_POST['login'])) {
login();
}
if(isset($_POST['register'])) {
register();
}
if(isset($_POST['forgot'])) {
forgot();
}
}
?>
<html>
<head>
<meta charset="utf-8">
<title>Login Page</title>
</head>
<body>
<div id="login">
<h1><strong>Welcome!</strong> Please login.</h1>
<form action="" method="post">
<fieldset>
<p><input type="text" name="username" required value="Username" onBlur="if(this.value=='')this.value='Username'" onFocus="if(this.value=='Username')this.value=''"></p>
<p><input type="password" name="password"></p>
<p><input type="submit" name= "login" value="Login"></p>
<p><input type="submit" name= "register" value="Register"></p>
<p><input type="submit" name= "forgot" value="Forgot Password"></p>
</fieldset>
</form>
</div> <!-- end login -->
</body>
</html>
HTML forms can not contain more than one input of type "submit" (which means others would not be functioning)
register and forgot are links rather than buttons.
Instead you could use:
Register
Another alternative is to use javascript to make these buttons act as links.
After copying and pasting my code into another file. It worked without any issues. The multiple submit buttons work without any issues.
I am new to web designing. Now, I have created a form, and if the user input doesn't meet the requirements I display error message, and if it does I do some mysql commands to enter the info to the database. Now one way to do this is to code the php file into the html and use this command,<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> like described [here][1]
But I don't want to put the script in the same file. How do I do that in another php file such that if user input is invalid, it will return to the homepage with the error message updated?
Here is my code
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="register.css">
</head>
<h1>Register as A new user</h1>
<div id="signup">
<form id="registration_form" action="registration.php" method="post">
<p>
<label>Name</label>
<input type="text" name="name"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Email</label>
<input type="text" name="email"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Password</label>
<input type="password" name="passwd"/>
<span class="errorMessage"></span>
</p>
<p>
<label>Repeat Password</label>
<input type="password" name="repasswd"/>
<span class="errorMessage"></span>
</p>
<input type="submit" class="button" value="sign up"/>
</form>
</div>
What should be in the registration.php? Like the link, I do everything, I set a flag to the error, Now if the flag is true I return the user to the homepage with the error messages, and if false, I show a message saying registration successful. How do I do the part,"return to homepage with the appended error message"?
All your validation and bulletproofing should be in the registration.php
stuff like this:
//both parameters are required, so make sure they were passed-in
if(!isset($_GET['name'])) {
die('Must pass \'name\');
//both parameters are required, so make sure they were passed-in
if(!isset($_GET['email'])) {
die('Must pass \'email\');
}
if(!isset($_GET['passwd'])) {
die('Must pass \'password\');
} else {
//do cool stuff here
}
Don't forget your JS validation as well for the front end. I really hope this helps and gives you a bit of direction.
put your validation codes in "validate.php" or any file name you like
then change the action to validate.php to
then in validate.php if validation matches the requirements.
header("Location: registration.php");
if not match
header("Location: back to the httml with form.php");
You can learn form validation here : http://allitstuff.com/registration-form-in-php-with-validation/
I have this in my PHP code, and it currently does the login request in the same login.php page but now i want to do it with Ajax. Basically I have this in the login.php
echo '<form method="post" ><div id="login" class="login">
<label for="login">User Name</label>
<input type="text" name="logInUsername" />
<label for="Password">Password</label>
<input type="password" name="logInPassword" />
<input type="submit" value="Submit" name="submitlogin" class="button" />
</div>';
I would like to still use this but have a login_request.php or something where i can send the username and password validated and then change the <div id=login> to say you are logged in!</div> I can do it the conventional way, with the form post .. but now I would like to try it with Ajax.
Any help will be much appreciated.
Regards
What have you tried so far? This is how I would start:
This should get you started:
HTML:
<form id="loginForm">
<div id="login" class="login">
<label for="login">User Name</label>
<input type="text" name="logInUsername" />
<label for="Password">Password</label>
<input type="password" name="logInPassword" />
<input type="button" value="Submit" id="submitlogin" class="button" />
</div>
</form>
jQuery:
$("#submitlogin").click(function() {
inputs = //grab then inputs of your form #loginform
$.ajax ({
url: "urltoyourloginphp.php",
data: inputs,
success: function() {
$("#login").html("You are now logged in!");
}
});
})
I wrote this a while ago, it's not quite a full ajax login (i.e. at the end it does still redirect you), but it may serve as a basis for a full ajax login. As a plus you actually don't need https (that was the whole point of this little project).
https://github.com/eberle1080/secure_http_login/blob/master/login.php
The high level steps go something like this:
Ask the server for a seed value (a salt) using an ajax request
Hash the password + seed using a sha1 sum
Ask the server to verify the username and salted + hashed password
If it's valid, the server sets a session cookie indicating that the user is logged in
The server responds to the ajax request with a success / fail message
jQuery has built in .post() and .serialize() methods for wrapping up a form.
$.post("login.php", $("#loginForm").serialize(), function(data) {
//pass information back in with data. if it's JSON, use $.parseJSON() to parse it.
alert('either logged in or errored');
);
You will also need to edit your form so it has an id, like: <form id="loginForm">...
I don't know PHP but will give you an example of how I would have done it with vbscript (classic asp) so you may try to adapt it to PHP as needed.
I, in my applications, don't use the form tag since I first used ajax. So, here we go:
login html page:
include jquery
<script type='text/javascript' src='your-jquery-url'></script>
<script type='text/javascript'>
function tryLogin() {
var inputs='userName='+$('logInUsername').val()+
'&userPassw='+$('logInPassword').val();
//notice that I changed your name= to id= in the form
//notice the '&' in the '&userPassw=
$.post('your-login-validation-page',inputs,function(data) {
eval('var json='+data);
if (json['success'] == 'true') {
$('#loginForm').html('<p>Congratulations! You\'ve been logged in successfully</p>')
} else {
alert(json['errorMessage']);
$('#logInUsername').focus();
}
});
}
</script>
<div id='loginForm' >
<label for="login">User Name</label>
<input type="text" id="logInUsername" />
<label for="Password">Password</label>
<input type="password" id="logInPassword" />
<button onClick='tryLogin(); ' >LOGIN</button>
</div>
login-validation-page
[in vbscript]
user = request.Form("userName")
passw = request.Form("userPassw")
"if is there this user" (coded as if there was a database look up...)
"if the password = passw" (coded as comparing the values)
response.write "{'sucess':'true'}"
else
response.write "{'success':'false','errorMessage':'wrong password'}"
end if
else
response.write "{'success':'false','errorMessage':'user not found'}"
end if
---> end of login-validation-page
New to all this so forgive my ignorance. I am trying to figure out how to add a "confirm your password" field to my form. Using PHP and mySQL. Is this entered in the html form code, and how can you set it to auto check that the password and confirm password fields match.
Just get both the password and confirm password fields in the form submit PHP and test for equality:
if ($_POST["password"] === $_POST["confirm_password"]) {
// success!
}
else {
// failed :(
}
where password and confirm_password are the IDs of the HTML text inputs for the passwords.
What you're trying to do is form validation. It's a good idea do validate on the client side (using javascript) so you have a faster response for your user on the interface, and on your server side (since your user can have javascript disabled - and because you should never blindly trust in user input. Read Should you do validation on your server side for some more information about this subject).
You just need to compare the two posted values. If correct, insert in database. If not, dont do anything and returns a message to the user saying that the password is incorrect.
I can't give more details since you didn't provide enough or detailed information of your php environment (frameworks used, libs used, etc).
you can check it in JavaScript using
<html><title></title><head>
<script>
function validate(){
if(!document.getElementById("password").value==document.getElementById("confirm_password").value)alert("Passwords do no match");
return document.getElementById("password").value==document.getElementById("confirm_password").value;
return false;
}
</script>
</head>
<body>
<form onSubmit="return validate()" action="nextPage.php">
Password: <input type="text" id="password" name="password" /><br/>
Reenter Password: <input type="text" id="confirm_password" name="confirm_password" />
<input type="submit" value="submit"/>
</form>
</body>
</html>
And on sever side you need to check it again in case client do not have JavaScript Enabled,
if($_GET['password']==$_GET['confirm_password'])
You have to use $_POST instead of $_GET in case of POST method
I updated the code, there is missing colon on form submit.
<html>
<title></title>
<head>
<script>
function validate(){
var a = document.getElementById("password").value;
var b = document.getElementById("confirm_password").value;
if (a!=b) {
alert("Passwords do no match");
return false;
}
}
</script>
</head>
<body>
<form onSubmit="return validate();" ">
Password: <input type="text" id="password" name="password" /><br/>
Re-enter Password: <input type="text" id="confirm_password" name="confirm_password" />
<input type="submit" value="submit"/>
</form>
</body>
</html>
Are you using some kind of framework? If not it should be as simple as checking after save that both fields are set and that $confirmationPassword == $passWord. Then apply whatever validation you need to the password before storing it in SQL.