HTML / Javascript TEST

HTML / Javascript TEST

by George Obregon

HTML

<!doctype html>
<html lang="en-US">
<head>
<meta name="description" content="CURRENT">
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Su Reservacion!</title>
  <meta name="author" content="George Obregon">
  <!-- BEGIN MOBILE RESPONSIVENESS -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- END MOBILE RESPONSIVENESS -->
<!-- BEGIN FAVICON -->
	<link rel="icon" type="image/x-icon" href="http://mtomtours.com/favicon.ico" />
	<link rel="icon" type="image/png" href="https://www.mtomtours.com/images/icons/faviconM.png" />
	<link rel="icon" type="image/gif" href="http://mtomtours.com/favicon.gif" />
<!-- END FAVICON -->
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
   <div class="wrap">
  <div id="w" class="searchbox">
    <h1>Su Reservacion!</h1>
    <p>Ingrese el codigo de su reservacion y apellido del viajero</p>
	YLAS62 LACAYO 4 seg 1 pass<br>
	YO9ZYB MARTINEZ 2 seg 1 pass<br>
	5A7CY3 CASTILLO 4 seg 2 pass<br>
    YTVG5U VALADEZ 4 seg 2 pass<br>
    <center>
    <input type="text" name="ghreclocator" id="ghreclocator" class="searchfield" placeholder=" YO9ZYB # de Reserva">
	<input type="text" name="ghlastname" id="ghlastname" class="searchfield" placeholder="martinez">
	</input type="text" name="ghdob" id="ghdob" placeholder="Fecha de Nacimiento">
  
  <input type="text" name="firstname" onkeyup="formChanged()" onchange="formChanged()"/>
	</center>
    
    <a href="#" id="ghsubmitbtn">SEARCH RESERVATIONS</a>
    
    <div id="ghapidata" class="clearfix"></div>
  </div>
<script type="text/javascript" src="js/jsontest.js"></script>
</body>
</html>

CSS

body {
	background-color: #f7f7f7;
	text-align: center;
}

@page {
  size: 5.5in 8.5in;
}


@font-face {
	font-family: 'GENUINEItalic';
	src: url('fonts/GENUIBI_.eot');
	src: local('☺'), url('fonts/GENUIBI_.woff') format('woff'), url('fonts/GENUIBI_.ttf') format('truetype'), url('fonts/GENUIBI_.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Gotham-Bold';
	src: url('Gotham-Bold.eot');
	src: local('GothamBold'), local('Gotham-Bold'),
		url('fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
		url('fonts/Gotham-Bold.woff2') format('woff2'),
		url('fonts/Gotham-Bold.woff') format('woff'),
		url('fonts/Gotham-Bold.ttf') format('truetype'),
		url('fonts/Gotham-Bold.svg#Gotham-Bold') format('svg');
	font-weight: 900;
	font-style: normal;
}


@font-face {
	font-family: 'FranklinGothicHvy';
	src: url('ITCFranklinGothicStd-Hvy.eot');
	src: local('ITC Franklin Gothic Std Heavy'), local('ITCFranklinGothicStd-Hvy'),
		url('fonts/ITCFranklinGothicStd-Hvy.eot?#iefix') format('embedded-opentype'),
		url('fonts/ITCFranklinGothicStd-Hvy.woff2') format('woff2'),
		url('fonts/ITCFranklinGothicStd-Hvy.woff') format('woff'),
		url('fonts/ITCFranklinGothicStd-Hvy.ttf') format('truetype'),
		url('fonts/ITCFranklinGothicStd-Hvy.svg#ITCFranklinGothicStd-Hvy') format('svg');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: 'GENUINE';
	src: url('GENUINE.eot');
	src: local('GENUINE'),
		url('fonts/GENUINE.eot?#iefix') format('embedded-opentype'),
		url('fonts/GENUINE.woff2') format('woff2'),
		url('fonts/GENUINE.woff') format('woff'),
		url('fonts/GENUINE.ttf') format('truetype'),
		url('fonts/GENUINE.svg#GENUINE') format('svg');
	font-weight: normal;
	font-style: normal;
}

.f1 {
	text-align: center;
	font-weight: bold;
	color: #2181b7;
	padding: 2px;
	font-size: medium;
	font-family: Gotham-Bold;	
	display: inline-block;
}
.f2 {
	font-family: Gotham-Bold;
	font-size: large;
	font-style: normal;
	font-weight:...

JavaScript

function formChanged() {
    var firstName = document.getElementsByName("firstname")[0].value;
    var lastName;
    console.log(firstName);
}