Expression Engine Freemember forgotten password form

Question

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><a href="#" onclick="$('.signuppopup').hide(); $('.registerpopup').show(); return false;">Create Account</a></li>
<li style="margin-left:20px;"><a href="#" onclick="$('.registerpopup').hide(); $('.signuppopup').show(); return false;" class="active">Sign In</a></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 -->

Answer 1

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...