Live Username Picker Using JavaScript and HTML5 ~ Coding Savvy
FB Twitter Google
» »

Live Username Picker Using JavaScript and HTML5

Developer always want user registration to be easy and comprehensive, we can make it very interesting by letting the user know the pattern their username will take after completing the registration. They can see if the username look cool enough or they can change it to see what is going to come out of it. The main reason for creating this tutorial is for us to learn how to create a very interactive application with the combination of JavaScript and HTML5.We are going to create a username picker that will change their username right in front of their eyes. 
Live Username Picker Using JavaScript and HTML5

Download Script Live Demo
To let users pick their desired username we need to use a text input box then we can use the JavaScript to get the value of the input box and write it into a span element,We will  create a listener for  onkeyup event on the input field for us to know when the value of the text input changes.:
<script>
window.onload = function(){
 var input1 = document.getElementById("input"); 
//react to every keypress
 input1.onkeyup = function (){
 var value = input1.value;
 var display = document.getElementById("output"); 
display.innerHTML = value
var submitBtn = document.getElementById("sub"); 
var loader =document.getElementById("loader"); 
 //on click of the submit button 
submitBtn.onclick = function () { 
loader.removeAttribute("class"); 
respond()
 }
 //verify user data 
function respond()
loader.setAttribute("class", "hide");
 if (value.length >=4 && value !=""){
 alert("You have choose '"+value+"' as your Username"); 
} else{ 
alert("Username Field can not be empty, Minimum of 4 characters."); 
} } }
//end verification 
 } 
</script>

in Our HTML5 file we would create the text input,embed our script in the file and get ready for action.
<!doctype html> 
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Username Chooser Demo</title>
 <style> 
html{ text-align:center; font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif; } 
h2#title{ background-color:#FFF; border:solid 5px #CCCCCC; font-size:30px; margin-top:100px; } #container{ height: 400px; width:900px; margin-left:200px; } 
input[type="text"]{ border: #CCC solid 3px; border-radius:10px; background-color:snow; } 
button#sub{ background-color: #F99; border:#F60 4px solid; border-radius: 3px; } 
span#display{ color:#900; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size:18px; } 
#input1{ float : left; } 
#output{ color: #393; font-style:italic; font-size:20px; font-style:oblique; font-weight:bold; } 
.hide{ display:none; } 
 </style>
 </head>
 <body> 
<div id="container"> 
<h2 id="title">JavaScript Username Chooser Demo -Coding Savvy</h2>
 <div id="input1">
<label for="field1">Please Choose a Username</label>
<input placeholder="enter username..." type="text" id="input" name="field1" />
<button id="sub">Submit</button>
<img id="loader" class="hide" src="loader.gif" style="margin-left:10px; " />
</div> 
<span id="display">http://www.coingsavvy.com/user/<span id="output"></span>
</span></div> 
</body> 
</html>
Download Source Code
Was this article helpful?
Thanks! Your feedback helps us improve tutorials.

You May Also Like...

No comments:

Post a Comment