Dynamically "pushing" results of a form query

.... into the same page without a refresh

[trillianjedi]

I just spent 2 minutes trying to work out the best forum to post this, but I think this is probably the one ;)

I have a form which calls a script, let's say:-

<form action="http://example.com/submit.php">
<input type="submit" name="blah">
<elements>
</form>

.... and I want to take the result from submit.php and dynamically incorporate it into the page without redirecting to a new page.

I'm currently thinking along the following lines:-

<form action="http://example.com/submit.php">

<div id="tj"><input type="submit" name="blah"></div>

<elements>
</form>

And when the form is submitted, the result is "pushed" into the DIV id "tj" with a:-

document.getElementById("tj").innerHTML="<result of the form submit>"

I know that I can do a popup using _target="blank" but I'm trying to avoid that - really I want this dynamically pushed into the existing page.

Possible? If not, any lateral thinking ideas also gratefully received!

Thanks,

TJ

[jshanman]

You would need to use the XMLHttpRequest Object to send the POST data to your PHP page, then output the result of your PHP page into your DIV element...

Search Google for: XMLHttpRequest

- JS

[texmex]

Instead of a Div use an IFRAME and name it as the target.
eg.

<form id="ExampleForm"
action="http://example.com/submit.php" target="Results" method="post">
..
Form Elements
..
</form>
<iframe name="Results"></iframe>

Use a piece of suitable styling for your IFRAME and it will practically achieve exactly what you want.

[trillianjedi]

Hi guys, thanks.

TexMex - I've been thinking about ways I could use an iFrame, but the problem is I don't think that the content of the iFrame can reference the containing pages form?

eg, I couldn't put the "submit" button for the form in the page source of the iFrame, if that makes sense.

AJAX might indeed be the only answer here for what I really want to try and achieve (which is an effect as much as anything).

[texmex]

trillianjedi you're mistaken. The page sitting in that IFRAME will recieve the same form details as if it was a totally separate page.

Any script in the document of the IFRAME is also able to access it's parent document (assuming the page is from the same site).

So potentially, your recieving document could process the fields it has been fed and then EVEN update parts of it's parent document.

In fact. You could even leave the IFRAME invisible at all times, and use an onload function of your recieving page to update that DIV that you want.

If you're interested I'll knock up a quick couple of pages to post as a demo.

[trillianjedi]

Hi Texmex,

Thanks but it's OK now - got it all worked out. You're right, I discovered I could reference the iFrames parent form objects, but it was hassle and additional code. I worked out a simpler way in the event (often when something gets too complicated it means your design is bad in the first place :) )

TJ

[texmex]

You're right. Just after submitting my last post I suddenly thought, "Well why bother submitting the form, You could simply have the 'submit' button call a local function that will process the info and do whatever :-) "

Anyhow, I don't know enough about your application to leap to any conclusions, but glad you got it sorted.

[trillianjedi]

You could simply have the 'submit' button call a local function that will process the info and do whatever :-)

That's pretty much exactly what I did in the end, yes ;)

Thanks for your help.

TJ