Replace Log In text to say Logged in with jquery

I am fairly new to this and I need help making the link "login" to be replaced with logged in after clicking submit with javascript/jquery.

Here is what I have on my index page. Currently I have a pop up login page and I need to stop the function after clicking the word submit and then replace login with logged in. This is a simple demo site and only needs simple code. Thank you!

  <Head>
  <script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
  $('.popbox').popbox();
});

<div id= "toggle" class='popbox'>
<a div id=login class='open' href='#'>Login</a>


<div class='collapse'>
  <div class='box'>
    <div class='arrow'></div>
    <div class='arrow-border'></div>
    <form name="myform" action="#" method="post" id="subForm">
     <div id="fb-root"></div>
  <script src="http://connect.facebook.net/en_US/all.js"></script>
  <script>
     FB.init({ 
        appId:'193731474136796', cookie:true, 
        status:true, xfbml:true 
     });
  </script>
  <a href="#" onclick="fblogin();return false;"><img src="facebookbutton.png"></a>
    <script>
      //your fb login function
      function fblogin() {
        FB.login(function(response) {
          //...
        }, {scope:'read_stream,publish_stream,offline_access'});
      }
    </script>

  <div class="line-separator"></div>

      <div class="input">
        <input type="username" name="cm-name" id="name" placeholder="Username" />
      </div>
      <div class="input">
        <input type="password" name="cm-password" id="password" placeholder="Password" />
      </div>
      <input type="submit" value="login" id="submit" /> <a href="#" class="close">Forgot Username or Password?</a>

    </form>

And I have a linked javascript page for the popup.

 (function(){

  $.fn.popbox = function(options){
var settings = $.extend({
  selector      : this.selector,
  open          : '.open',
  box           : '.box',
  arrow         : '.arrow',
  arrow_border  : '.arrow-border',
  close         : '.close'
}, options);

var methods = {
  open: function(event){
    event.preventDefault();

    var pop = $(this);
    var box = $(this).parent().find(settings['box']);

    box.find(settings['arrow']).css({'left': box.width()/2 - 10});
    box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});

    if(box.css('display') == 'block'){
      methods.close();
    } else {
      box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
    }
  },

  close: function(){
    $(settings['box']).fadeOut("fast");
  }
};

$(document).bind('keyup', function(event){
  if(event.keyCode == 27){
    methods.close();
  }
});

$(document).bind('click', function(event){
  if(!$(event.target).closest(settings['selector']).length){
    methods.close();
  }
});

return this.each(function(){
  $(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
  $(settings['open'], this).bind('click', methods.open);
  $(settings['open'], this).parent().find(settings['close']).bind('click', function(event){
    event.preventDefault();
    methods.close();
  });
});
  }

 }).call(this);

EDIT:

I figured out what was wrong. Thank you guys!

jsfiddle

Solution

This is a pretty simple solution. It replaces the login link with a span that contains the text you wanted. http://jsfiddle.net/gVVcM/

jQuery:

$('button').on('click',function(){
    $('#login').replaceWith('<span>Logged In</span>');
});

HTML:

<a id='login' href='#'>Log In</a>
<button>Submit</button>

edit: now that you posted the submit id.

$('#submit').on('click',function(){
    $('#login').replaceWith('<span>Logged In</span>');
});

edit2: Prevent Default?.

$('#submit').on('click',function(e){
    e.preventDefault();
    $('#login').replaceWith('<span>Logged In</span>');
});