I am trying to create a form that takes persons name and searches database for info on that person. It does the search via ajax. I'm having trouble getting the form variable name into my JavaScript function for data retrieval:
<script>
function showUser(str) {
alert(str);
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form id="teacher_search" action="?teacher_search" method="post" onsubmit="showUser(teacher_name)">
<font size=4>*Teacher Name:</font><input type="text" name="teacher_name" maxlength="12" size="12" required><br /><br />
<input type="submit" value="Find"/>
</form>
The post I saw online had a select element instead and used this:
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
which works fine. However with my adaptation I see the $_POST variable in firebug but str is undefined. How can I pass the teacher_name form variable to my showUser() function. The other answers on this site do not specifically deal with the passing of form input variable as a parameter to JavaScript function. Thanks.
