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.
submit form with out page reloading?
Moderator: General Moderators
- freeformer
- Forum Newbie
- Posts: 14
- Joined: Tue May 13, 2008 1:54 pm
- Location: UK
Re: submit form with out page reloading?
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/
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/
Re: submit form with out page reloading?
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:
Then when you submit your form to call your function:
Good Luck!
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>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='';
});
}
Re: submit form with out page reloading?
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!
Re: submit form with out page reloading?
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">
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">