JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="lefty" class="lefty">
<!--ajax response goes here-->
</div>
<div class="righty">
<input id="part_to_search" name="partnum" type="text" autofocus="autofocus" onchange="ajax_post()"/>
</div>
</body>
CSS
<style>
body{background-color: #777777;}
#lefty{
height: 100%;
}
.lefty {
background-color: #777777;
float: left;
width: 85%;
height: 100%
}
.righty {
background-color: #777777;
margin-left: 85%;
height: 100%;
border-left: 5px solid black;
min-height: 950px;
}
#viz{
width:100%;
height:100%;
}
</style>
JavaScript
function ajax_post(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "printpuller.php";
var fn = document.getElementById("part_to_search").value;
var vars = "partnum="+fn;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("lefty").innerHTML = return_data;
document.getElementById("part_to_search").focus();
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("lefty").innerHTML = "";
}
function focusMe()
{
var focusbox;
focusbox = document.getElementById("part_to_search");
{
setTimeout(function() {
focusbox.focus();
}, 1);
}
}
setInterval(function(){
var focusbox;
focusbox = document.getElementById("part_to_search");
focusbox.focus();
});