javascript - Replace Log In text to say Logged in with jquery -
i new , need making link "login" replaced logged in after clicking submit javascript/jquery.
here have on index page. have pop login page , need stop function after clicking word submit , replace login logged in. simple demo site , 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 have linked javascript page 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 set otherwise popbox 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 wrong. thank guys!
this pretty simple solution. replaces login link span contains text 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: posted 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>'); }); 
Comments
Post a Comment