JavaScript User Input
JavaScript User Input : Clicks are powerful and easy and you can add an on Click event to pretty much any HTML element, but sometimes you need to be able to ask for input from the user and process it. For that you’ll need a basic form element and a button.
input id='userInput' size=60> <button onClick='userSubmit()'>Submit</button><BR> <P><div id='result'></div>
Here we create an input field and give it a name of user Input. Then we create a HTML button with an onClick event that will call the function userSubmit(). These are all standard HTML form elements but they’re not bound by a <form> tag since we’re not going to be submitting this information to a server. Instead, when the user clicks the submit button, the onClick event will call the userSubmit() function.
<script type='text/javascript'>
function userSubmit() {
var UI=document.getElementById('userInput').value;
document.getElementById('result').innerHTML='You typed: '+UI;
}
</script>Here we create a variable called UI which looks up the input field userInput. This lookup is exactly the same as when we looked up our feedback division in the previous example. Since the input field has data, we ask for its value and place that value in our UI variable. The next line looks up the result division and puts our output there. In this case the output will be “You Typed: ” followed by whatever the user had typed into the input field.
If you’d like to process the user input as the user types then simply attach an onKeyup event to the input field as such example,
input id='userInput' onKeyUp="userSubmit()" size=60><BR> <P><div id='result'></div>
There’s no need to modify the userSubmit() function. Now whenever a user presses a key while the userInput box has the focus, for each keypress, userSubmit() will be called, the value of the input box retrieved, and the result division updated.
JavaScript User Input Example
JavaScript Input, is a little more complicated. For now we’ll just reduce it to a bare click of the mouse. If everything in HTML is a box and every box can be given a name, then every box can be given an event as well and one of those events we can look for is “onClick”. Lets revisit our last example
<html>
<head>
</head>
<body>
<div id='feedback' onClick='goodbye()'>Users without Javascript see
this.</div>
<script type='text/javascript'>
document.getElementById('feedback').innerHTML='Hello Technosap!';
function goodbye() {
document.getElementById('feedback').innerHTML='Goodbye Technosap!';
}
</script>
</body>
</html>Here we did two things to the example, first we added an “onClick” event to our feedback division which tells it to execute a function called goodbye() when the user clicks on the division. A function is nothing more than a named block of code. In this example goodbye does the exact same thing as our first hello world example, it’s just named and inserts ‘Goodbye World!’ instead of ‘Hello World!’.
Another new concept in this example is that we provided some text for people without Javascript to see. As the page loads it will place “Users without Javascript will see this.” in the division. If the browser has Javascript, and it’s enabled then that text will be immediately overwritten by the first line in the script which looks up the division and inserts “Hello World!”, overwriting our initial message. This happens so fast that the process is invisible to the user, they see only the result, not the process. The goodbye() function is not executed until it’s explicitly called and that only happens when the user clicks on the division.
Also Read :JavaScript Output Writeln, alert and getElementById