| | |||||
| ||||||||
| Programming PHP, Perl, Ruby on Rails, AJAX, HTML, XHTML, CSS, JavaScript, MySQL and any other coding topics. |
![]() |
| | LinkBack | Thread Tools |
| | THREAD STARTER #1 (permalink) |
| NamePros Regular Join Date: Mar 2006 Location: USA
Posts: 497
![]() ![]() | 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! |
| | |
| | #2 (permalink) |
![]() Join Date: Jul 2005 Location: Coffs H, Australia
Posts: 3,456
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() | 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.
__________________ Free Forums / GoDaddy Coupon Codes (NEW DOMAIN!) / Free Arcade Script / <?='Your computer is '.(1?fine:broken).'.'?>
Last edited by BillyConnite; 12-23-2010 at 02:58 AM.
|
| | |
| | #3 (permalink) |
| Senior Member Join Date: Oct 2007 Location: Sydney, Australia
Posts: 1,022
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() | 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/ . |
| | |
| | #4 (permalink) |
| NamePros Regular Join Date: Apr 2006
Posts: 360
![]() ![]() ![]() ![]() | 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 |
| | |
| | THREAD STARTER #5 (permalink) | ||||
| NamePros Regular Join Date: Mar 2006 Location: USA
Posts: 497
![]() ![]() | 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?:
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.
| ||||
| | |
| | #6 (permalink) | ||||
| NamePros Regular Join Date: Apr 2006
Posts: 360
![]() ![]() ![]() ![]() | Hey snike, In the first post you stated:
Code: <div ...>
<form ...>
....
</form>
</div> ????: 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 | ||||
| | |
| | THREAD STARTER #7 (permalink) |
| NamePros Regular Join Date: Mar 2006 Location: USA
Posts: 497
![]() ![]() | 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");
});
});
});
} |
| | |
| | #8 (permalink) |
![]() Join Date: Jul 2005 Location: Coffs H, Australia
Posts: 3,456
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() | 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;
}
__________________ Free Forums / GoDaddy Coupon Codes (NEW DOMAIN!) / Free Arcade Script / <?='Your computer is '.(1?fine:broken).'.'?> |
| | |
| | THREAD STARTER #9 (permalink) |
| NamePros Regular Join Date: Mar 2006 Location: USA
Posts: 497
![]() ![]() | 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> Code: $(document).ready(function(){ |
| | |
| | #12 (permalink) |
![]() Join Date: Jul 2005 Location: Coffs H, Australia
Posts: 3,456
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() | Probably yet another person just spamming their sig links. It pays to make useless posts every so often i guess.
__________________ Free Forums / GoDaddy Coupon Codes (NEW DOMAIN!) / Free Arcade Script / <?='Your computer is '.(1?fine:broken).'.'?> |
| | |
| | #14 (permalink) | ||||
| NamePros Member Join Date: Nov 2009
Posts: 142
![]() ![]() |
<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 | ||||
| | |
| | #16 (permalink) |
| NamePros Member Join Date: Jan 2011
Posts: 36
![]() | i also found my solution with this discussion thanks to you all
__________________ iPhone Application Development | Facebook Application Development | Web Application Developer |
| | |
| | #17 (permalink) |
| Your face is regfee! Join Date: May 2008 Location: Oregon
Posts: 1,069
![]() ![]() ![]() ![]() ![]() ![]() ![]() | 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 |
| | |
![]() |
| 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 |