Submit form without page reloading

Question

I have a classifieds website  and on the page where ads are showed  I am creating a  Send a tip to a friend  form     So anybody who wants can send a tip of the ad to some friends email-adress   I am guessing the form must be submitted to a php page right    lt form name  tip  method  post  action  tip php  gt  Tip somebody   lt input name  tip email  type  text  size  30  onfocus  tip div 1    onblur  tip div 2     gt    lt input type  submit  value  Skicka Tips   gt    lt input type  hidden  name  ad id    gt    lt  form gt    When submitting the form  the page gets reloaded    I don t want that     Is there any way to make it not reload and still send the mail  Preferrably without ajax or jquery     Thanks

User · Answer

if you re submitting to the same page where the form is you could write the form tags with out an action and it will submit  like this   lt form method  post  gt   lt  -- you can see there is no action here-- gt

User · Answer

Have you tried using an iFrame  No ajax  and the original page will not load   You can display the submit form as a separate page inside the iframe  and when it gets submitted the outer container page will not reload  This solution will not make use of any kind of ajax

User · Answer

The page will get reloaded if you don t want to use javascript

User · Answer

function Foo         event preventDefault        ajax              url   lt  php echo base url     gt Controllername ctlr function         type  POST         data  email       email   val          success function msg                    alert  You are subscribed                          I tried many times for a good solution and answer by  taufique helped me to arrive at this answer   NB   Don t forget to put    event preventDefault     at the beginning of the body of the function

User · Answer

You can try setting the target attribute of your form to a hidden iframe  so the page containing the form won t get reloaded   I tried it with file uploads  which we know can t be done via AJAX   and it worked beautifully

User · Answer

It s a must to take help of jquery-ajax in this case  Without ajax  there is currently no solution   First  call a JavaScript function when the form is submitted  Just set onsubmit  func     Even if the function is called  the default action of the submission would be performed  If it is performed there would be no way of stoping the page from refreshing or redirecting  So  next task is to prevent the default action  Insert the following line at the start of func     event preventDefault     Now  there will be no redirecting or refreshing  So  you simply make an ajax call from func   and do whatever you want to do when call ends   Example   Form    lt form id  form-id  onsubmit  func    gt       lt input id  input-id  type  text  gt   lt  form gt    Javascript   function func        event preventDefault        var newValue       input-field-id   val          ajax           type   POST           url                 data                 datatype   JSON           success  function data                error  function

User · Answer

I don t know JavaScript and I just started to learn PHP  so what helped for me from all those responses was   Create inedx php and insert    lt iframe name  quot email quot  style  quot  quot  gt  lt  iframe gt   lt form action  quot email php quot  method  quot post quot  target  quot email quot  gt   lt input type  quot email quot  name  quot email quot   gt   lt input type  quot submit quot  name  quot Submit quot  value  quot Submit quot  gt   lt  form gt    Create email php and insert this code to check if you are getting the data  you should see it on index php in the iframe         lt  php     if  isset   POST  Submit           email     POST  email        echo  email              gt    If everything is ok  change the code on email php to        lt  php     if  isset   POST  Submit           to     POST  email         subject    quot Test email quot        message    quot Test message quot        headers    quot From  test test com  r n quot        headers     quot Reply-To  test test com  r n quot        headers     quot MIME-Version  1 0 r n quot        headers     quot Content-Type  text html  charset ISO-8859-1 r n quot            mail  to   subject   message   headers               gt   Hope this helps for all other rookies like me

User · Answer

You ll need to submit an ajax request to send the email without reloading the page  Take a look at http   api jquery com jQuery ajax   Your code should be something along the lines of       submit   click function           ajax           url   send email php           type   POST           data                email   email example com               message   hello world                      success  function msg                alert  Email Sent                                           The form will submit in the background to the send email php page which will need to handle the request and send the email

User · Answer

You will need to use JavaScript without resulting to an iframe  ugly approach    You can do it in JavaScript  using jQuery will make it painless   I suggest you check out AJAX and Posting

User · Answer

You either use AJAX or you   create and append an iframe to the document set the iframes name to  foo  set the forms target to  foo  submit have the forms action render javascript with  parent notify       to give feedback optionally you can remove the iframe

User · Answer

I ve found what I think is an easier way   If you put an Iframe in the page  you can redirect the exit of the action there and make it show up  You can do nothing  of course  In that case  you can set the iframe display to none    lt iframe name  votar  style  display none   gt  lt  iframe gt   lt form action  tip php  method  post  target  votar  gt       lt input type  submit  value  Skicka Tips  gt       lt input type  hidden  name  ad id  value  2  gt               lt  form gt

User · Answer

This should solve your problem In this code after submit button click we call jquery ajax and we pass url to posttype POST GET data  data information you can select input fields or any other  sucess  callback if everything is ok from server function parameter text  html or json  response from server  in sucess you can write write warnings if data you got is in some kind of state and so on  or execute your code what to do next     lt form id  tip  gt  Tip somebody   lt input name  tip email  id  tip email  type  text  size  30  onfocus  tip div 1    onblur  tip div 2     gt    lt input type  submit  id  submit  value  Skicka Tips   gt    lt input type  hidden  id  ad id  name  ad id    gt    lt  form gt   lt script gt       tip    submit function  e         e preventDefault          ajax           url  tip php          type  POST           data                        tip email      tip email   val                ad id      ad id   val                      success  function msg                         alert  Email Sent                                          lt  script gt

User · Answer

Submitting Form Without Reloading The Page And Get Result Of Submitted Data In The Same Page Here s some of the code I found on the internet that solves this problem   1   IFRAME When the form is submitted  The action will be executed and target the specific iframe to reload  index php  lt iframe name  quot content quot  style  quot  quot  gt   lt  iframe gt   lt form action  quot iframe content php quot  method  quot post quot  target  quot content quot  gt   lt input type  quot text quot  name  quot Name quot  value  quot  quot  gt   lt input type  quot submit quot  name  quot Submit quot  value  quot Submit quot  gt   lt  form gt   iframe content php  lt  php if  isset   POST  Submit       Name     POST  Name    echo  Name      gt   2   AJAX Index php      lt script src  quot https   cdnjs cloudflare com ajax libs jquery 3 3 1 core js quot  gt       lt  script gt       lt script type  quot text javascript quot  gt      function clickButton        var name document getElementById  name   value      var descr document getElementById  descr   value        ajax               type  quot post quot               url  quot server action php quot               data                                   name   name                  descr   descr                            cache false              success  function  html                                alert  Data Send                       msg   html html                                             return false              lt  script gt       lt form  gt       lt input type  quot  quot  name  quot name quot  id  quot name quot  gt       lt input type  quot  quot  name  quot descr quot  id  quot descr quot  gt       lt input type  quot submit quot  name  quot  quot  value  quot submit quot  onclick  quot return clickButton    quot  gt       lt  form gt       lt p id  quot msg quot  gt  lt  p gt   server action php  lt  php   name     POST  name     descr     POST  descr      echo  name  echo  descr     gt   Tags  phpajaxjqueryserversidehtml

User · Answer

this is exactly how it CAN work without jQuery and AJAX and it s working very well using a simple iFrame  I LOVE IT  works in Opera10  FF3 and IE6  Thanks to some of the above posters pointing me the right direction  that s the only reason I am posting here    lt select name  aAddToPage 65654    onchange       if  bCanAddMore            addToPage 65654 this             else           alert  Could not add another  wait until previous is added              this options 0  selected   true             gt   lt option value    gt Add to page   lt  option gt   more options with values here  lt  select gt    lt script type  text javascript  gt  function addToPage iProduct  oSelect       iPage   oSelect options oSelect selectedIndex  value      if  iPage                  bCanAddMore   false          window hiddenFrame document formFrame iProduct value   iProduct          window hiddenFrame document formFrame iAddToPage value   iPage          window hiddenFrame document formFrame submit            var bCanAddMore   true  lt  script gt     lt iframe name  hiddenFrame  style  display none   src  frame php p addProductToPage  onload  bCanAddMore   true   gt  lt  iframe gt    the php code generating the page that is being called above   if    GET  p       addProductToPage         hidden form processing   if  empty   POST  iAddToPage                do something with it          print        lt html gt           lt body gt               lt form name  formFrame  id  formFrameId  style  display none   method  POST  action  frame php p addProductToPage   gt                   lt input type  hidden  name  iProduct  value      gt                   lt input type  hidden  name  iAddToPage  value      gt               lt  form gt           lt  body gt       lt  html gt

User · Answer

Fastest and easiest way is to use an iframe  Put a frame at the bottom of your page    lt iframe name  frame  gt  lt  iframe gt   And in your form do this    lt form target  frame  gt   lt  form gt    and to make the frame invisible in your css   iframe    display  none

User · Answer

A further possibility is to make a direct javascript link to your function    lt form action  javascript your function     method  post  gt

User · Answer

Here is some jQuery for posting to a php page and getting html back      form   submit function           post  tip php   function html              do what you need in your success callback           return false

User · Answer

I did something similar to the jquery above  but I needed to reset my form data and graphic attachment canvases  So here is what I came up with        lt script gt       document  ready function            text only radio button id   click function               single pic div   hide               multi pic div   hide                   pic radio button id   click function              single pic div   show              multi pic div   hide                    gallery radio button id   click function               single pic div   hide               multi pic div   show                                 my Submit button ID   click function                   single pic div   hide                  multi pic div   hide              var url    script the form gets posted to php              ajax          type   POST          url  url         data      html form id   serialize            success  function             document getElementById  html form id   reset               var canvas document getElementById  canvas        var canvasA document getElementById  canvasA        var canvasB document getElementById  canvasB        var canvasC document getElementById  canvasC        var canvasD document getElementById  canvasD                   var ctx canvas getContext  2d                  var ctxA canvasA getContext  2d                  var ctxB canvasB getContext  2d                  var ctxC canvasC getContext  2d                  var ctxD canvasD getContext  2d                   ctx clearRect 0  0 480 480                  ctxA clearRect 0  0 480 480                  ctxB clearRect 0  0 480 480                          ctxC clearRect 0  0 480 480                  ctxD clearRect 0  0 480 480                                   return false                                         lt  script gt    That works well for me  for your application of just an html form  we can simplify this jquery code like this           lt script gt            document  ready function             my Submit button ID   click function             var url     script the form gets posted to php            ajax          type   POST          url  url         data      html form id   serialize            success  function             document getElementById  html form id   reset                                 return false                                         lt  script gt

[javascript] Submit form without page reloading

Examples related to javascript

Examples related to php

Examples related to html

Examples related to ajax

Examples related to forms