Topic
3 replies Latest Post - ‏2011-08-14T03:17:35Z by SystemAdmin
shijingeorge
shijingeorge
2 Posts
ACCEPTED ANSWER

Pinned topic Issue with Ajax and JSP form

‏2011-07-18T23:01:37Z |
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 = "http://localhost:8080/mc1/ConverterServlet?value=" + 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>

The Input Temperature :

The Output Temperature :

The Conversion :



</body>
</html>
Updated on 2011-08-14T03:17:35Z at 2011-08-14T03:17:35Z by SystemAdmin
  • shijingeorge
    shijingeorge
    2 Posts
    ACCEPTED ANSWER

    Re: Issue with Ajax and JSP form

    ‏2011-07-18T23:31:47Z  in response to shijingeorge
    The last part of the code seems not to be properly presented. so i have pasted it below.


    The Input Temperature :

    The Output Temperature :

    The Conversion :



    </body>
    </html>
  • SystemAdmin
    SystemAdmin
    1140 Posts
    ACCEPTED ANSWER

    Re: Issue with Ajax and JSP form

    ‏2011-07-19T11:41:13Z  in response to shijingeorge
    <input type="submit" value="Submit" onclick="getTemp();" />

    You said "submit", but what you meant to do is not really "traditional" submit... Hence, in fact, you should really stop submit...
    
    <input type=
    "submit" value=
    "Submit" onclick=
    "getTemp();return false;" />
    
  • SystemAdmin
    SystemAdmin
    1140 Posts
    ACCEPTED ANSWER

    Re: Issue with Ajax and JSP form

    ‏2011-08-14T03:17:35Z  in response to shijingeorge
    Ajax does not require the Submit button if an HTML event (http://www.w3schools.com/tags/ref_eventattributes.asp) is used to invoke a JavaScript function that send an Ajax request to the server.
    http://www.theregister.co.uk/2006/06/20/ajax_web_tutorial_part2/