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.
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>
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>
<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>
Thanks!
Your feedback helps us improve tutorials.
No comments:
Post a Comment