shijingeorge
Programmer
In the below JSP when I enter values for the text box and radio button and click Submit, the results are displayed on the page only momentarily and then it disappears. I am not sure what is the issue with code and I have spent hours on the issue. Please help.
<html>
<head>
<title>Java Solution AJAX</title>
<script type="text/javascript">
var request;
function getTemp() {
var value = document.getElementById("value").value;
for ( var i = 0; i < document.temp.Degree.length; i++) {
if (document.temp.Degree.checked) {
var Degree = document.temp.Degree.value;
break;
}
}
//var Degree = document.getElementById("Degree").value;
var url = " + value
+ "&Degree=" + Degree;
if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
request.onreadystatechange = showResult;
request.open("GET", url, true);
request.send();
}
function showResult() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseXML;
var temparatures = response.getElementsByTagName("Temperature");
var temparature = temparatures[0];
document.getElementById("inputTempS").innerHTML += temparature
.getElementsByTagName("inputTemp")[0].text;
document.getElementById("outputTempS").innerHTML += temparature
.getElementsByTagName("outputTemp")[0].text;
document.getElementById("conversionS").innerHTML += temparature
.getElementsByTagName("conversion")[0].text;
}
}
}
</script>
</head>
<body>
<form name="temp" action="">
<table>
<tr>
<td>
Degrees:
</td>
<td>
<input id="value" type="text" name="value" value=""
maxlength="100" />
</td>
</tr>
<tr>
<td>
Conversion:
</td>
<td>
<input id="Degree" type="radio" name="Degree" value="CelsiustoFah" />
Celsius to Fah
<input id="Degree" type="radio" name="Degree" value="FahtoCelsius" />
Fah to Celsius
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="Submit" onclick="getTemp();" />
</td>
</tr>
</table>
</form>
<div id="new">
<p>
The Input Temperature :
<span id="inputTempS"></span>
</p>
<p>
The Output Temperature :
<span id="outputTempS"></span>
</p>
<p>
The Conversion :
<span id="conversionS"></span>
</p>
</div>
</body>
</html>
<html>
<head>
<title>Java Solution AJAX</title>
<script type="text/javascript">
var request;
function getTemp() {
var value = document.getElementById("value").value;
for ( var i = 0; i < document.temp.Degree.length; i++) {
if (document.temp.Degree.checked) {
var Degree = document.temp.Degree.value;
break;
}
}
//var Degree = document.getElementById("Degree").value;
var url = " + value
+ "&Degree=" + Degree;
if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
request.onreadystatechange = showResult;
request.open("GET", url, true);
request.send();
}
function showResult() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseXML;
var temparatures = response.getElementsByTagName("Temperature");
var temparature = temparatures[0];
document.getElementById("inputTempS").innerHTML += temparature
.getElementsByTagName("inputTemp")[0].text;
document.getElementById("outputTempS").innerHTML += temparature
.getElementsByTagName("outputTemp")[0].text;
document.getElementById("conversionS").innerHTML += temparature
.getElementsByTagName("conversion")[0].text;
}
}
}
</script>
</head>
<body>
<form name="temp" action="">
<table>
<tr>
<td>
Degrees:
</td>
<td>
<input id="value" type="text" name="value" value=""
maxlength="100" />
</td>
</tr>
<tr>
<td>
Conversion:
</td>
<td>
<input id="Degree" type="radio" name="Degree" value="CelsiustoFah" />
Celsius to Fah
<input id="Degree" type="radio" name="Degree" value="FahtoCelsius" />
Fah to Celsius
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="Submit" onclick="getTemp();" />
</td>
</tr>
</table>
</form>
<div id="new">
<p>
The Input Temperature :
<span id="inputTempS"></span>
</p>
<p>
The Output Temperature :
<span id="outputTempS"></span>
</p>
<p>
The Conversion :
<span id="conversionS"></span>
</p>
</div>
</body>
</html>