Illustrate how to manipulate JavaScript variables for web pages

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript - Creating JavaScript variables for web pages 1</title>
</head>
 
<script language="JavaScript">
 
 // ************************************************************************
// DEFINE BEHAVIOR TO ACCESS ATTRIBUTES
// ************************************************************************
function getFullName()
{
  var firstName, lastName, fullName;
 
  firstName = document.form1.txtFirstName.value;
  lastName  = document.form1.txtLastName.value;
 
  fullName  = firstName + " " + lastName;
 
 // ************************************************************************
// DISPLAY ATTRIBUTE ONTO WEB PAGE
// ************************************************************************
  document.form1.txtFullName.value = fullName;
 
 
}
 
</script>
 
</head>
<body>
 
<h2 font face="Arial" color="#FF0000">
  Credit Application</h2>
 
<font face="Arial" size="3">
<form name="form1">
  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="100">First Name:</td>
 
      <!-- Add text box for first name -->
      <td><input type="text" name="txtFirstName" size="14"></td>
 
    </tr>
    <tr>
      <td width="100">Last Name:</td>
 
      <!-- Add text box for last name -->
      <td><input type="text" name="txtLastName" size="14"></td>
 
    </tr>
    <tr>
      <td width="100">Full Name:</td>
 
       <!-- Add text box to display full name -->
      <td><input type="text" name="txtFullName" size="30"></td>
 
    </tr>
    <tr>
      <td width="100"><br><br></td>
      <td>
 
        <!-- Add button to call JavaScript function -->
        <input type="button" value="Show Full Name" onClick="getFullName()">
 
      </td>
    </tr>
  </table>
</form>
</font>
 
</body>
</html>

Enjoyed this post? Share it!

 

Leave a comment

Your email address will not be published.