I have been given some work to do on a site which uses Expression Engine. To produce a login for the user the site uses freemember plugin.
This produces a popup login form, what I have got stuck on is:
The user clicks on login
The form pops p
The user clicks on forgotten password
The user enters their email address and clicks submit
The popup disappears and the page shows behind.
It is the last bit I am attempting to alter as per the clients wish:
They are hoping that I can get the popup to:
1. stay on screen
2. display a 'password has been sent to email address' message on submit
3. wait 5 seconds and refresh popup so it displays the login page
The current code used on the page is
<div class="signuppopup popupsgroup" style="display:none">
<div class="signuppopup-close"><img onclick="$('.popupsgroup').hide();" src="{site_url}themes/site_themes/agile_records/images/close_button.png" alt="X" /></div>
<div id="signin_navigation">
<ul>
<li>Create Account</li>
<li style="margin-left:20px;">Sign In</li>
</ul>
</div>
{exp:freemember:login return="{segment_1}/{segment_2}" error_handling="inline" error_delimiters='<span class="error">|</span>' form_id="sign_in_form" form_class="formholder"}
<div class="form-tab">
<div class="tab">
<label for="email">Email Address</label>{field:email}<br />
{error:email}
</div>
<div class="tab">
<label for="password">Password</label>{field:password}<br />
{error:password}
</div>
<div class="tab">
<input type="submit" class="sendbtn" value="Sign In" />
</div>
<div class="tab">
<a class="orange" onclick="forgot_password();" href="#">Forgot your password?</a>
</div>
</div>
{/exp:freemember:login}
{exp:freemember:forgot_password form_id="reset_password_form" form_class="formholder"}
<div class="form-tab">
<div class="tab">
<label for="email">Email address</label>{field:email}<br />
{error:email}
</div>
<p id="password_message">Please enter your email address and <input type="submit" value="click here" class="orange"> to receive an email with your new password.</p>
</div>
{/exp:freemember:forgot_password}
<div id="password_confirmation" style="display:none;">A new password has been sent to you</div>
</div> <!-- End signuppopup -->
You are looking for a way to let the browser and server communicate with eachother in an asynchronous way. Since I do not remember Freemember to support Ajax you can do two things:
Look for an alternative http://devot-ee.com/search/tags/tag/ajax-login
Write the javascript and php yourself.
I would advise the first because you are probably also having troubles with the popup to 'stay on screen' when someone enters an invalid e-mail address...
Related
Revised question. Trying to make the situation as clear as possible.
I downloaded a login system for my existing website. So as not to mess with my index.php, I set it up in its own folder (login-system). Got it all to work. I copy pasted relevant code to my index.php in the root and changed all paths to "login-system/whatever.php". Even though I changed the paths, it still won't work correctly. Specifically the css. The login form has its own css file (login-system/css/css.html) included like this:
.
In css.html are 3 links (google fonts, normalize and css/style.css)
I cannot get the login form's css AND the existing css (main.css) to work together. I either get my page looking fine and login form has no css or I get the login form with its css messing up my page. What do I need to do?
Here is the relevant code:
The Living Oracles.org
</head>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if (isset($_POST['login'])) { //user logging in
require '/login-system/login.php';
}
elseif (isset($_POST['register'])) { //user registering
require '/login-system/register.php';
}
}
?>
<body>
<div class ="login">
<div class="form">
<ul class="tab-group">
<li class="tab">Sign Up
</li>
<li class="tab active">Log In
</li>
</ul>
<div class="tab-content">
<div id="login">
<h1>Welcome Back!</h1>
<form action="index.php" method="post" autocomplete="off">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" name="email"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" required autocomplete="off" name="password"/>
</div>
<p class="forgot">Forgot Password?
</p>
<button class="button button-block" name="login"/>Log In</button>
</form>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="login-system/js/index.js"></script>
</div>
</div>
I have a web app where currently it works with email addresses and passwords so you can email out a token for people to click and setup their password. This is working fine.
Im adding an option for PIN users who do not have email accounts and I want to be able to let them set their password up on first login. When the user is setup currently the database password field is unpopulated (this could be changed if required)
I'm a little stuck as to how to proceed with this, currently my login view looks like this:
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="col-md-2"></div>
<div class="col-md-5">
<form class="form-center" method="post" action="<?php echo site_url('account/login_submit'); ?>" role="form">
<h2 class="">Login</h2>
<div class="input-group">
<input style="margin: 0px 0px;" type="text" name="email" class="form-control" placeholder="Email address/PIN"/>
<span class="input-group-addon"><?php echo $domain; ?></span>
</div>
<input type="password" name="password" class="form-control" placeholder="Password"/>
<input class="btn btn-primary" name="login" type="submit" value="Go"/>
<input class="btn btn-warning" name="forgot" type="submit" value="Forgot Password"/>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div><!-- /.container -->
What I think is the best way forward is to capture if someone logs in with a PIN and doesnt have a password set in the database and forward them to a page to setup their password.
This is where this question (in my opinion) gets a little iffy as Im a bit unsure what Im asking.
Currently the login submit button gets called if you press the forgot password and has the below code
public function login_submit()
{
if ($this->input->post('forgot')!==FALSE)
{
try {
$email = $this->input->post('email').EMAIL_DOMAIN;
$this->forgot($email);
} catch (UserException $ex) {
$this->alert('Incorrect email', $ex->getMessage(), 'danger');
header('Location: '.site_url('account/login'));
return;
}
}
Should I just add another condition in here that if the forgot button was pressed and the pin was entered that we don't email but redirect to a change password page? something like this? changing password in php/codeigniter
Or is there a better way of doing the above?
For your issue
Currently the login submit button gets called if you press the forgot password and has the below code
You have two button with type "submit"
<input class="btn btn-primary" name="login" type="submit" value="Go"/>
<input class="btn btn-warning" name="forgot" type="submit" value="Forgot Password"/>
Make Forgot Password button to a tag like Forgot Password
and do Forgot Password thing there in new page with different form action.
And for
Ask for password on first login
Create a column for a flag as last login in login table with default value null and then check in you login action if last_login == null then redirect it to change password screen. And after login success update last login field by current date.
after many days of trying to get a previously working php form converted to submitting the variables inside a new div I realized that I'm missing something. Other posts show javascript, but Iv'e never used that before and don't understand the need. The new page draws correctly, but the php variables are not being received on the destination page.
HTML for the submit,
<form action="entrance2.php">
<div class="medium-12 columns m-b20"><h4 class="heading">Existing users log-in here :-</h4></div>
</div>
<div class="row">
<div class="user medium-12 columns text-center m-b15"><img src="images/user-img.png" alt=""/></div>
</div>
<div class="row">
<div class="medium-10 columns medium-offset-1"><label for="User Name"></label>
<input id="OwnerEmaili" type="text" placeholder="User Name" name="UserName"></div>
</div>
<div class="row">
<div class="medium-10 columns medium-offset-1"><label for="Password"></label>
<input id="OwnerPasswordi" type="password" placeholder="Password" name="Password"></div>
</div>
<div class="row">
<div class="medium-12 columns text-center"><button class="grd-button">Log In</button></div>
<input type="submit" id="save" name="save" value = "Submit"/>//simple submit for testing
<div class="grd-button1" onClick="document.forms['submit-form'].submit();"></div>
</form></div>
</div>
</div>
Receiving page,
<?php
$p_OwnerEmaili=$_POST["OwnerEmaili"];
$p_OwnerPasswordi=$_POST["OwnerPasswordi"];
echo "$p_OwnerEmaili;$p_OwnerPasswordi";
Only shows the ;.
Is javascript required to submit from inside a div?
You're accessing the wrong items.
You'll need to set your forms input name attributes to this if you want to access them the way you currently have in your php script:
<input id="OwnerEmaili" type="text" placeholder="User Name" name="OwnerEmaili">
And
<input id="OwnerPasswordi" type="password" placeholder="Password" name="OwnerPasswordi">
That will allow you to access them as you do in your PHP script.
You can always check what values have been sent to your php script by using var_dump() or print_r().
<?php print_r($_POST); ?>
Would've shown you that you had UserName & Password set instead of what you wanted.
As Ghost pointed out in the comments, your form will always send user input via GET if you dont specify a method in it. So set this in your form tag:
<form action="entrance2.php" method="post">
I'm building a mobile website using jQuery Mobile and PHP.
Currently, when I submit a form with PHP, it redirects me to the previous page.
However, I want to stay on the same page.
Here's my code:
<form action="#" method="post" data-ajax="false">
<center>
<div data-role="page">
<div data-role="collapsible" data-iconpos="right" data-theme="a" style="width:500px">
<h3>Offer 1</h3>
<img src="images/special1.jpg"/>
<h3>Valid through: 06/30/2013</h3>
<div data-role="collapsible" data-collapsed="true" data-iconpos="right" data-theme="a" style="width:400px; background-color:#FFFFFF">
<h3>Redeem this offer</h3>
<div >
<h4 style="color:#CC0000"> To be used by our staff only!</h4>
<p style="color:#CC0000;font-family:Arial, Helvetica, sans-serif">Do <strong>not</strong> press the Redeem button now. Ask our store associate for assistance.</p>
<input type="submit" name="offer1btn" value="Redeem" data-theme="b" style="background:#FF0000 !important"/>
</div>
<div style="display:none">
<h4 style="color:#CC0000">Offer has been Taken</h4>
</div>
</div>
</center>
</form>
Or you can use
action="<?php echo $_SERVER['PHP_SELF'];?>"
hope that helps.
jQuery Mobile is a little bit specific with form submitting. If you disable classic jQuery Mobile form handling with data-ajax="false" attribute then only correct way to submit a form is through $.ajax call.
I made a working example here: jQuery Mobile: How to correctly submit form data
I have been having problems for the past two days trying to submit a form using jquery ajax, php to mysql database. I reused a code for an animation form which I found online. The html code as follows (file name: "Slider.html"):
<html>
<body>
<div id="form_wrapper" class="form_wrapper">
<form class="register" style="right:-500px;backgroundcolor:grey;">
<h3>Register</h3>
<div class="column">
<div>
<label>First Name:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Last Name:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
</div>
<div class="column">
<div>
<label>Username:</label>
<input type="text"/>
<span class="error">This is an error</span>
</div>
<div>
<label>Email:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Password:</label>
<input type="password" id="r_passwordField"/>
<span class="error">This is an error</span>
</div>
</div>
<div class="bottom">
<div class="remember">
<input type="checkbox" />
<span>Send me updates</span>
</div>
<input type="submit" id="registrationform" value="register"/>
<a href="index.html" rel="login" class="linkform">You have an account already? Log in
here</a>
<div class="clear"></div>
</div>
</form>
<form class="login active">
<h3>Login</h3>
<div>
<label>Username:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div>
<label>Password: <a href="forgot_password.html" rel="forgot_password" class="forgot
linkform">Forgot your password?</a></label>
<input type="password" id="l_passwordField" size="10"/>
<span class="error">This is an error </span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
<input type="submit" id="loginform" value="Login"></input>
<a href="register.html" rel="register" class="linkform">You don't have an account yet?
Register here</a>
<div class="clear"></div>
</div>
</form> <form class="forgot_password">
<h3>Forgot Password</h3>
<div>
<label>Username or Email:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<input type="submit" id="forgortform" value="Send reminder"></input>
Suddenly remebered? Log in here
<a href="register.html" rel="register" class="linkform">You don't have an account?
Register here</a>
<div class="clear"></div>
</div>
</form>
</div>
<div id="graph-wrapper" class="graph-container" style="display:none">
<h3>Standard Diviation Bell Curve<h3>
<div class="graph-info">
Visitor
<span></span>
</div>
<div class="graph-container">
<div id="graph-lines"></div>
<div id="graph-bars"></div>
</div>
</div>
</div>
</body>
</html>
jquery ajax code as follows (jquery script on the same file as the html code):
<script>
$(document).ready(function(){
//animated code and other codes omitted
("#registrationform").click(function(){
$.post("postdata.php",
{fname:"Ibrahim",lname:"Ahmadu",email:"ibrostay#yahoo.com",uid:"ibro2stay",pwd:"ibro2stay",mean:"0.1",varience:"0.1",sdev:"0.
1",duration:"0.1"},function(responce){
if(responce==0){
alert("There was an error updating the record");
}else{
alert("update successful");
}
});
});
});
</script>
Below is the php code (php code file name: "postdata.php"):
<?php
$fname=$_REQUEST["fname"];
$lname=$_REQUEST["lname"];
$email=$_REQUEST["email"];
$uid=$_REQUEST["uid"];
$pwd=$_REQUEST["pwd"];
$mean=$_REQUEST["mean"];
$varience=$_REQUEST["varience"];
$sdev=$_REQUEST["sdev"];
$duration=$_REQUEST["duration"];
$con=mysql_connect('localhost','root','');
if(!$con)
{
die("Error Connecting to database;"+mysql_error());
}
$database=mysql_select_db('mydb');
if(!$database)
{
die("Error Connecting to database;"+mysql_error());
}
$update = mysql_query("insert into users values('$fname','$lname','$email','$uid','$pwd','$mean','$varience','$sdev','$duration')");
if(!$update)
{
die("Update wasn't Success full"+mysql_error());
}
echo "update successfull";
mysql_close($con);
?>
Whenever I click the register button nothing happens. The page only refreshes back to the login form since it has class "active" as the default form, and the browser address bar changes from this url: "localhost/slider.html" to this url: "localhost/slider.html?".
I hope my question was explicit enough, because I need an urgent answer, as this is my thesis project and I am running out of options.
and the browser address bar changes from this url: "localhost/slider.html" to this url: >"localhost/slider.html?".
use e.preventDefault();
$("#registrationform").click(function(e){
^
|
|_______________ you forgot the $
then add,
`e.preventDefault();
check javascript console and you will see all the errors. you have to eliminate one by one. For the start, check above.
advice: when you copy/paste codes, atleast try to know the structures. sometimes it wil conflict with your code and may stop running your code.
Looks like your Javascript has some errors and not executing hence. So, the form submit resorts to its default behavior - that is, submit to the tag's action attribute. Since you have not specified the action attribute in the tag, it will post the parameters to the current page.
You are getting the url localhost/slider.html? because of two reasons:
You have not specified method="post" in your . So, the form is trying to submit as GET. That is why the appended "?"
You do not have names for the inputs. So, the query string is empty. You need to specify name attribute for every input.
What you have to do first is to debug your Javascript. Use Firebug in Firefox or the console in Chrome or any similar tools to capture your JS errors and also examine your Ajax requests and responses.
Also, make sure that the last statement in the "click" function is a :
return false;
to force the form to stay on the page.
Another important thing is, as #steve pointed out, add method and action attributes to your tag. This will make sure that your script will not fail entirely on a JS disabled browser or on any such conditions.