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>


No comments:

Post a Comment