Write the statements to create a new XMLHttpRequest object. Then create the requ
ID: 3582518 • Letter: W
Question
Write the statements to create a new XMLHttpRequest object. Then create the request such that it will use a POST. http://forecast.weather.gov/MapClick.php?lat39.3233&lon=-120.3797UNIT=0&LG=ENGLISH&fCSTtYPE=DWML. the reuest should be performed synchronously.
Assume that there are two text input elements named input1 and input2, write the javascript code to get the value from these two elements and convert them to numeric values. Then add the two values together and store the result in the InnerHTML of the paragraph having an ID of output. Verify that both input values contain numbers. display a message in another control(abel) if the input is not valid.
Explanation / Answer
for first part the answer is
var xhttp = new XMLHttpRequest();
var url = "http://forecast.weather.gov/MapClick.php";
var queryParams = "lat39.3233&lon=-120.3797UNIT=0&LG=ENGLISH&fCSTtYPE=DWML"; // query params to be sent
xhttp.open("POST", url , false);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //sending url encoded variables in the request.
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
}
};
xhttp.send(queryParams);
For the second part:
function testFunc(){
var input1 = document.getElementsByName("input1"); //get input1 element
var input2 = document.getElementsByName("input2"); //get input2 element
var result = document.getElementById("output"); //get output element
var invalidError = document.getElementById("errorname"); // get error label element
var input1Value, input2Value;
if(input1.length >0 || input2.length >0){
input1Value = parseInt(input1[0].value); // parsing the input1 value to integers
input2Value = parseInt(input2[0].value); // parsing the input2 value to integers
}
if( !(isNaN(input1Value)) && !(isNaN(input2Value !== "NaN")) ){ // to check if the input values are integers
result.innerHTML = input1Value + input2Value; //setting the result
invalidError.innerHTML = ""; // nullifying the error message in the label if it exists.
}else{
invalidError.innerHTML = "Input is not a valid integer. Please Enter valid integers in both the inputs"; //to input error message
}
}
Sample html code to test the second function:
<html>
<head>
<head>
<body>
<input type="text" name="input1">
<input type="text" name="input2">
<input type="button" value="Click Me!">
<label id = "errorname"></label>
<p id = "output"> </p>
<script>
function testFunc(){
var input1 = document.getElementsByName("input1"); //get input1 element
var input2 = document.getElementsByName("input2"); //get input2 element
var result = document.getElementById("output"); //get output element
var invalidError = document.getElementById("errorname"); // get error label element
var input1Value, input2Value;
if(input1.length >0 || input2.length >0){
input1Value = parseInt(input1[0].value); // parsing the input1 value to integers
input2Value = parseInt(input2[0].value); // parsing the input2 value to integers
}
if( !(isNaN(input1Value)) && !(isNaN(input2Value !== "NaN")) ){ // to check if the input values are integers
result.innerHTML = input1Value + input2Value; //setting the result
invalidError.innerHTML = ""; // nullifying the error message in the label if it exists.
}else{
invalidError.innerHTML = "Input is not a valid integer. Please Enter valid integers in both the inputs"; //to input error message
}
}
/*
var xhttp = new XMLHttpRequest();
var url = "http://forecast.weather.gov/MapClick.php";
var queryParams = "lat39.3233&lon=-120.3797UNIT=0&LG=ENGLISH&fCSTtYPE=DWML"; // query params to be sent
xhttp.open("POST", url , false);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //sending url encoded variables in the request.
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
}
};
xhttp.send(queryParams); */
</script>
<body>
<html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.