Submitting HTML form using Jquery AJAX

Question

Im trying to submit a HTML form using AJAX using this example   My HTML code    lt form id  formoid  action  studentFormInsert php  title    method  post  gt       lt div gt           lt label class  title  gt First Name lt  label gt           lt input type  text  id  name  name  name   gt       lt  div gt       lt div gt           lt label class  title  gt Name lt  label gt           lt input type  text  id  name2  name  name2   gt       lt  div gt       lt div gt           lt input type  submit  id  submitButton   name  submitButton  value  Submit  gt       lt  div gt   lt  form gt    My script    lt script type  text javascript  gt        document  ready function                  formoid   ajaxForm function                  alert  Thank you for your comment                            lt  script gt    This is not working  I m not even getting the alert message and when I submit I don t want to redirect to another page  I just want to show the alert message   Is there a simple way of doing it   PS  I have several fields  I have just put two as an example

User · Answer

If you add   jquery form min js  You can simply do this   lt script gt      myform   ajaxForm function response      alert response           this will register the AJAX for  lt form id  quot myform quot  action  quot some url quot  gt     and when you submit the form using  lt button type  quot submit quot  gt  or    myform   submit    then it will send your request and alert response  lt  script gt    NOTE  You could use simple    FORM   serialize   as suggested in post above  but that will not work for FILE INPUTS    ajaxForm   will

User · Answer

var postData    text           ajax               type   post               url   url               data  postData              contentType   application x-www-form-urlencoded               success  function responseData  textStatus  jqXHR                    alert  data saved                              error  function jqXHR  textStatus  errorThrown                    console log errorThrown

User · Answer

Quick Description of AJAX AJAX is simply Asyncronous JSON or XML  in most newer situations JSON    Because we are doing an ASYNC task we will likely be providing our users with a more enjoyable UI experience   In this specific case we are doing a FORM submission using AJAX  Really quickly there are 4 general web actions GET  POST  PUT  and DELETE  these directly correspond with SELECT Retreiving DATA  INSERTING DATA  UPDATING UPSERTING DATA  and DELETING DATA   A default HTML ASP Net webform PHP Python or any other form action is to  quot submit quot  which is a POST action   Because of this the below will all describe doing a POST   Sometimes however with http you might want a different action and would likely want to utilitize  ajax  My code specifically for you  described in code comments    x000D   x000D     attach a submit handler to the form        formoid   submit function event          stop form from submitting normally      event preventDefault          get the action attribute from the  lt form action    gt  element      var  form     this       url    form attr  action          Send the data using post with element id name and name2     var posting     post url        name      name   val        name2      name2   val               Alerts the results      posting done function data            result   text  success            posting fail function             result   text  failed              x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt    lt form id  formoid  action  studentFormInsert php  title    method  post  gt     lt div gt       lt label class  title  gt First Name lt  label gt       lt input type  text  id  name  name  name  gt     lt  div gt     lt div gt       lt label class  title  gt Last Name lt  label gt       lt input type  text  id  name2  name  name2  gt     lt  div gt     lt div gt       lt input type  submit  id  submitButton  name  submitButton  value  Submit  gt     lt  div gt   lt  form gt    lt div id  result  gt  lt  div gt  x000D   x000D   x000D    Documentation From jQuery website   post documentation  Example  Send form data using ajax requests   post  quot test php quot      quot  testform quot   serialize      Example  Post a form using ajax and put results in a div  lt  DOCTYPE html gt   lt html gt       lt head gt           lt script src  quot http   code jquery com jquery-1 9 1 js quot  gt  lt  script gt       lt  head gt       lt body gt           lt form action  quot   quot  id  quot searchForm quot  gt               lt input type  quot text quot  name  quot s quot  placeholder  quot Search    quot    gt               lt input type  quot submit quot  value  quot Search quot    gt           lt  form gt           lt  -- the result of the search will be rendered inside this div -- gt           lt div id  quot result quot  gt  lt  div gt           lt script gt                 attach a submit handler to the form                   quot  searchForm quot   submit function event                        stop form from submitting normally                    event preventDefault                        get some values from elements on the page                     var  form     this                       term    form find  input name  quot s quot     val                        url    form attr  action                        Send the data using post                    var posting     post url                        s  term                                         Put the results in a div                    posting done function data                        var content     data  find   content                           quot  result quot   empty   append content                                                lt  script gt       lt  body gt   lt  html gt    Important Note Without using OAuth or at minimum HTTPS  TLS SSL  please don t use this method for secure data  credit card numbers  SSN  anything that is PCI  HIPAA  or login related

[jquery] Submitting HTML form using Jquery AJAX

NOTE:

Examples related to jquery

Examples related to ajax

Examples related to form-submit