Form submit with AJAX passing form data to PHP without page refresh

Question

Can anyone tell me why this bit of code isn t working    lt html gt     lt head gt       lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt       lt script gt          function                 form   bind  submit   function                  ajax               type   post               url   post php               data     form   serialize                success  function                    alert  form was submitted                                          return false                             lt  script gt     lt  head gt     lt body gt       lt form gt         lt input name  time  value  00 00 00 00  gt  lt br gt         lt input name  date  value  0000-00-00  gt  lt br gt         lt input name  submit  type  button  value  Submit  gt       lt  form gt     lt  body gt   lt  html gt    When I push submit nothing happens  In the receiving php file I m using   POST  time   and   POST  date   to put the data in a mysql query but it s just not getting the data  Any suggestions  I m assuming it s something to do with the submit button but I can t figure it out

User · Answer

JS Code   lt script type  text javascript  src  http   ajax googleapis com ajax    libs jquery 1 3 0 jquery min js  gt   lt  script gt    lt script type  text javascript   gt      function           submit   click function       var time       time   val      var date       date   val      var dataString    time    time     amp date     date   if time        date              success   fadeOut 200  hide          error   fadeOut 200  show      else       ajax       type   POST       url   post php       data  dataString      success  function             success   fadeIn 200  show             error   fadeOut 200  hide                  return false           lt  script gt    HTML Form      lt form gt         lt input id  time  value  00 00 00 00  gt  lt br gt         lt input id  date  value  0000-00-00  gt  lt br gt         lt input name  submit  type  button  value  Submit  gt       lt  form gt   lt span class  error  style  display none  gt  Please Enter Valid Data lt  span gt   lt span class  success  style  display none  gt  Form Submitted Success lt  span gt   lt  div gt    PHP Code   lt  php if   POST     date   POST  date     time   POST  time    mysql query  SQL insert statement            else        gt    Taken From Here

User · Answer

lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt   lt script type  text javascript   gt      function              submit   click function  event          var time       time   val          var date       date   val          var dataString    time     time     amp date     date        console log dataString         if  time          date                            success   fadeOut 200  hide                error   fadeOut 200  show            else                   ajax             type   POST             url   post php             data  dataString            success  function  data                    success   fadeIn 200  show                    error   fadeOut 200  hide                    data   html data                                         event preventDefault                   lt  script gt   lt form action  post php  method  POST  gt     lt input id  time  value    gt  lt br gt     lt input id  date  value    gt  lt br gt     lt input name  submit  type  button  value  Submit  class  submit  gt   lt  form gt   lt div id  data  gt  lt  div gt   lt span class  error  style  display none  gt  Please Enter Valid Data lt  span gt   lt span class  success  style  display none  gt  Form Submitted Success lt  span gt    lt  php  print r   POST   if    POST  date         date     POST  date       time     POST  time      echo   lt h1 gt      date    ---     time     lt  h1 gt      else        gt

User · Answer

type  button   should be   type  submit

User · Answer

document  ready function        userForm   on  submit   function e           e preventDefault      I had an issue that the forms were submitted in geometrical progression after the next submit      This solved the problem          e stopImmediatePropagation           show that something is loading         response   html   lt b gt Loading data    lt  b gt             Call ajax for pass data to other place       ajax       type   POST       url   somephpfile php       data    this  serialize      getting filed value in serialize form             done function data      if getting done then call          show the response         response   html data                fail function        if fail then getting message         just in case posting your form failed     alert   Posting failed                       to prevent refreshing the whole page page     return false

User · Answer

JS Code          submit   click function            get input field values     var name                  name   val         var email                 email   val        var message               comment   val        var flag   true               validate all our form fields                    Name field validation         if name                    name   css  border-color   red             flag   false               email field validation         if email                    email   css  border-color   red             flag   false                message field validation        if message                     comment   css  border-color   red             flag   false                     Validation end here              If all are ok then we send ajax request to email send php              if flag                   ajax               type   post               url   email send php                dataType   json               data   username   name   amp useremail   email   amp message   message              beforeSend  function                         submit   attr  disabled   true                       submit   after   lt span class  wait  gt  amp nbsp  lt img src  image loading gif  alt      gt  lt  span gt                                complete  function                         submit   attr  disabled   false                       wait   remove                                 success  function data                                if data type     error                                         output     lt div class  error  gt   data text   lt  div gt                     else                      output     lt div class  success  gt   data text   lt  div gt                           input type text    val                               contactform textarea   val                                              result   hide   html output  slideDown                                                         reset previously set border colors and hide all message on  keyup       contactform input   contactform textarea   keyup function              contactform input   contactform textarea   css  border-color                result   slideUp          HTML Form   lt div  class  cover  gt   lt div id  result  gt  lt  div gt   lt div id  contactform  gt       lt p class  contact  gt  lt label for  name  gt Name lt  label gt  lt  p gt       lt input id  name  name  name  placeholder  Yourname  type  text  gt        lt p class  contact  gt  lt label for  email  gt Email lt  label gt  lt  p gt       lt input id  email  name  email  placeholder  admin admin com  type  text  gt        lt p class  contact  gt  lt label for  comment  gt Your Message lt  label gt  lt  p gt       lt textarea name  comment  id  comment  tabindex  4  gt  lt  textarea gt   lt br gt       lt input name  submit  id  submit  tabindex  5  value  Send Mail  type  submit  style  width 200px   gt   lt  div gt     PHP Code  if    SERVER  REQUEST METHOD       POST        check if its an ajax request  exit if not if   isset   SERVER  HTTP X REQUESTED WITH    AND strtolower   SERVER  HTTP X REQUESTED WITH        xmlhttprequest            exit script outputting json data      output   json encode              array                   type    gt   error                    text    gt   Request must come from Ajax               die  output        check   POST vars are set  exit if any missing if   isset   POST  username        isset   POST  useremail        isset   POST  message            output   json encode array  type    gt   error    text    gt   Input fields are empty          die  output        Sanitize input data using PHP filter var     username   filter var trim   POST  username     FILTER SANITIZE STRING    useremail   filter var trim   POST  useremail     FILTER SANITIZE EMAIL    message   filter var trim   POST  message     FILTER SANITIZE STRING      additional php validation if  strlen  username   lt  4       If length is less than 4 it will throw an HTTP error       output   json encode array  type    gt   error    text    gt   Name is too short          die  output     if   filter var  useremail  FILTER VALIDATE EMAIL       email validation      output   json encode array  type    gt   error    text    gt   Please enter a valid email          die  output     if  strlen  message   lt  5      check emtpy message      output   json encode array  type    gt   error    text    gt   Too short message          die  output       to    info wearecoders net     Replace with recipient email address   proceed with PHP email   headers    From       useremail          r n             Reply-To       useremail          r n             X-Mailer  PHP     phpversion      sentMail    mail  to   subject   message      -     username   headers      sentMail   true  if    sentMail         output   json encode array  type    gt   error    text    gt   Could not send mail  Please contact administrator          die  output     else        output   json encode array  type    gt   message    text    gt   Hi      username     Thank you for your email         die  output       This page has a simpler example http   wearecoders net submit-form-without-page-refresh-with-php-and-ajax

User · Answer

Here is a nice plugin for jQuery that submits forms via ajax    http   malsup com jquery form   its as simple as    lt script src  http   malsup github com jquery form js  gt  lt  script gt    lt script gt         document  ready function                  myForm   ajaxForm function                 alert  form was submitted                           lt  script gt     It uses the forms action for the post location  Not that you can t achieve this with your own code but this plugin has worked very nicely for me

User · Answer

lt div class  container  gt          lt div class  row  gt           lt div class  col-md-3 col-sm-6 col-xs-12  gt  lt  div gt enter code here            lt div class  col-md-6 col-sm-6 col-xs-12  gt             lt div class  msg  gt  lt  div gt               lt form method  post  class  frm  id  form1  onsubmit    gt                  lt div class  form-group  gt                  lt input type  text  class  form-control  name  fname  id  fname  placeholder  enter your first neme  required gt              lt  -- gt  lt span class  sp  gt  lt  php   echo  f err   gt  lt  span gt  lt  -- gt             lt  div gt           lt div class  form-group  gt                  lt input type  text  class  form-control  name  lname  id  lname  placeholder  enter your last neme  required gt                 lt  -- gt  lt span class  sp  gt  lt  php   echo  l err   gt  lt  span gt  lt  -- gt                lt  div gt                 lt div class  form-group  gt                  lt input type  text  class  form-control  name  email  id  email  placeholder  enter your email Address  required gt                 lt  -- gt  lt span class  sp  gt  lt  php   echo  e err   gt  lt  span gt  lt  -- gt                lt  div gt                lt div class  form-group  gt                  lt input type  number  class  form-control  name  mno  id  mno  placeholder  enter your mobile number  required gt                 lt  -- gt  lt span class  sp  gt  lt  php   echo  m err   gt  lt  span gt  lt  -- gt                lt  div gt                 lt div class  form-group  gt                  lt input type  password  class  form-control  name  pass  id  pass  pattern        a-z        A-Z    4 8   placeholder  enter your Password  required gt                 lt  -- gt  lt span class  sp  gt  lt  php   echo  p err   gt  lt  span gt  lt  -- gt                lt  div gt                 lt div class  radio  gt                  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  lt input type  radio  value  male  name  gender  id  gender  checked gt male lt br gt                  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  lt input type  radio  value  female  name  gender  id  gender  gt female lt br gt                  amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  lt input type  radio  value  other  name  gender  id  gender  gt other lt br gt                                            lt  -- gt  lt span class  sp  gt   lt  php   echo  r err   gt  lt  span gt  lt  -- gt                lt  div gt                   lt div class  checkbox  gt                     amp nbsp  amp nbsp  amp nbsp  amp nbsp  amp nbsp  lt input type  checkbox  name  check  id  check  checked gt I Agree Turms amp Condition lt br gt                      lt  -- gt  lt span class  sp  gt   lt  php   echo  c err   gt  lt  span gt  lt  -- gt                    lt  div gt                    lt input type  submit   class  btn btn-warning  name  submit  id  submit  gt                lt  form gt enter code here             lt  div gt                  lt div class  col-md-3 col-sm-6 col-xs-12  gt  lt  div gt            lt  div gt         lt  div gt

User · Answer

lt html gt     lt head gt       lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt       lt script gt          function                 form   bind  click   function  event               using this page stop being refreshing          event preventDefault                 ajax               type   POST               url   post php               data     form   serialize                success  function                    alert  form was submitted                                                           lt  script gt     lt  head gt     lt body gt       lt form gt         lt input name  time  value  00 00 00 00  gt  lt br gt         lt input name  date  value  0000-00-00  gt  lt br gt         lt input name  submit  type  submit  value  Submit  gt       lt  form gt     lt  body gt   lt  html gt    PHP   lt  php  if isset   POST  date       isset   POST  time        time      date     if isset   POST  time      time   POST  time    if isset   POST  date      date   POST  date     echo  time   lt br gt    echo  date      gt

User · Answer

The form is submitting after the ajax request    lt html gt     lt head gt       lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt       lt script gt          function                  form   on  submit   function  e               e preventDefault                 ajax               type   post               url   post php               data     form   serialize                success  function                    alert  form was submitted                                                             lt  script gt     lt  head gt     lt body gt       lt form gt         lt input name  time  value  00 00 00 00  gt  lt br gt         lt input name  date  value  0000-00-00  gt  lt br gt         lt input name  submit  type  submit  value  Submit  gt       lt  form gt     lt  body gt   lt  html gt

User · Answer

In event handling  pass the object of event to the function and then add statement i e  event preventDefault     This will pass data to webpage without refreshing it

[php] Form submit with AJAX passing form data to PHP without page refresh

Examples related to php

Examples related to jquery

Examples related to ajax

Examples related to forms

Examples related to serialization