How do they do it? Submit a form without reloading the page?

[Bawy]

www.photosig.com has on every photo review page a place to answer "was this comment useful to you?" and when you select the radio button it submits without moving from the page or reloading or anything! Just shows a quick flash on my loading bar, but screen is static?! How do they do it?

The form tag has no target and it is not in frames.

You can use this account to try it, please don't get it banned:

www.photosig.com
user: wombaticspit@yahoo.com
pass: ce37

I was told that this don't work for everyone, I think that means Linux users see a refresh, Windows users don't even get a stuter?! I am stumped how they do it...

[usban]

As you can see in this extract of the page they submit the form calling a php script. They call it when calling the onlcick event.


<form action="actions/addmetacritique.php" method="post" name="metacritiqueForm2003446">

<input type="hidden" value="2003446" name="critiqueId">
Was this critique useful?

<input type="radio" value="1" name="rating" onclick="javascript:metacritiqueForm2003446.submit()">

<img src="images/up.gif" border="0">Yes

<input type="radio" value="-1" name="rating" onclick="javascript:metacritiqueForm2003446.submit()">

<img src="images/down.gif" border="0"> No

<input type="radio" value="none" name="rating" checked onclick="javascript:metacritiqueForm2003446.submit()"> No opinion

</form>

;)

[Spookster]

That is a good question. There are also no absolutely positioned layers containing the form or iframes around the form. No hidden popup windows off the screen. I am also at a loss as to how they do this. The action of the form is using a php page to process it however a form will go to that page by default.

[joh6nn]

i couldn't figure it out either, just to have given my two cents.

i say ask them ( and be sure to post any answer you get. i want to know how they did it ), since none of us can figure it out.

[beetle]

Ah yes, I've seen this before...

http://www.youngpup.net

VERY cool site. And it's all 1 page. Well, at least I mean there isn't any refreshes. All the content is loaded dynamically by the DOM and some ASP and XML

[Spookster]

Originally posted by beetle
Ah yes, I've seen this before...

http://www.youngpup.net

VERY cool site. And it's all 1 page. Well, at least I mean there isn't any refreshes. All the content is loaded dynamically by the DOM and some ASP and XML

The photo site doesn't have any javascript in it other than to open some popup window ads. No external script files attached either.

[Bawy]

I did ask the guy who made the site, he lives near me in fact. He just never answered my email... I think stopping by his home to ask would be a bit creepy... lol...

That www.youngpup.net site is seriously cool, but not exactly the answer to my question. What Ypup is doing is different. BTW. there is also Flash intermixed with youngpups JS.

:confused: :confused: :confused: :cool: :confused: :confused: :confused:

[whammy]

It looks to me like it is reloading the page - just doing it so fast you don't notice.

I was able to catch the server at what was apparently a bad time - and caught it failing to reload the page several times.

[Bawy]

Seems to be static, when I scroll immediatly after submission it the scroll motion does not get interupted. Also, even refreshing localfiles has some noticable flash to it?

[adios]

Maybe you could sneak over and watch him through the window...
then you wouldn't need to creep him out by asking :o

[glenngv]

type this in the address bar.
then vote for yes/no/no opinion on the first critique. it will submit the page in new window

javascript:document.metacritiqueForm156786.target="_blank";alert('form target changed.')

[Bawy]

Glenngv, That is a neat trick but I still don't know how he does it? The page pops up blank?? I am still confused...

[glenngv]

im also confused how they did it. as you can see, the action page is pure server-side scripts no html output because you see only a blank page.:confused:

as for the trick, it's neat indeed!
you can do a lot of things like bypass the javascript validation, changing maxlength of a field, etc. that's why it is always good to also have server-side validation aside from client-side one. :D

[gmorphus]

I'm throwing my head against the wall right now... :mad:

a few days ago I read somewhere about submitting a form without reloading the page using an image.
I can remember the datails, but as fas as I recall you should create an almost invisibile image, and submitting the form using it's source:
img1.src = target.php...

i guess in that case a get method should be used. i can't remeber exactly how it is should be done - I don't think that you should create a get string yourself...

I don't know where I saw it and can't my history - formatted my copmuter yesterday :(

[glenngv]

Originally posted by gmorphus
I'm throwing my head against the wall right now... :mad:

a few days ago I read somewhere about submitting a form without reloading the page using an image.
I can remember the datails, but as fas as I recall you should create an almost invisibile image, and submitting the form using it's source:
img1.src = target.php...

i guess in that case a get method should be used. i can't remeber exactly how it is should be done - I don't think that you should create a get string yourself...

I don't know where I saw it and can't my history - formatted my copmuter yesterday :(

are you talking about this?

function silentSubmit(){
var img = new Image();
img.src='target.php?param1=blah&amp;param2=something';
}

then in your form:

<input type="button" value="Submit" onclick="silentSubmit()">

no need to create for a "physical" image, maybe you mean create an instance of the Image constructor.

but this is not the case for the site in question.
it calls the submit() method of the form object without form target and with method post.

[joh6nn]

is it possible for a server side script to NOT return anything? to simply execute, without returning a page? i'm guessing, that if this were possible, that might be what we're seeing. that would explain why the page doesn't change, and why changing the target doesn't seem to have any effect.

[gmorphus]

Yah that's what I meant i think :thumbsup:

I understood that it isn't what the site does... though for some reason I couldn't see what you mean when I entered the site.

When I clicked one of these radio buttons i reloaded the page, and your neat trick didn't work for - what do I do worng?
I feel stupid now...

As for a server side script not returning anything: YES it is possible, and from the posts I read in this thread I understood this IS the case. only that doesn't mean that this is the reason for the page doesn't change. even if the script doesn't return anything you should get a blank page, and this isn't the case.

[boywonder]

I believe I was able to mimic this effect.

Let me know if this test page gives you the same effect:

http://www.e-imagingstudios.com/lab/subTest.php

There's a little form at the bottom much like the ones at photosig.

[Spookster]

Originally posted by boywonder
I believe I was able to mimic this effect.

Let me know if this test page gives you the same effect:

http://www.e-imagingstudios.com/lab/subTest.php

There's a little form at the bottom much like the ones at photosig.

Ok how did you do that and quit holding out on us!!!!! :D

[mordred]

For me it seems like they use the HTTP 204 "no content" response header trick, thus forcing the browser not to reload the page. I guess we webdevelopers very rarely read the actual HTTP protocol (me included), but here's an article about that for those interested:

http://www.webmasterbase.com/article/314/7

or use rfc-editor, Google etc. for more info.

[boywonder]

This is all I did in my test...

In the processing page, I just made PHP count to a large number (to let a little time pass) and ended the script with this:

echo "<script language=\"javascript\">history.go(-1);</script>";

It seems to have the same effect as phpotosig no?

[glenngv]

Originally posted by boywonder
This is all I did in my test...

In the processing page, I just made PHP count to a large number (to let a little time pass) and ended the script with this:

echo "<script language=\"javascript\">history.go(-1);</script>";

It seems to have the same effect as phpotosig no?

but the Forward button is enabled, meaning there is another page in the history, which is the action page of the current page.
i think mordred is more correct. :)

[whammy]

john, it is possible for a server-side script to execute without returning anything to the client. :)

That's how we track stuff like HTML messages opened, etc. - and by the way, that does submit "silently" using an image.

[boywonder]

Originally posted by glenngv
but the Forward button is enabled, meaning there is another page in the history, which is the action page of the current page.
i think mordred is more correct. :) Yes I see what you mean. I agree with that. I didn't notice that difference.
----edit-----
Also when I view that test page on a different machine/different connection, I can see the flicker as form submits - didn't see that at home.

[Bawy]

Glenngv, you are full of great JS tricks! You should write a tutorial of tricks, I would read it!

Boywonder, I had previously tried that and came to the same conclusion (flicker & forward button enabled)

:) :) :)
As for the conclusion to this problem, woohoo, MORDRED GETS THE PRIZE!!! Dude, you rock!:thumbsup:
:p :p :p
To check it, just stick this at the top of the page:
<?
if(isset($rating)) header("HTTP/1.0 204 No Content");
?>

and just change the action to:
<form action="<?=$PHP_SELF;?>" method="post" name="metacritiqueForm1693291">

:cool: SUPER COOL!:cool:

[Spookster]

so this header:

header("HTTP/1.0 204 No Content");

enables one to send off the request but doesn't reload the page?

[joh6nn]

what it is, is that the default action of a form, is to reload the page. this page has a variable that gets set when you submit, which triggers the no content header. the no content header means that there's nothing to connect to, so the browser does nothing. i think.

[HopeSprings]

When I accessed the site below, tried several times, and it flickered each time, indicating a refresh. Also showed a Forward arrow.

Let me know if this test page gives you the same effect:

http://www.e-imagingstudios.com/lab/subTest.php

[gmorphus]

It does reload the page.
also i can see a forward arrow.

[boywonder]

Quoting myself... (see above)Originally posted by boywonder
Yes I see what you mean. I agree with that. I didn't notice that difference.
----edit-----
Also when I view that test page on a different machine/different connection, I can see the flicker as form submits - didn't see that at home.