Solved

Submit form to SELF without refreshing

Posted on 2010-11-25
9
1,152 Views
Last Modified: 2012-05-10
Hi Experts,

A really simple concept. I have looked everywhere for some solution similar to mine but havent really figured a way out unfortunately.

Basically i have a page called form.php in which i have 2 functions being called via php
 <?php if (!isset($_POST['submit'])){?>    
            
       		<?php show_form();?>
         
         <?php } else {?>
         	
           <?php output_form(); ?>
         
         <?php }?>

Open in new window


Basically if form is not submitted it outputs the form function (show_form()) and if it has been submitted then it ouputs a function which outputs the user inputed values (ouput_form()).

All is working fine. But when i submit the form it refreshes the page. I want it submit the form so that the page dosent refresh. Everything is being processed and outputted on the same page.

Any pointers or guidlines will be GREATLY appreciated

Thanks
 
0
Comment
Question by:ACEAFTY
  • 3
  • 2
  • 2
  • +2
9 Comments
 
LVL 12

Expert Comment

by:HugoHiasl
ID: 34212036
If you don't want to refresh the page that you submit to, why do then submit to it?

If you want only some background work done without feedback to the user, you could submit to an invisible frame.
0
 
LVL 1

Author Comment

by:ACEAFTY
ID: 34212103
I would want the user to submit as he will see the result. And the result will be a HTML template with his input showing in a certain way. So the user has to click on submit basically a preview button. But the preview should show up without a refresh..

I might be able to be interested in the frame but how to go about that. If you have a link i would appreciate the resource :)

Thanks
0
 
LVL 2

Accepted Solution

by:
marceloOrigoni earned 250 total points
ID: 34212447
You should use some of the javascript libraries, I personally prefer mootools, but jQuery, Dojo, prototype can do it as well.

 Marcelo
0
 
LVL 13

Assisted Solution

by:darren-w-
darren-w- earned 250 total points
ID: 34212498
Hi,

there are a few simple methods you can used with Jquery, the most simplest would be the load() method, but also there is the ajax() method too, you would simply detect the button being pressed returning false and calling the method then your form, outputting the returned content into a div on the page.

Darren

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 108

Expert Comment

by:Ray Paseur
ID: 34212988
You can create the effect of a page that does not refresh with jQuery.

But I've just got to ask - why would you go to the effort?  The client fills in a form and clicks "submit" - and the HTML form sends the data to the URL in the action= attribute of the <form> tag, and a new page appears.  It's been like that on the WWW for almost 20 years, and it still works well today.  Most importantly, you can get your application working instantly if you use the tried and true methods.
0
 
LVL 2

Expert Comment

by:marceloOrigoni
ID: 34213394
 Yeah, why are we going to use html 5, and css 3, let's go back to plain HTML3, and let's make designs full of tables.
 Because you need to reload a 20KB site, when you can only load a 1KB file.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 34213458
Reload a 20KB site?  Sure - why not?  You will have little difference in page load time versus a 1KB file.  It's a lot easier to write code that works when you use techniques that work.  I doubt that there is any harm in reloading a 20KB site, especially when compared to losing days of your life trying to debug something that you don't already understand!

I'm not a luddite, and I don't have any objection to progress - including HTML5 and CSS3.  I use tables for tabular data, but not for design (and I'm not really much of a designer, anyway).  But I do believe in taking the path of least resistance.

Best to all, over and out, ~Ray
0
 
LVL 1

Author Comment

by:ACEAFTY
ID: 34216821
The reason i would really like this feature is because on the form the user will be adding additional input fields to the form using jquery. On a refresh these would dissapear and if the user wanted to come back to RE-EDIT the form then those fields would dissapear due to the refresh.

Maybe i am going it about the wrong way. Which is why i would like to have pointers. The reason i was finding ajax a problem was because on the ajax call every example i have seen is the process being called from an external php file, rather than for a form being submitted to itself.

I have come with a temporary solution. Making the form target set to "_blank" hence output opening in another page without refreshing the current form. Thanks for everyones input
0
 
LVL 1

Author Closing Comment

by:ACEAFTY
ID: 34237890
Was not as simple as expected.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Centering Vertically 3 28
How do I put a session for a radio button? 4 14
WP_Query multiple custom taxonomies 5 28
using php variable inside javascript 5 16
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now