JS Login Form

Please Register to submit score.

Average Score	5.0
Scores Submitted	1
Date Added	Apr 26, 2008
Last Updated	Apr 26, 2008
Tags	form javascript js login

Introduction

This is my first javascript snippet on here, there are no "errors" as such, but i'm fairly sure i've done it in the longest way possible !

Grab the Code

// The JavaScript
<script type="text/Javascript">
function focususername() {
  if (document.login.username.value == "Enter Your Username ..") {
    document.login.username.value = "";
  }
}
function blurusername() {
  if (document.login.username.value == "") {
    document.login.username.value = "Enter Your Username ..";
    document.login.sub.value = "Login";
    document.login.sub.disabled = true;
  }
  else {
    var username = document.login.username.value;
    if (username.length >= 10) {
      document.login.sub.value = "Login as " + username.substring(0,10) + " ..";
    }
    else {
      document.login.sub.value = "Login as " + username + "";
    }
  }
}
function focuspassword() {
  if (document.login.password.value == "Password") {
    document.login.password.value = "";
    if (document.login.username.value != "Enter Your Username ..") {
      document.login.sub.disabled = false;
    }
  }
}
function blurpassword() {
  if (document.login.password.value == "") {
    document.login.password.value = "Password";
    document.login.sub.disabled = true;
  }
}
</script>

// The HTML 
// Edit webpage.ending to redirect to your login configs
<form action="webpage.ending" method="post" name="login">
<input type="text" value="Enter Your Username .." onfocus="focususername();" onblur="blurusername();" size="30" name="username" maxlength="100">
<br>
<input type="password" value="Password" onfocus="focuspassword();" onblur="blurpassword();" size="30" name="password"  maxlength="100">
<br><br>
<input type="submit" value="Login" name="sub" disabled="true">
</form>

Comments

(5) RSS

Go to Bottom

jonesy44

Comments: 647

Javascript Snippet: JS Login Form
Posted on Apr 27, 2008 3:33 pm

does noone do JS? :P

Hawkee

Comments: 402

Javascript Snippet: JS Login Form
Posted on Apr 28, 2008 1:45 am

Cool, a similar concept is also useful for prompting for a search query or comment.

jonesy44

Comments: 647

Javascript Snippet: JS Login Form
Posted on Apr 28, 2008 12:25 pm

Yah, when i was coding my site, i noticed the Google search bar in firefox, it looks a lot more pro i thought :P

markusPHP

Comments: 9

Javascript Snippet: JS Login Form
Posted on Jun 16, 2008 11:56 am

Abit lengthy for such a pointless task. :)

jonesy44

Comments: 647

Javascript Snippet: JS Login Form
Posted on Jun 16, 2008 12:21 pm

It was one of my first ever JS scripts.. i was pretty proud of it, so i thought i'd share it :p

pointless tasks?
I think having functions like this can really make a website nice. using modern techniques rather than a skanky looking webpage.

Take Hawkee for instance .. it's new ajax system is very impressive, and adds a great touch to it.

JS Login Form

Introduction

Grab the Code

Comments

jonesy44

My Snippet Tags

Contact

Friends (17)

Sponsors

		Student UK
Last seen: Jul 12, 2008 Profile \| Website Friends (17) Snippets (32) Images (24) Reviews (1) Comments Received (394) Comments Submitted (647) Forum Posts (36)