Replace Log In text to say Logged in with jquery

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

Please narrow to only the relevant code – Yotam Omer Aug 13 '13 at 00:53 — Yotam Omer, Aug 13 '13 at 00:53

ermagana · Answer 1 · 2013-08-13T01:43:29.313

0

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.

edited Aug 13 '13 at 01:43

answered Aug 13 '13 at 01:00

ermagana

1,090
6
11

There is a link on the corner of the page that says log in and when you click it, there is popup login page, which has the submit button. How do I get that link to say logged in after clicking submit? Currently only the submit button says logged in. Thank you though! – cass cain Aug 13 '13 at 01:10
just to be clear, you're trying to update the text on the button that shows up on the popup page? – ermagana Aug 13 '13 at 01:17
No, in the corner of the page there is a link that says login and and clicking login brings up a popup of the form, which has the actual login credentials. I'm trying to get that link in the corner to say logged in after clicking submit on the popup form. – cass cain Aug 13 '13 at 01:20
ok, if you're using anything other than IE you can right click on the button and then click on inspect to view the html for that button. post that on here and i'll rework my example with that info – ermagana Aug 13 '13 at 01:26
what I had up there is mostly it, aside from the other things. The part that says Login is what I need changed when I click on – cass cain Aug 13 '13 at 01:40
That will only update the text in the link. The link will still function to 're-login'. – Daniel Aug 13 '13 at 01:54
oh, that's a different question, so you're wanting to change the text and unbind the functionality. I'm sorry about that I assumed you had that part already figured out. How did you bind your function initially? If jQuery against that specific element you can call .unbind or .off on the jQuery object – ermagana Aug 13 '13 at 01:57
I updated the .js file that is linked to index. I'm sorry, I'm still new to this. – cass cain Aug 13 '13 at 02:07

Daniel · Accepted Answer · 2013-08-13T03:59:37.053

0

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

edited Aug 13 '13 at 03:59

answered Aug 13 '13 at 01:47

Daniel

579
2
7

this completely replaced #login to logged in, removed the link and the popup form can't be accessed at all. – cass cain Aug 13 '13 at 02:08
Sorry I updated the fiddle and didn't update the code here. You should attach this event to your forms submit button. I provided a simple button to simulate. – Daniel Aug 13 '13 at 02:10
I tried that earlier before I posted this and it didn't work. I think there is some other code overriding it. Thanks – cass cain Aug 13 '13 at 02:28
See if preventDefault will help. See Edit2 above. – Daniel Aug 13 '13 at 04:00

Replace Log In text to say Logged in with jquery

2 Answers2