Wordpress modal login works but default login submit not working any more

Question

Im creating a modal wordpress login using the leanmodal js, I figuret it out the form is working fine but I have a problem with the default login.

This is my login form and php function:

<?php
function modal_login_jquery_wp() {
?>
<div id="login">
<div id="login-ct">
<div id="login-header">
<h2 class="login">Login to your account</h2>
<p class="new-account"><?php _e('Do not have an account yet?', 'themename'); ?> <a href="<?php echo bp_signup_page(); ?>"><?php _e('Create one for free', 'themename'); ?></a>.</p>
<a class="modal_close" href="#"></a>
</div>
<form action="login" method="post">
<p class="status"></p>
<div class="txt-fld">
<label class="name" for=""><?php _e('Username', 'themename'); ?></label>
<input id="username" class="good_input" name="username" type="text" />
</div>
<div class="txt-fld">
<label class="pass" for=""><?php _e('Password', 'themename'); ?></label>
<input id="password" name="password" type="password" />
</div>
<div class="btn-fld">
<button id="wp-submit" type="submit"><?php _e('Sign In &raquo;', 'themename'); ?></button>
</div>
<label class="rememberme"><input type="checkbox" value="yes" name="remember" checked="checked"><?php _e('Remember me.', 'themename'); ?></label>
<label class="forgot"><a class="lost" href="<?php echo wp_lostpassword_url(); ?>"><?php _e('Lost your password?', 'themename'); ?></label>
<?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
</form>
</div>
</div>
<?php
}
add_action('wp_footer', 'modal_login_jquery_wp');

function ajax_login_init(){

    wp_register_script('ajax-login-script', get_template_directory_uri() . '/scripts/js/ajax-login.js', array('jquery') );
    wp_enqueue_script('ajax-login-script');

    wp_localize_script( 'ajax-login-script', 'ajax_login_object', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'redirecturl' => home_url(),
        'loadingmessage' => __('Sending user info, please wait...', 'themename')
    ));

    // Enable the user with no privileges to run ajax_login() in AJAX
    add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}

// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
    add_action('init', 'ajax_login_init');
}
function ajax_login(){

    // First check the nonce, if it fails the function will break
    check_ajax_referer( 'ajax-login-nonce', 'security' );

    // Nonce is checked, get the POST data and sign user on
    $info = array();
    $info['user_login'] = $_POST['username'];
    $info['user_password'] = $_POST['password'];
    $info['remember'] = true;

    $user_signon = wp_signon( $info, false );
    if ( is_wp_error($user_signon) ){
        echo json_encode(array('loggedin'=>false, 'message'=>__('Wrong username or password.', 'themename')));
    } else {
        echo json_encode(array('loggedin'=>true, 'message'=>__('Login successful, redirecting...', 'themename')));
    }

    die();
}

all work fine.when I click/open modal I enter username and password and everything is ok, I get the status messagge

so my jquery code is below:

jQuery(document).ready(function($) {
    $('#login').on('submit', function(e){
        $('#login p.status').show().text(ajax_login_object.loadingmessage);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_login_object.ajaxurl,
            data: {
                'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
                'username': $('#login #username').val(),
                'password': $('#login #password').val(),
                'security': $('#login #security').val() },
            success: function(data){
                $('#login p.status').text(data.message);
                if (data.loggedin == true){
                    document.location.href = ajax_login_object.redirecturl;
                }
            }
        });
        e.preventDefault();
    });

});

as I said above everything is working but the problem now is in wp-admin login form.When I want to enter in wp-admin or wp-login.php using the default login nothing happens by clicking on default submit button

and finaly I changed the modal login div name in css and form as #modal-login because it has the same name with the default wordpress login form but now the ajax modal login not working. the status messagge remaining as sending user info and nothing happens.

do you have any idea about this? Thanks

Answer 1

there is no name for submit button

 <button name="give some name" id="wp-submit" type="submit"><?php _e('Sign In &raquo;', 'themename'); ?></button>