Untitled

PHP:

<!DOCTYPE HTML>
<html>
<head>
<?php
	echo "<title>", "Just a test", "</title>";
?>
	<meta charset="utf-8" />
	<script src="jquery/jquery.js"></script>
	<script src="jquery/jquery-ui/jquery-ui.min.js"></script>
	<script src="data/scripts/test_master.js"></script>
	<link rel="stylesheet" type="text/css" href="jquery/jquery-ui/jquery-ui.min.css" />
<style>
body{
	font-family: sans-serif;
	width: 1020px;
	margin: 25px auto;
}
#logStat{
	margin: auto;
	text-align: center;
	padding: 10px;
	width: 60%;
	border-radius: 5px;
	background-color: #B3B3B3;
}
</style>
</head>
<body onload="loaded()">
	<form action="data/scripts/submit_form.php" method="post">
		<input required type="text" placeholder="Name" name="nameIn" /><br />
		<input required type="text" placeholder="ID" name="idIn" /><br />
		<input required type="text" maxlength="10" placeholder="Phone number" name="phoneIn" /><br />
		<input type="submit" value="Run PHP" id="submitBtn"/>
	</form>
	<button type="button" onclick="verifyServer()">Pre-check data</button>
	<div id="logStat">
		<div id="progBar"></div>
		<p id="writeThis"></p>
	</div>
</body>
</html>


JS:

function loaded(){
	$(document).ready(function(){
		$("#submitBtn").hide();
		$("#logStat").hide();
	});
}

function verifyServer(){
	$("#logStat").fadeIn(200);
	$("#progBar").progressbar();

	$("#progBar").progressbar("value", 0);
	document.getElementById("writeThis").innerHTML = "Verifying name...";
	if(document.getElementById("nameIn").value == null){
		document.getElementById("writeThis").innerHTML = "ERROR: Name is NULL.";
		setTimeout(function(){ $("#logStat").fadeOut(200); }, 2000);
		return;
	}

	$("#progBar").progressbar("value", 25);
	document.getElementById("writeThis").innerHTML = "Verifying ID...";
	if(document.getElementById("idIn") == null || isNaN(checkData)){
		document.getElementById("writeThis").innerHTML = "ERROR: ID is NULL.";
		setTimeout(function(){ $("#logStat").fadeOut(200); }, 2000);
		return;
	}

	$("#progBar").progressbar("value", 50);
	document.getElementById("writeThis").innerHTML = "Verifying phone number...";
	if(document.getElementById("phoneIn") == null || isNaN(checkData)){
		document.getElementById("writeThis").innerHTML = "ERROR: Phone number is NULL.";
		setTimeout(function(){ $("#logStat").fadeOut(200); }, 2000);
		return;
	}

	$("#progBar").progressbar("value", 75);
	document.getElementById("writeThis").innerHTML = "Locking data...";
	document.getElementById("nameIn").setAttribute("disabled", true);
	document.getElementById("idIn").setAttribute("disabled", true);
	document.getElementById("phoneIn").setAttribute("disabled", true);

	$("#progBar").progressbar("value", 100);
	document.getElementById("writeThis").innerHTML = "Done!";
	setTimeout(function(){ $("#logStat").fadeOut(200); }, 500);
}