Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Issue with Ajax and JSP form 1

Status
Not open for further replies.

shijingeorge

Programmer
Jul 18, 2011
2
US
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>
 
Hi

shijingeorge said:
click Submit, the results are displayed on the page only momentarily and then it disappears.
Well, the [tt]submit[/tt] button's default behavior is to submit the [tt]form[/tt]. So that it does.

If you want to stop that, return [tt]false[/tt] from the event handler :
Code:
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"submit"[/i][/green] [maroon]value[/maroon][teal]=[/teal][green][i]"Submit"[/i][/green] [maroon]onclick[/maroon][teal]=[/teal][green][i]"getTemp(); [highlight]return false[/highlight]"[/i][/green] [b]/>[/b]
Note that a [tt]form[/tt] can be submitted in various ways, pressing the [tt]submit[/tt] button is only one of them. So the recommended practice is to handle the [tt]form[/tt]s [tt]onsubmit[/tt] event instead :
Code:
[b]<form[/b] [maroon]name[/maroon][teal]=[/teal][green][i]"temp"[/i][/green] [maroon]action[/maroon][teal]=[/teal][green][i]""[/i][/green] [highlight][maroon]onsubmit[/maroon][teal]=[/teal][green][i]"getTemp(); return false"[/i][/green][/highlight][b]>[/b]
( Of course, in this later case you should remove the current [tt]onclick[/tt] handler. )


Feherke.
 
Thanks Feherke . Thank you so much for the suggestion. It worked!!!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top