Form Submission Without Reload

[snike]

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!

 

[yeppers]

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.

 

[RLW]

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/ .

 

[baxter]

Yes you'll want to do something along these lines, using jquery:

$(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;
});
});

 

[snike]

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?:

form.closest('div')
.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.

 

[baxter]

Hey snike,

In the first post you stated:

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:

<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.

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

 

[snike]

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.

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!

 

[yeppers]

At the end of the function block.

So, this should work:

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;
}

 

[snike]

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

<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.

$(document).ready(function(){

Thanks!

 

[pausch]

JavaScript is reliable to use for separate form pages.

 

[snike]

umm okay?

 

[yeppers]

Probably yet another person just spamming their sig links. It pays to make useless posts every so often i guess.

 

[snike]

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

Thanks.

 

[smghost001]

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

<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.

$(document).ready(function(){

Thanks!

Try this:

<a href="javascript: void(0)" onclick="switchContent('URL HERE')">text here</a>

 

[snike]

It works! Thank you so much!

 

[kevin smith 619]

i also found my solution with this discussion thanks to you all

 

[yilduz]

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.