Replace Log In text to say Logged in with jquery

StackOverflow https://stackoverflow.com/questions/18198991

Question

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

Was it helpful?

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>');
});

OTHER TIPS

If you're using jQuery you can call the following once you've successfully logged in.

$('a#login.open').text('Logged In');

This is if you're trying to be super specific about the element you're searching for. If you are using chrome or anything other than IE you can try this out in the console debugger window to see that it works.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top