submit form without refreshing

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!
RefaelAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
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
 
COBOLdinosaurCommented:
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
 
duncanb7Commented:
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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
RefaelAuthor Commented:
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
 
duncanb7Commented:
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
 
RefaelAuthor Commented:
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
 
duncanb7Commented:
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
 
RefaelAuthor Commented:
duncanb7 is does not work now it just refresh the parent page to the process page.
0
 
duncanb7Commented:
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
 
COBOLdinosaurConnect With a Mentor Commented:
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
 
RefaelAuthor Commented:
COBOLdinosaur do not harsh with me please :-)

so you say that the only way is iframe? what should the iframe wrap ?
0
 
COBOLdinosaurCommented:
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
 
GaryConnect With a Mentor Commented:
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
 
Chris StanyonCommented:
I'm with Gary - the normal way of doing this is to submit it using AJAX - very easy to do in jQuery.
0
 
RefaelAuthor Commented:
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
 
GaryCommented:
0
 
RefaelAuthor Commented:
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
 
RefaelAuthor Commented:
My special thanks to all of you guys!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.