I have a project on a web-server for class at http://homepage.cs.uiowa.edu/~csoultz/Lab6/mySite.html and in that project there is a form that preforms an ajax GET call to the server. the GET request url looks like http://homepage.cs.uiowa.edu/~csoultz/Lab6/php/ajaxForm.php?name=me&email=me%40us.com&birthday=12%2F01%2F1998#
.On the server there is a .php file that takes the GET request and returns a response. When the form is submitted the browser receives the data correctly and then after the onload function is called the browser redirects itself to http://homepage.cs.uiowa.edu/~csoultz/Lab6/mySite.html?name=me&email=me%40us.com&birthday=12%2F01%2F1998#
. However if you run the same request twice in a row then it will work as it is suppose to.
Why is this happening?
when the request is done in curl it returns with status of 200 (ie. no redirect) and the data is correct there as well. Here is the example curl:
C:\Windows\System32>curl -i -X GET "http://homepage.cs.uiowa.edu/~csoultz/Lab6/php/ajaxForm.php?name=me&email=me%40us.com&birthday=12%2F01%2F1998#"
and here is the response:
HTTP/1.1 200 OK
Date: Thu, 06 Oct 2016 15:29:39 GMT
Server: Apache
Strict-Transport-Security: max-age=31536000; includeSubdomains
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
Content-Length: 131
Connection: close
Content-Type: text/html; charset=UTF-8
Thanks for joing our club!
We have filled the following information:
Name: me
Email: me@us.com
Birthday: 12/01/1998
and here is the js code to do the XMLHttpRequest:
function askServer() {
var req = new XMLHttpRequest();
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var birthday = document.getElementById("datepicker").value;
var dataToSend = "?name=" + name + "&email=" + email + "&birthday=" + birthday;
req.onload = function(){
if ((this.readyState == XMLHttpRequest.DONE) && (this.status == 200))
{
document.getElementById("result").innerHTML = "Reply from the server:
" + this.responseText;
//console.log(this.responseText);
}
};
req.open("GET", "http://homepage.cs.uiowa.edu/~csoultz/Lab6/php/ajaxForm.php" + dataToSend, true);
req.send();
document.getElementById("result").innerHTML = "The request has been sent.";
}
here is the form:
<form action="#" id="workHourCalculator">
<label for="name">Name* </label>
<input name="name" id="name" type="text" class="inputTextBox" autofocus required><br><br>
<label for="email">Email* </label>
<input name="email" id="email" type="email" class="inputTextBox" required><br><br>
<label for="birthday">Birth Date* </label>
<input name="birthday" type="text" class="inputTextBox" id="datepicker" required><br><br>
<input type="submit" value="Submit Applet" onclick="askServer()">
</form>
and lastly here is the php:
<?php
$name = $_GET['name'];
$email = $_GET['email'];
$birthday = $_GET['birthday'];
echo ("Thanks for joing our club!
<br>We have filled the following information:
<br>");
echo ("Name: ");
echo ($name);
echo ("
<br>Email: ");
echo ($email);
echo ("
<br>Birthday: ");
echo ($birthday);
?>
I apologize if there is a firewall up that is blocking the curl call I have not tested outside of my universities network.
Any help is appreciated
Thank You in advance!