Quick and dirty javascript login. Please!

[Kinaski]

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:

<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

[huoyangao]

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>

[Kinaski]

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!

[huoyangao]

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>

[Kinaski]

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!

[felgall]

You should also replace action="javascript:login()" with onsubmit="login()"

[Kinaski]

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

[Kinaski]

Nope, "onsubmit.." doesn't work..

[huoyangao]

you button is not a submit button, you need to change that too.