Form Submission without page refresh

Question

Maybe someone can assist me with this little issue I m having  I m trying to submit this form without a page refresh   But it will skip the post and go directly to the ajax call   I think I miss understood the preventDefault    I have searched online but unable to locate what I need for this  Your help would greatly be appreciated or point to another form submission   HTML below     lt  DOCTYPE html gt    lt html gt   lt head gt   lt title gt AJAX   Project lt  title gt    lt link href  project css  rel  stylesheet   gt    lt script src  jquery js  gt  lt  script gt      lt  head gt    lt body gt     lt div id  mainCon  gt      lt h1 gt Contact Book lt  h1 gt   lt div id  form input  gt   lt form id  myform  method  post     action  addrecord php  gt        lt label for  fullname  gt Name  lt  label gt       lt input type  text  name  fullname  id  fullname   gt  lt span id  NameError  gt     lt  span gt       lt br  gt       lt label for  phonenumber  gt Phone Number  lt  label gt       lt input type  text  id  phonenumber  name  phonenumber  gt  lt span   id  PhoneError  gt  lt  span gt        lt br   gt    lt input id  buttton  type  submit  onClick  addnumber    value  Add Phone   Number   gt       lt input type  button  id  show  value  the Results   gt    lt  form gt     lt  div gt        lt div id  form output  gt         lt  div gt     lt  div gt    lt script src  project js  gt  lt  script gt    lt script type  text javascript  gt    function addnumber      var Fullname   document getElementById  fullname   value  var Phonenumber   document getElementById  phonenumber   value      if Fullname         document getElementById  NameError   innerHTML    Please Enter a valided Name      if Phonenumber         document getElementById  PhoneError   innerHTML    Please Enter a valided Name          lt  script gt   lt  body gt   lt  html gt    jquery     document   ready function              buttton   click function                  myform   submit function  e                e preventDefault                  ajax                   url   listrecord php                   type   GET                   data   data                   success  function  data                            form output   html data                                      error  function  jXHR  textStatus  errorThrown                        alert errorThrown                                        AJAX Get Jquery statment                        Click effect            Begin of Jquery Statement

User · Answer

The problem is the Method  POST  your form is submitting by using the  post  method  and in the AJAX you are using  GET

User · Answer

Just catch the submit event and prevent that  then do ajax    document  ready function              myform   on  submit   function e            e preventDefault              ajax               url     this  attr  action      window location pathname              type   GET               data    this  serialize                success  function  data                        form output   html data                              error  function  jXHR  textStatus  errorThrown                    alert errorThrown

User · Answer

lt script type  text javascript  gt      var frm       myform        frm submit function  ev              ajax               type  frm attr  method                url  frm attr  action                data  frm serialize                success  function  data                    alert  ok                                       ev preventDefault             lt  script gt    lt form id  myform  action   your url  method  post  gt           lt  form gt

User · Answer

lt  -- index php -- gt       lt  DOCTYPE html gt       lt html gt       lt head gt           lt script src  https   ajax googleapis com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt       lt  head gt       lt body gt       lt form id  myForm  gt           lt input type  text  name  fname  id  fname   gt           lt input type  submit  name  click  value  button    gt       lt  form gt       lt script gt        document  ready function                function                    myForm   submit function event                   event preventDefault                      ajax                       method   POST                       url   submit php                       dataType   json                       contentType   application json                       data       myForm   serialize                        success  function data                           alert data                                              error  function xhr  desc  err                           console log err                                                                                      lt  script gt       lt  body gt       lt  html gt   lt  -- submit php -- gt   lt  php  value   call   header  Content-Type  application json    echo json encode  value     gt

[javascript] Form Submission without page refresh

Examples related to javascript

Examples related to php

Examples related to jquery

Examples related to ajax

Examples related to forms