SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Enthusiast Kinaski's Avatar
    Join Date
    Dec 2007
    Location
    Macedonia
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quick and dirty javascript login. Please!

    Hy friends!

    I will be grateful if someone out there knows how I can code a simple javascript login functionality, with redirect to page depending on the user! I will have 2 users:

    Buyer - username: Buyer; password: buyer;
    Seller - username Seller; password: seller;

    After login the buyer should be redirected to buyer.html, and seller to seller.html

    I got this form:

    Code:
    <form id="loginform" action="">
                      <fieldset>
                        <div>
                          <label for="usrname">Username:</label>
                          <input name="usrname" type="text" size="20" />
                        </div>
                        <div class="pass_field">
                          <label for="pswrd">Password:</label>
                          <input name="pswrd" type="text" size="20" />
                          <input name="login" class="login_btn" type="image" src="images/home_login_btn.png" />
                        </div>
                      </fieldset>
                    </form>
    This is for the sole purpose of a simple demo presentation for the client, and one should not be concerned with the different negative implications of using such method. I need it very quick and dirty!

    Thank you and thank you!

    Jimmy

  2. #2
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here you go:
    I cannot post links so you need to fix the google and yahoo links to test it.

    <script type="text/javascript">

    function login() {
    var usrname = document.getElementById('usrname');
    var pswrd = document.getElementById('pswrd');
    if(usrname.value == 'buyer' && pswrd.value == 'buyer') {
    window.location.href = 'google.com';
    }
    if(usrname.value == 'seller' && pswrd.value == 'seller') {
    window.location.href = 'yahoo.com';
    }

    }
    </script>
    <form id="loginform" action="javascript:login()">
    <fieldset> <div> <label for="usrname">Username/label> <input name="usrname" type="text" size="20" /> </div>
    <div class="pass_field"> <label for="pswrd">Password/label> <input name="pswrd" type="text" size="20" />
    <input name="login" class="login_btn" type="image" src="images/home_login_btn.png" /> </div> </fieldset> </form>

  3. #3
    SitePoint Enthusiast Kinaski's Avatar
    Join Date
    Dec 2007
    Location
    Macedonia
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by huoyangao View Post
    here you go:
    I cannot post links so you need to fix the google and yahoo links to test it.

    <script type="text/javascript">

    function login() {
    var usrname = document.getElementById('usrname');
    var pswrd = document.getElementById('pswrd');
    if(usrname.value == 'buyer' && pswrd.value == 'buyer') {
    window.location.href = 'google.com';
    }
    if(usrname.value == 'seller' && pswrd.value == 'seller') {
    window.location.href = 'yahoo.com';
    }

    }
    </script>
    <form id="loginform" action="javascript:login()">
    <fieldset> <div> <label for="usrname">Username/label> <input name="usrname" type="text" size="20" /> </div>
    <div class="pass_field"> <label for="pswrd">Password/label> <input name="pswrd" type="text" size="20" />
    <input name="login" class="login_btn" type="image" src="images/home_login_btn.png" /> </div> </fieldset> </form>
    Thanks for your help! I really appreciate you taking time to answer my question!

    But, why the heck it's not working on my side? Did you test it already?

    The submit button doesn't even execute the form.. It's like the form doesn't have an action attached to it, but sure I placed action="javascript:login()"..

    Any ideas what could be wrong ?

    Thank you!

  4. #4
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked on IE, firefox does NOT support name, so I changed name to id:

    <script type="text/javascript">
    window.onload = function() {
    alert('java script enabled');
    }
    function login() {
    var usrname = document.getElementById('usrname');
    var pswrd = document.getElementById('pswrd');
    if(usrname.value == 'Buyer' && pswrd.value == 'buyer') {
    window.location.href = 'google.com';
    }
    if(usrname.value == 'Seller' && pswrd.value == 'seller') {
    window.location.href = 'yahoo.com/';
    }

    }
    </script>
    <form id="loginform" action="javascript:login()">
    <fieldset> <div> <label for="usrname">Username/label> <input id="usrname" type="text" size="20" /> </div>
    <div class="pass_field"> <label for="pswrd">Password/label> <input id="pswrd" type="text" size="20" />
    <input name="login" class="login_btn" type="image" src="images/home_login_btn.png" /> </div> </fieldset> </form>

  5. #5
    SitePoint Enthusiast Kinaski's Avatar
    Join Date
    Dec 2007
    Location
    Macedonia
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by huoyangao View Post
    It worked on IE, firefox does NOT support name, so I changed name to id:

    <script type="text/javascript">
    window.onload = function() {
    alert('java script enabled');
    }
    function login() {
    var usrname = document.getElementById('usrname');
    var pswrd = document.getElementById('pswrd');
    if(usrname.value == 'Buyer' && pswrd.value == 'buyer') {
    window.location.href = 'google.com';
    }
    if(usrname.value == 'Seller' && pswrd.value == 'seller') {
    window.location.href = 'yahoo.com/';
    }

    }
    </script>
    <form id="loginform" action="javascript:login()">
    <fieldset> <div> <label for="usrname">Username/label> <input id="usrname" type="text" size="20" /> </div>
    <div class="pass_field"> <label for="pswrd">Password/label> <input id="pswrd" type="text" size="20" />
    <input name="login" class="login_btn" type="image" src="images/home_login_btn.png" /> </div> </fieldset> </form>
    Sorry didn't noticed the id's on the input tags.

    Ever coming to Macedonia? Man I owe you a few pints of beer . Cheers!

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You should also replace action="javascript:login()" with onsubmit="login()"
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Enthusiast Kinaski's Avatar
    Join Date
    Dec 2007
    Location
    Macedonia
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    You should also replace action="javascript:login()" with onsubmit="login()"
    Hi, thanks for the answer too! Can you please explain why I should do that? Is this "action=javascript" somehow deprecated?

    Thanks

  8. #8
    SitePoint Enthusiast Kinaski's Avatar
    Join Date
    Dec 2007
    Location
    Macedonia
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, "onsubmit.." doesn't work..

  9. #9
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you button is not a submit button, you need to change that too.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •