Showing posts with label Getting user input in Javascript. Show all posts
Showing posts with label Getting user input in Javascript. Show all posts

Thursday, March 31, 2016

Getting User Input From JavaScript

A simple program that I wrote using JavaScript that shows how get input values from the user using text box in HTML and submit those values using buttons in HTML into JavaScript. I intended my work for beginners in JavaScript programming this code is most common problem encounters by beginners in JavaScript. I hope this simple code will help them getting started.

If you have some questions please send me an email at jakerpomperada@gmail.com and jakerpomperada@yahoo.com.

Add me at Facebook my address is jakerpomperada@gmail.com and jakerpomperada@yahoo.com

My mobile number here in the Philippines is 09173084360.



Sample Program Output


Program Listing

<html>

<style>
body {
font-family:arial;
  font-size:20px;
  font-weight:bold;
  color:blue;
}
p {
  font-family:arial;
  font-size:20px;
  font-weight:bold;
  color: green;
  }
</style>  
<body>
Enter your name
<input type="text" id="name" size="20" maxlength="20" required>
<br><br>
<button onclick="Greet(this);"> Ok </button> &nbsp;&nbsp;&nbsp;&nbsp;
<button onclick="Clear(this);"> Clear </button>
<br>
<p id="display"> </p>

<script>
function Greet(field)
{
var hello;
var field = document.getElementById('name');

if (field.value == '') {
 alert("Field is empty");
 document.getElementById('name').value="";
 document.getElementById('name').focus();
 }
 else {
 hello = "Hello " + field.value;
 document.getElementById("display").innerHTML = hello;
  }
}

function Clear(field)
{
var hello;
var field = document.getElementById('name');

if (field.value == '') {
 alert("Field is empty");
 document.getElementById('name').value="";
 document.getElementById('name').focus();
  }
 else { 
 document.getElementById('name').value =" ";
 document.getElementById("display").innerHTML = "";
 document.getElementById('name').focus();
 }
}
</script>
</body>
<html>