I am using JavaScript to show and hide different sections of my page:
function showCustomer(str) {
// remove white space from the name entered on the search screen
str = str.replace(" ", "%20");
var xmlhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "No records found";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "get_customer.asp?q=" + str, true);
xmlhttp.send();
}
function enable_submit() {
document.getElementById("id_simplesearch_submit").style.visibility = "visible";
document.getElementById("autocomplete-search").reset();
document.getElementById("txtHint").style.display = "none";
document.getElementById("results").style.visibility = "visible";
}
function disable_submit() {
document.getElementById("id_simplesearch_submit").style.visibility = "hidden";
document.getElementById("id_simplesearch").reset();
document.getElementById("txtHint").style.visibility = "visible";
document.getElementById("results").style.display = "none";
}
I have an input field with
onkeyup="showCustomer(this.value)"
and element with
onfocus="disable_submit()"
and a form defined as
<div class="commandspace">
<form id="id_simplesearch" name="simplesearch" method="post" action="index.asp">
<div class="simplesearch"><label for="forename">Forename</label><input type="text" id="id_forename" name="forename" onfocus="enable_submit()" /></div>
<div class="simplesearch"><label for="surname">Surname</label><input type="text" id="id_surname" name="surname" onfocus="enable_submit()" /></div>
<div class="simplesearch"><label for="unit">Unit/Team</label><input type="text" id="id_unit" name="unit" onfocus="enable_submit()" /></div>
<div id="simplesearchsubmit">
<div class="simplesearch">
<input class="simplesearchsubmit" type="submit" id="id_simplesearch_submit" name="search" value="Search" />
When the page is first loaded and I start typing in the showCustomer search box, the txtHint element displays and fetches data. However, if I click into one of the three simplesearch boxes and then back into the showCustomer search box, the txtHint does not display at all.