submit form with out page reloading?

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
bhonan
Forum Newbie
Posts: 14
Joined: Sat Feb 02, 2008 12:55 pm

submit form with out page reloading?

Post by bhonan »

This is a half javascript, half php question... I think.

How can I submit a form with out the page reloading or if the page has to reload, then how do I get it to jump to the spot on the page where the user was? (the page is somewhat long, but for good reason)

I currently use onchange or onclick to submit the form with javascript, have also used a submit button to submit the whole page. Really though, I just want to submit what has been changed, as well as keep the user at that same spot in the page.
User avatar
freeformer
Forum Newbie
Posts: 14
Joined: Tue May 13, 2008 1:54 pm
Location: UK

Re: submit form with out page reloading?

Post by freeformer »

Here's an idea - why don't you submit the form using an AJAX request?

That way, your user never has to leave the page :)

Prototype is a good AJAX framework that has most of the legwork done already - http://www.prototypejs.org/
JacobT
Forum Commoner
Posts: 43
Joined: Tue May 13, 2008 11:07 am
Location: Los Angeles, CA

Re: submit form with out page reloading?

Post by JacobT »

hey bhonan, when I don't have to do a lot of AJAX stuff, I use JX.js, it's a VERY small JS script for doing the AJAX call. You can see it here: http://www.openjs.com/scripts/jx/

It's only a few lines of code for the call and result. It's extremely easy to implement. Use that in conjunction with some CSS/JS hiding and you can make a very quick and dirty ajax call with result. Just make the DIV with the result text like so:

Code: Select all

<div id="resultText" style="display:none;">Thank you for your submission.</div>
Then when you submit your form to call your function:

Code: Select all

function submitForm() {
    // validate your data.
 
    // make the AJAX call
    jx.load('process.php?field1=' + document.formName.field1.value+'&field2='+document.formName.field2.value,function(data){
        // Check your result
 
        // Display your result text.
        document.getElementById('resultText').style.display='';
    });
}
 
Good Luck!
bhonan
Forum Newbie
Posts: 14
Joined: Sat Feb 02, 2008 12:55 pm

Re: submit form with out page reloading?

Post by bhonan »

Thank you both! I am new to web design and am not so familiar with AJAX, just know a very very little bit of javascript. But I will test your suggestions out! Thanks!
dayyanb
Forum Commoner
Posts: 46
Joined: Wed Jan 23, 2008 12:34 am

Re: submit form with out page reloading?

Post by dayyanb »

Remember to include an alternate form for people without javascript enabled using the <noscript> tag.

If you want to return them to the same spot on the page put a #id on the end of the url.
Example:
<form id="TheForm" action="index.php#TheForm">
Post Reply