Capture form response in Javascript?

Question

Let say I submit data to a form with the following code

var xhr = new XMLHttpRequest(), formData = new FormData();  
formData.append("img", img);
formData.append("user", localStorage["username"]);
formData.append("pass", localStorage["password"]);

xhr.onreadystatechange = function (event) {
    if (xhr.readyState === 4 && xhr.status === 200) {
       var value = xhr.responseText; // value should equal "1234"
        alert( "value = " + value );
    }else{
    alert("none");
}
};
xhr.open("POST", "http://joubin.me/uploads3/upload_file.php", true);
xhr.send(formData);

After upload.php is done, it redirects to another page called giveid.php and the only thing it displays is a text string with an id

say 1234

How can I with javascript capture this exact id.

Keep in mind, a different upload.php redirect will have a different id number on giveid.php?

I looked into the xmlhtml responses and could not figure it out.

Here is what form goes

$password = $_REQUEST['pass'];
$username =  $_REQUEST['user'];
$image = $_REQUEST['img'];
echo $password;
echo "<br/>";
echo $username;
echo "<br/>";
echo $image;
$con = mysql_connect("localhost","ya","right");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
        echo "could not connect";
  }
$asql = "SELECT * FROM `ashkan`.`users` where user='$username' and pass='$password';";

$result = mysql_query($asql);
echo $result;
// Mysql_num_row is counting table row
$count=mysql_num_rows($result);

echo $count;

echo 11;
if($count == 1){
$sql = "INSERT INTO `ashkan`.`goog` (`user`, `pass`, `img`) VALUES ('$username', '$passwo$
}
mysql_query($sql);
mysql_close($con);
header( 'Location: giveid.php' ) ;

and here is the content of giveid.php

Any help would be great.

Thanks

is there a reason you're not using a JavaScript library such as jQuery for handling ajax requests? — maček
– maček, Commented Dec 6, 2012 at 6:10
There is no need of reinventing the wheel. Use $.post(url,fn) — Ibu
– Ibu, Commented Dec 6, 2012 at 6:11
Yes, as I understand, Chrome extensions do not support jQuery — Cripto
– Cripto, Commented Dec 6, 2012 at 6:11
possible duplicate stackoverflow.com/questions/8709733/responsetext-xmlhttprequest — Larry Battle
– Larry Battle, Commented Dec 6, 2012 at 6:11
jQuery is not a solution for someone who wants to understand how it works — cegfault
– cegfault, Commented Dec 6, 2012 at 6:11

Larry Battle · Accepted Answer · 2012-12-06 07:00:37Z

2

You need to use xhr.onreadystatechange to retrieve the response from the server.

Something like this might work.

var value;
var formData = new FormData();
formData.append("img", img);
formData.append("user", localStorage.username);
formData.append("pass", localStorage.password);

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (event) {
    if (xhr.readyState === 4 && xhr.status === 200) {
        value = xhr.responseText; // value should equal "1234"
        alert( "value = " + value );
    }
};
xhr.open("POST", "upload.php", true);
xhr.send(formData);

Info Here: http://www.tizag.com/ajaxTutorial/ajaxxmlhttprequest.php

Remember that header() must be called before any actual output is sent. So get rid of all the echos you have in the php file. Once you echo then that starts the output buffer for the response to the client.

Info Here: http://php.net/manual/pt_BR/function.header.php

I think this should be your only echo on the php page.

echo include( 'giveid.php');

Try using Google Chrome Dev Tool Network tab to view the response from your php webpage.

Launch Google Chrome,
Hit f12,
Click the network tab,
reload your page,
click on the ajax response page,
click preview to view the response.

Info Here: https://developers.google.com/chrome-developer-tools/docs/network

edited Dec 6, 2012 at 7:00

answered Dec 6, 2012 at 6:22

Larry Battle

9,1985 gold badges43 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cripto Over a year ago

That 1234 value is being displayed as text on a regular html page. is that what this is getting?

slebetman Over a year ago

@user1048138: XMLHttpRequest stores whatever the server returns in responseText. If it is a plain string "1234" then it is the string "1234". If it is an HTML page (which is just a bunch of strings BTW) with the 'word' 1234 then it will be the string "<html><body>1234</body></html>" or something similar.

Li-chih Wu · Accepted Answer · 2012-12-06 06:37:04Z

1

xhr documentation

Get xhr.response then parse it.

We usually return a json string so js can parse it easily.

googled xhr example something like this:

xhr.onreadystatechange=function()
{
    if (xhr.readyState!=4 || xhr.status!=200)
        return;
    var resp = xhr.responseText;
    var parsed = eval(resp);
}

edited Dec 6, 2012 at 6:37

answered Dec 6, 2012 at 6:18

Li-chih Wu

1,0921 gold badge12 silver badges20 bronze badges

1 Comment

Cripto Over a year ago

Yeah, thats my question, however, I dont know how to capture this specific response. Could you elaborate.

Collectives™ on Stack Overflow

Capture form response in Javascript?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related