Good day all,
I have an html file as follows, which displays a Google Map (initialised at window.onload function) and has a form to enter the name of a place to search. When the submit button is clicked then user input is supposed to be sent to a php file which get the coordinates to display on the map. However, in testing, all the php file is returning right now is the same userinput.
The problem I am having, is that this sequence of event happens:
I enter some text, and click submit.
The p element innerHTML is changed and the alert appears (as in onreadystatechange function)
However, when i close the alert, the p element loses its data.
I added the alert, because when i just used
document.getElementById("msg").innerHTML=xmlhttp.responseText;
the p element took on its new data briefly before disappearing.
On thing i noticed was that while the alert was on the screen, the address bar displayed “filename.html”. but when i closed it, and the p data disappeared, the address bar shows
filename.html?searchterm=user+input+stuff
Even when I click submit with the text input empty, I get “No Text Entered” appearing briefly, before the page “refreshes” then this text disappears, and the addressbar shows
filename.html?searchterm=
I appreciate any help I can get.
<html>
<head>
<title>Map</title>
<link rel="stylesheet" type="text/css" href="stylue.css" />
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?
key=AIzaSyBksQ7NlV6eXk6w5w8222lolqdPHsN_8ls&sensor=false">
</script>
<script type="text/javascript">
var panorama;
var map;
function initialize() {
//create Google Map
}
//other Google Maps functions
function searchdb(userInput){
var xmlhttp;
if (userInput==""){
document.getElementById("msg").innerHTML="No Text Entered";
}else{
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("msg").innerHTML=xmlhttp.responseText;
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","searchpageajax.php?searchterm="+userInput,true);
xmlhttp.send();
}
}
window.onload= function () {
initialize();
}
</script>
</head>
<body >
<h1>Map</h1>
<p>Enter a room code or building name to search.</p>
<form name="inputform" >
<input type="text" name="searchterm" />
<input type="submit" value="Search" onclick="searchdb(searchterm.value)"/>
<input type="reset" value="Clear" />
<br/>
<p id ="msg"></p>
<br/>
</form>
<div id="container">
<div id="map_canvas"></div>
<div id="streetview_canvas"></div>
</div>
</body>
</html>
The page is refreshed because your onsubmit function does not return false.
See this post (there are probably others).