NamePros
Welcome, Guest! Ready to make a name for yourself in the domain business? We welcome both the hobbyist and professional domainer to join the discussion as part of the NamePros community.

Click here to create your profile to start earning reputation for posting, and trader ratings for buying & selling in our free e-marketplace. Build your trader rating with each successful sale. Our system has tracked over 100,000 sales and counting!
FAQ & TOS Register Search Today's Posts Mark Forums Read

Go Back   NamePros.com > Website Development Discussion Forums > Programming
Reload this Page Form Submission Without Reload

Programming PHP, Perl, Ruby on Rails, AJAX, HTML, XHTML, CSS, JavaScript, MySQL and any other coding topics.

Advanced Search
5 members in live chat ~  


Reply
 
LinkBack Thread Tools
Old 12-23-2010, 12:32 AM THREAD STARTER               #1 (permalink)
NamePros Regular
 
snike's Avatar
Join Date: Mar 2006
Location: USA
Posts: 497
snike has a spectacular aura aboutsnike has a spectacular aura about
 


Save a Life

Form Submission Without Reload


So, I've been scouring the web for a few days trying to find out how to submit a form without reloading the whole page. However, I could not find what I was looking for. Basically, I want a form to submit to process.php and have the div the form is in to display the output of process.php (form is replaced with process.php).

Thank you so much!
snike is offline   Reply With Quote
Old 12-23-2010, 02:39 AM   #2 (permalink)
 
BillyConnite's Avatar
Join Date: Jul 2005
Location: Coffs H, Australia
Posts: 3,456
BillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond repute
 


Wildlife Parkinson's Disease Parkinson's Disease
Wow... Editing my last post due to it's hideous readability:

You may be able to do something with JS, however a simpler way would be to use an iframe in html.

This means having two separate pages:
1) The wrapper, that will have everything that surrounds the form.
2) process.php containing just the form and/or results from the form.

This way when you hit submit on the form, only the process.php iframe is reloaded, i believe.

If you need an example let me know.

Hope this helps,
Rhett.
Last edited by BillyConnite; 12-23-2010 at 02:58 AM.
BillyConnite is offline   Reply With Quote
Old 12-23-2010, 03:28 AM   #3 (permalink)
Senior Member
 
musicplace.co.nr's Avatar
Join Date: Oct 2007
Location: Sydney, Australia
Posts: 1,022
musicplace.co.nr has much to be proud ofmusicplace.co.nr has much to be proud ofmusicplace.co.nr has much to be proud ofmusicplace.co.nr has much to be proud ofmusicplace.co.nr has much to be proud ofmusicplace.co.nr has much to be proud ofmusicplace.co.nr has much to be proud ofmusicplace.co.nr has much to be proud of
 



Alzheimer's
Using Javascript will be more professional looking, but a bit more complicated.

You want to look at something called AJAX. The JQuery library (http://www.jquery.org) will make it a lot easier for you if you don't know much javascript. The JQuery AJAX functions can be found at http://api.jquery.com/category/ajax/ .
musicplace.co.nr is offline   Reply With Quote
Old 12-23-2010, 09:32 AM   #4 (permalink)
NamePros Regular
 
baxter's Avatar
Join Date: Apr 2006
Posts: 360
baxter is just really nicebaxter is just really nicebaxter is just really nicebaxter is just really nice
 


Ethan Allen Fund Save The Children
Yes you'll want to do something along these lines, using jquery:

Code:
$(function() {
$('form#whateveryourformidis').submit(function() {
var form = $(this);
$.ajax({
    url: '/process.php', //enter the relative path to the process.php file
    type: 'post', //whether you want to use $_GET or $_POST in your script
    data: form.serialize(),
    error: function() {
        //what to do on an error                        
    },
    success: function(html) {
        form.closest('div')
            .html(html);
    }
});

return false;
});
});
__________________
Canadian Domain Registrar Ready.ca
baxter is offline   Reply With Quote
Old 12-24-2010, 12:01 AM THREAD STARTER               #5 (permalink)
NamePros Regular
 
snike's Avatar
Join Date: Mar 2006
Location: USA
Posts: 497
snike has a spectacular aura aboutsnike has a spectacular aura about
 


Save a Life
Thanks for the replies! I have looked into the iframe method before and I want to try it out. However, I am more interested in using javascript and ajax. I've been playing around with code similar to what baxter has shown. However, I have a few questions. Can you explain this bit of code and how it works?:

Quote:
form.closest('div')
????: NamePros.com http://www.namepros.com/programming/693174-form-submission-without-reload.html
.html(html)
I am assuming 'div' is the id of the div wrapper? What does .closest/.html do?

Thank you so much for all the help!

Edit:
I played around with the ajax and I'm having difficulties with the last bit of code. How can I change the contents of one div with the content returned by the process.php file?

Thanks.
Last edited by snike; 12-24-2010 at 04:32 PM.
snike is offline   Reply With Quote
Old 12-24-2010, 05:33 PM   #6 (permalink)
NamePros Regular
 
baxter's Avatar
Join Date: Apr 2006
Posts: 360
baxter is just really nicebaxter is just really nicebaxter is just really nicebaxter is just really nice
 


Ethan Allen Fund Save The Children
Hey snike,

In the first post you stated:

Quote:
Basically, I want a form to submit to process.php and have the div the form is in to display the output of process.php
Which led me to believe your code structure was:

Code:
<div ...>
  <form ...>
     ....
  </form>
</div>
.closest(selector) in jquery travels upwards from the current element, in my example the form tag which is in the form variable, and looks for a matching selector. So doing form.closest('div') finds the closest div tag relative to the form element.
????: NamePros.com http://www.namepros.com/showthread.php?t=693174

I then call form.html(html), where the html variable is the returned html from the form. The .html call replaces the html in the variable with a new string html repersentation.

an example would be $('form').closest('div').html('<b>Hello World</b>'); that would replace the text of the div parent to the form element with "hello world" bolded.

If you need any help with jquery a great tool is http://api.jquery.com

Happy Holidays,

Jay
__________________
Canadian Domain Registrar Ready.ca
baxter is offline   Reply With Quote
Old 12-26-2010, 04:49 PM THREAD STARTER               #7 (permalink)
NamePros Regular
 
snike's Avatar
Join Date: Mar 2006
Location: USA
Posts: 497
snike has a spectacular aura aboutsnike has a spectacular aura about
 


Save a Life
Thank you! I finally got it to work. However, I'm having an issue with another piece of jquery code. Where would I place return false; in the following? I've tried several times without success.
????: NamePros.com http://www.namepros.com/showthread.php?t=693174

Code:
function switchContent (theitem) {
    var myurl = "blah blah";
    var piece = theitem;
    var page_load = myurl + piece;
$(document).ready(function(){
        $('#area').fadeOut('slow', function(){
            $(this).load(page_load, function(){
                $(this).fadeIn("slow");
            }); 
        });
});
}
Thank you!
snike is offline   Reply With Quote
Old 12-26-2010, 05:04 PM   #8 (permalink)
 
BillyConnite's Avatar
Join Date: Jul 2005
Location: Coffs H, Australia
Posts: 3,456
BillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond repute
 


Wildlife Parkinson's Disease Parkinson's Disease
At the end of the function block.

So, this should work:
Code:
function switchContent (theitem) {
    var myurl = "blah blah";
    var piece = theitem;
    var page_load = myurl + piece;
$(document).ready(function(){
        $('#area').fadeOut('slow', function(){
            $(this).load(page_load, function(){
                $(this).fadeIn("slow");
            }); 
        });
});
return false;
}
BillyConnite is offline   Reply With Quote
Old 12-26-2010, 05:14 PM THREAD STARTER               #9 (permalink)
NamePros Regular
 
snike's Avatar
Join Date: Mar 2006
Location: USA
Posts: 497
snike has a spectacular aura aboutsnike has a spectacular aura about
 


Save a Life
Thanks! I tried that and the page still jumps to the top when the function is called by a link:

Code:
<a href="#" onclick="switchContent('URL HERE')">text here</a>
Does it have anything to do with the event handler? I feel as if I'm using the incorrect handler.

Code:
$(document).ready(function(){
Thanks!
snike is offline   Reply With Quote
Old 12-27-2010, 10:44 PM   #10 (permalink)
NamePros Member
Join Date: Nov 2010
Posts: 34
pausch is an unknown quantity at this point
 



JavaScript is reliable to use for separate form pages.
pausch is offline   Reply With Quote
Old 12-29-2010, 11:45 PM THREAD STARTER               #11 (permalink)
NamePros Regular
 
snike's Avatar
Join Date: Mar 2006
Location: USA
Posts: 497
snike has a spectacular aura aboutsnike has a spectacular aura about
 


Save a Life
umm okay?
snike is offline   Reply With Quote
Old 12-30-2010, 03:00 AM   #12 (permalink)
 
BillyConnite's Avatar
Join Date: Jul 2005
Location: Coffs H, Australia
Posts: 3,456
BillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond reputeBillyConnite has a reputation beyond repute
 


Wildlife Parkinson's Disease Parkinson's Disease
Probably yet another person just spamming their sig links. It pays to make useless posts every so often i guess.
BillyConnite is offline   Reply With Quote
Old 01-06-2011, 10:00 AM THREAD STARTER               #13 (permalink)
NamePros Regular
 
snike's Avatar
Join Date: Mar 2006
Location: USA
Posts: 497
snike has a spectacular aura aboutsnike has a spectacular aura about
 


Save a Life
I still can't seem to figure out how to get return: false; to work. Is there a workaround for this?

Thanks.
snike is offline   Reply With Quote
Old 01-10-2011, 04:33 PM   #14 (permalink)
NamePros Member
Join Date: Nov 2009
Posts: 142
smghost001 will become famous soon enoughsmghost001 will become famous soon enough
 



Originally Posted by snike View Post
Thanks! I tried that and the page still jumps to the top when the function is called by a link:
????: NamePros.com http://www.namepros.com/showthread.php?t=693174

Code:
<a href="#" onclick="switchContent('URL HERE')">text here</a>
Does it have anything to do with the event handler? I feel as if I'm using the incorrect handler.

Code:
$(document).ready(function(){
Thanks!
Try this:

<a href="javascript: void(0)" onclick="switchContent('URL HERE')">text here</a>
__________________
Scientific Calculator - SciCalculator.com

Dns For Sale: Fuelcooler/s(.dot)com - RuralRiding(.dot)com - AttackTank(.dot)com - Foredoomed(.dot)com - SavingCalories(.dot)com - FairDealFinder(.dot)com
smghost001 is offline   Reply With Quote
Old 01-13-2011, 06:37 PM THREAD STARTER               #15 (permalink)
NamePros Regular
 
snike's Avatar
Join Date: Mar 2006
Location: USA
Posts: 497
snike has a spectacular aura aboutsnike has a spectacular aura about
 


Save a Life
It works! Thank you so much!
snike is offline   Reply With Quote
Old 01-23-2011, 10:20 PM   #16 (permalink)
NamePros Member
Join Date: Jan 2011
Posts: 36
kevin smith 619 is an unknown quantity at this point
 



i also found my solution with this discussion thanks to you all
kevin smith 619 is offline   Reply With Quote
Old 01-24-2011, 08:42 PM   #17 (permalink)
Your face is regfee!
 
yilduz's Avatar
Join Date: May 2008
Location: Oregon
Posts: 1,069
yilduz is a splendid one to beholdyilduz is a splendid one to beholdyilduz is a splendid one to beholdyilduz is a splendid one to beholdyilduz is a splendid one to beholdyilduz is a splendid one to beholdyilduz is a splendid one to behold
 



Animal Rescue
This isn't something I've been having an issue with, but something I've been curious about, so this thread has actually helped me, too.
__________________
Looking for fantasy hockey owners to begin the new season on ESPN. Deep league with lots of owners and a very high % of keepers (dynasty league). Looking for active owners because this league will continue year after year.
My homepage | I miss my dog - Athena
yilduz is offline   Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


Similar Threads
Thread Thread Starter Forum Replies Last Post
[WTS] Cheapest 1k 2k Manual directory submission Free grosh Advertising & SEO Services 55 01-27-2011 07:11 PM
Directory Submission Service From $2 euryyj Advertising & SEO Services 4 10-24-2010 08:17 PM
How to know referrer on a form POST submission? mholt Programming 2 10-29-2005 01:33 PM

 
All times are GMT -7. The time now is 02:42 PM.

Domain name forum recommended by Domaining.com Powered by: vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.6.0 Ad Management plugin by RedTyger