'Change email' form on custom page

Question

I would basically like to display the form/field that is used for changing the user's email address on a custom page with my own layout and things.

Ideally, I would like to make it so that if Javascript is enabled, the email address would appear as text with a 'Change' link next to it. The link would make a text box appear in place of text so that the user can change the address. Obviously, all this would happen without refreshing the page, and if Javascript is not enabled the email address should appear in the text box immediately like normal. If anybody can provide me with at least some, or all of the code that I need, that'd be so awesome.

Thanks in advance

Answer 1

If you've enabled the PHP Input Filter, you could add the following into your node/page. The javascipt won't execute if disabled, leaving only the input field :)

<?php
    drupal_add_js('misc/jquery.js', 'core', 'header');
?>

<script type="text/javascript">
(function($){
    $(document).ready(function(){
        var email = $('input#edit-email');
        if (!email.hasClass('error')) {
            var change = email.val() +' <a href="#">Change</a> ';
            $('input#edit-email').hide().after('<div id="edit-email-container">' + change +'</div>');

            $('div#edit-email-container a').bind('click', function(e, t){
                $(this).parent().hide().parent().find('input').show();
                e.preventDefault();
                return false;
            });
        }
    });
})(jQuery);
</script>

<?php
function userEmail_form() {
    global $user;

    $form['email'] = array(
        '#type' => 'textfield',
        '#default_value' => $user->mail
    );

    $form['submit'] = array(
        '#type' => 'submit',
        '#value' => 'Submit'
    );

    return $form;
}

function userEmail_form_validate(&$form, $form_state) {
    if (!valid_email_address($form_state['values']['email'])) form_set_error('email', 'Invalid Email Address');
}

function userEmail_form_submit(&$form, $form_state) {
    global $user;
    db_query('UPDATE {users} SET `mail` = "%s" WHERE `uid` = %d', $form_state['values']['email'], $user->uid);
    drupal_set_message('Email updated');
}

echo drupal_get_form('userEmail_form');
?>