Solved

submit form without refreshing

Posted on 2013-11-17
18
954 Views
Last Modified: 2013-11-17
Hello Experts,

I made a simple kontakt-form with some jquery code.
This form and its code is in a single page which i am including to few of the pages in the site using the php include function.

e.g. "<?php include("form.php"); ?>"

The problem is that when the user submits the form or if the form have has errors it refreshes the "parent" page.

How it is possible to prevent the "parent" page from being refreshed?

Thanks guys!
0
Comment
Question by:Refael
  • 7
  • 4
  • 3
  • +2
18 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39654650
Put the form in a iframe, then only the form gets refreshed when you submit it.  This will only work if all the pages carrying the form in an iframe are served from the same domain.

Cd&
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 39654651
Did you use onsubmit on form ? if yes, did you put 'return false' on the form ?

<form action="/dosomething.htm" method="GET" onsubmit="submitmyform();return false">
  [...]
  <input type="submit" value="Go">
</form>

it might NOT  be easy to solve the issue if we don't have form.php code inside
0
 

Author Comment

by:Refael
ID: 39654657
Hi Guys,

The form is in php also the pages in the site are in php (.php)
The form is a self submit:

e.g. "<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" name="contactForm" id="contactForm">"

I do not understand what i should so?
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 39654662
Could you split it into two php ?


one is form.php and other is response.php

in action in form.php which will call response.php (action=http://yousite.com/response.php)

And check whether it will help or not

the issue may be caused by PHP_SELF

Duncan
0
 

Author Comment

by:Refael
ID: 39654666
Hi duncanb7

so to understand what you mean....

page 1:  contains the form
page 2: contains the php form process
page 3: has the include of page 1

you think that this will help?
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 39654673
page 1:  contains  your parent or top page (parent.html)
with <? php include("form.php") ?>

page 2: form.php
page 3: contains response.php which is called by action in form.php

For what my understanding , it will help on it ,  but not sure
since we don't have your all page code.

just try it and no need to hurry up , in the same time, you can
find out more interesting php knowlegde

Duncan
0
 

Author Comment

by:Refael
ID: 39654679
duncanb7 is does not work now it just refresh the parent page to the process page.
0
 
LVL 13

Expert Comment

by:duncanb7
ID: 39654682
your code is big ? could you send it to us and I can try it at my side

if still not working, it may  go to COBOLdinosaur's iframe suggestion

Just up to you, you may do COBOLdinosaur's iframe suggestion first

Duncan
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 167 total points
ID: 39654687
As long as the form is included directly in the parent page it is not going to do what you want.  If the foem is in an iframe, then the browser creates a separate window object and the form submission will only update the iframe.

Or you can continue to waste yor time trying to re-invent how a browser works.

Cd&
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:Refael
ID: 39654697
COBOLdinosaur do not harsh with me please :-)

so you say that the only way is iframe? what should the iframe wrap ?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39654713
I am not harsh with you; I am giving you a chance to learn some of what I know.  If you are that thin skinned you are probably not going to like working with me.  

The source of the iframe should be form.php, but you may need to add some additional structure so it can be standalone, depending on how much structural and presentation it is inheriting from the parent.

If it is being used in many different pages you need it to be self-contained anyway.  I can't get much more specific than that with out a link to a page using it.

Cd&
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 166 total points
ID: 39654727
Since you have jQuery in your topics you can prevent the FORM's default submit action.
Then with jQuery Serialize along with AJAX post the form values to your receiving page.
And add in any error checking.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39654791
I'm with Gary - the normal way of doing this is to submit it using AJAX - very easy to do in jQuery.
0
 

Author Comment

by:Refael
ID: 39654799
Thanks guys,

Is there a simple example somewhere? this should be very simple as there are only 4 input fields and from these 4 only 2 are required.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39654806
0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 167 total points
ID: 39654810
This is a very straigt forward block of code to send your form through an AJAX request. Your PHP script will need to deal with ther POST array in the normal manner. Whatever gets output from your script will be dropped in to element with an ID of 'response'.
$('#yourForm').submit(function(e) {
   e.preventDefault();
   $.ajax({
      url: $(this).attr('action'),
      data: $(this).serialize(),
      type: 'POST'
   }).done(function(response) {
      //do something with the response
      $('#response').html(response);
   });
});

Open in new window

0
 

Author Comment

by:Refael
ID: 39654823
Thank you guys so much.

I worked around the first solution so simply use an iframe and it seem to work fine.
I guess that the more professional approach would be using AJAX as ChrisStanyon show above which seem to be pretty much easy to implement.

Thank you all very much!
0
 

Author Closing Comment

by:Refael
ID: 39654830
My special thanks to all of you guys!!!
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

757 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