jQuery Ajax POST example with PHP

Question

I am trying to send data from a form to a database  Here is the form I am using    lt form name  foo  action  form php  method  POST  id  foo  gt       lt label for  bar  gt A bar lt  label gt       lt input id  bar  name  bar  type  text  value      gt       lt input type  submit  value  Send    gt   lt  form gt    The typical approach would be to submit the form  but this causes the browser to redirect  Using jQuery and Ajax  is it possible to capture all of the form s data and submit it to a PHP script  an example  form php

User · Answer

I would like to share a detailed way of how to post with PHP + Ajax along with errors thrown back on failure.

First of all, create two files, for example form.php and process.php.

We will first create a form which will be then submitted using the jQuery .ajax() method. The rest will be explained in the comments.

form.php

<form method="post" name="postForm">
    <ul>
        <li>
            <label>Name</label>
            <input type="text" name="name" id="name" placeholder="Bruce Wayne">
            <span class="throw_error"></span>
            <span id="success"></span>
       </li>
   </ul>
   <input type="submit" value="Send" />
</form>

Validate the form using jQuery client-side validation and pass the data to process.php.

$(document).ready(function() {
    $('form').submit(function(event) { //Trigger on form submit
        $('#name + .throw_error').empty(); //Clear the messages first
        $('#success').empty();

        //Validate fields if required using jQuery

        var postForm = { //Fetch form data
            'name'     : $('input[name=name]').val() //Store name fields value
        };

        $.ajax({ //Process the form using $.ajax()
            type      : 'POST', //Method type
            url       : 'process.php', //Your form processing file URL
            data      : postForm, //Forms name
            dataType  : 'json',
            success   : function(data) {
                            if (!data.success) { //If fails
                                if (data.errors.name) { //Returned if any error from process.php
                                    $('.throw_error').fadeIn(1000).html(data.errors.name); //Throw relevant error
                                }
                            }
                            else {
                                    $('#success').fadeIn(1000).append('<p>' + data.posted + '</p>'); //If successful, than throw a success message
                                }
                            }
        });
        event.preventDefault(); //Prevent the default submit
    });
});

Now we will take a look at process.php

$errors = array(); //To store errors
$form_data = array(); //Pass back the data to `form.php`

/* Validate the form on the server side */
if (empty($_POST['name'])) { //Name cannot be empty
    $errors['name'] = 'Name cannot be blank';
}

if (!empty($errors)) { //If errors in validation
    $form_data['success'] = false;
    $form_data['errors']  = $errors;
}
else { //If not, process the form, and return true on success
    $form_data['success'] = true;
    $form_data['posted'] = 'Data Was Posted Successfully';
}

//Return the data back to form.php
echo json_encode($form_data);

The project files can be downloaded from http://projects.decodingweb.com/simple_ajax_form.zip.

User · Answer

You can use serialize  Below is an example       submit btn   click function            error status   html            if    form frm message board   valid                            ajax                   type   POST                   url    lt  php echo site url  message board add     gt                    data      frm message board   serialize                    success  function msg                        var msg     parseJSON msg                       if msg success   yes                                                 return true                                            else                                               alert  Server error                            return false                                                                            return false

User · Answer

To make an Ajax request using jQuery you can do this by the following code   HTML    lt form id  foo  gt       lt label for  bar  gt A bar lt  label gt       lt input id  bar  name  bar  type  text  value      gt       lt input type  submit  value  Send    gt   lt  form gt    lt  -- The result of the search will be rendered inside this div -- gt   lt div id  result  gt  lt  div gt    JavaScript   Method 1      Get from elements values     var values     this  serialize        ajax           url   test php           type   post           data  values           success  function  response                   You will get response from your PHP page  what you echo or print                     error  function jqXHR  textStatus  errorThrown               console log textStatus  errorThrown                       Method 2     Attach a submit handler to the form        foo   submit function event        var ajaxRequest          Stop form from submitting normally        event preventDefault            Clear result div           result   html              Get from elements values        var values     this  serialize            Send the data using post and put the results in a div            I am not aborting the previous request  because it s an        asynchronous request  meaning once it s sent it s out        there  But in case you want to abort it you can do it        by abort    jQuery Ajax methods return an XMLHttpRequest        object  so you can just use abort              ajaxRequest    ajax               url   test php               type   post               data  values                      Request can be aborted by ajaxRequest abort           ajaxRequest done function  response  textStatus  jqXHR                Show successfully for submit message              result   html  Submitted successfully                    On failure of request this function will be called         ajaxRequest fail function                 Show error             result   html  There is error while submit              The  success     error    and  complete   callbacks are deprecated as of jQuery 1 8  To prepare your code for their eventual removal  use  done     fail    and  always   instead   MDN  abort     If the request has been sent already  this method will abort the request   So we have successfully send an Ajax request  and now it s time to grab data to server   PHP  As we make a POST request in an Ajax call  type   post    we can now grab data using either   REQUEST or   POST      bar     POST  bar     You can also see what you get in the POST request by simply either  BTW  make sure that   POST is set  Otherwise you will get an error   var dump   POST      Or print r   POST     And you are inserting a value into the database  Make sure you are sensitizing or escaping All requests  whether you made a GET or POST  properly before making the query  The best would be using prepared statements   And if you want to return any data back to the page  you can do it by just echoing that data like below      1  Without JSON    echo  Hello  this is one      2  By JSON  Then here is where I want to send a value back to the success of the Ajax below echo json encode array  returned val    gt   yoho       And then you can get it like    ajaxRequest done function  response       alert response            There are a couple of shorthand methods  You can use the below code  It does the same work   var ajaxRequest    post  test php   values  function data      alert data         fail function         alert  error            always function         alert  finished

User · Answer

This is a very good article that contains everything that you need to know about jQuery form submission   Article summary   Simple HTML Form Submit  HTML    lt form action  path to server script  method  post  id  my form  gt       lt label gt Name lt  label gt       lt input type  text  name  name    gt       lt label gt Email lt  label gt       lt input type  email  name  email    gt       lt label gt Website lt  label gt       lt input type  url  name  website    gt       lt input type  submit  name  submit  value  Submit Form    gt       lt div id  server-results  gt  lt  -- For server results -- gt  lt  div gt   lt  form gt    JavaScript       my form   submit function event       event preventDefault       Prevent default action     var post url     this  attr  action       Get the form action URL     var request method     this  attr  method       Get form GET POST method     var form data     this  serialize       Encode form elements for submission        ajax           url   post url          type  request method          data   form data        done function response                  server-results   html response                 HTML Multipart form-data Form Submit  To upload files to the server  we can use FormData interface available to XMLHttpRequest2  which constructs a FormData object and can be sent to server easily using the jQuery Ajax   HTML    lt form action  path to server script  method  post  id  my form  gt       lt label gt Name lt  label gt       lt input type  text  name  name    gt       lt label gt Email lt  label gt       lt input type  email  name  email    gt       lt label gt Website lt  label gt       lt input type  url  name  website    gt       lt input type  file  name  my file      gt   lt  -- File Field Added -- gt       lt input type  submit  name  submit  value  Submit Form    gt       lt div id  server-results  gt  lt  -- For server results -- gt  lt  div gt   lt  form gt    JavaScript       my form   submit function event       event preventDefault       Prevent default action     var post url     this  attr  action       Get form action URL     var request method     this  attr  method       Get form GET POST method     var form data   new FormData this      Creates new FormData object       ajax           url   post url          type  request method          data   form data          contentType  false          cache  false          processData  false        done function response                  server-results   html response                 I hope this helps

User · Answer

HTML        lt form name  foo  action  form php  method  POST  id  foo  gt           lt label for  bar  gt A bar lt  label gt           lt input id  bar  class  inputs  name  bar  type  text  value      gt           lt input type  submit  value  Send  onclick  submitform    return false     gt       lt  form gt    JavaScript      function submitform               var inputs   document getElementsByClassName  inputs           var formdata   new FormData           for var i 0  i lt inputs length  i                        formdata append inputs i  name  inputs i  value                   var xmlhttp         if window XMLHttpRequest                      xmlhttp   new XMLHttpRequest                  else                     xmlhttp   new ActiveXObject  Microsoft XMLHTTP                    xmlhttp onreadystatechange   function                      if xmlhttp readyState    4  amp  amp  xmlhttp status    200                                           xmlhttp open  POST    insert php           xmlhttp send formdata

User · Answer

I am using this simple one line code for years without a problem  it requires jQuery     lt script src  http   malsup github com jquery form js  gt  lt  script gt    lt script type  text javascript  gt      function ap x y           y  load x         function af x y           x   ajaxSubmit  target        y   return false     lt  script gt    Here ap   means an Ajax page and af   means an Ajax form  In a form  simply calling af   function will post the form to the URL and load the response on the desired HTML element    lt form id  form id  gt               lt input type  button  onclick  af  form id   load response id     gt   lt  form gt   lt div id  load response id  gt this is where response will be loaded lt  div gt

User · Answer

I use the way shown below  It submits everything like files     document  on  submit    form   function event        event preventDefault         var url      this  attr  action          ajax           url  url          type   POST           dataType   JSON           data  new FormData this           processData  false          contentType  false          success  function  data  status                                error  function  xhr  desc  err                        console log  error

User · Answer

Since the introduction of the Fetch API there really is no reason any more to do this with jQuery Ajax or XMLHttpRequests  To POST form data to a PHP-script in vanilla JavaScript you can do the following    x000D   x000D  function postData     x000D      const form   document getElementById  form    x000D      const data   new FormData    x000D      data append  name   form name value   x000D   x000D      fetch     php contact php    method   POST   body  data   then response   gt    x000D          if   response ok   x000D              throw new Error  Network response was not ok     x000D            x000D         catch err   gt  console log err    x000D    x000D   lt form id  form  action  javascript postData    gt  x000D       lt input id  name  name  name  placeholder  Name  type  text  required gt  x000D       lt input type  submit  value  Submit  gt  x000D   lt  form gt  x000D   x000D   x000D    Here is a very basic example of a PHP-script that takes the data and sends an email    lt  php     header  Content-type  text html  charset utf-8         if  isset   POST  name                name     POST  name                to    test example com        subject    New name submitted        body    You received the following name   name        mail  to   subject   body

User · Answer

Pure JS In pure JS it will be much simpler foo onsubmit   e  gt      e preventDefault      fetch foo action  method  post   body  new FormData foo         x000D   x000D  foo onsubmit   e  gt      e preventDefault      fetch foo action  method  post   body  new FormData foo       x000D   lt form name  foo  action  form php  method  POST  id  foo  gt       lt label for  bar  gt A bar lt  label gt       lt input id  bar  name  bar  type  text  value      gt       lt input type  submit  value  Send    gt   lt  form gt  x000D   x000D   x000D

User · Answer

In your php file enter    content raw   file get contents  php   input       THIS IS WHAT YOU NEED  decoded data   json decode  content raw  true      THIS IS WHAT YOU NEED  bar    decoded data  bar       THIS IS WHAT YOU NEED  time    decoded data  time     hash    decoded data  hash    echo  You have sent a POST request containing the bar variable with the value  bar     and in your js file send an ajax with the data object  var data          bar    bar value       time  calculatedTimeStamp      hash  calculatedHash      uid  userID      sid  sessionID      iid  itemID       ajax       method   POST       crossDomain  true      dataType   json       crossOrigin  true      async  true      contentType   application json       data  data      headers             Access-Control-Allow-Methods                 Access-Control-Allow-Credentials   true           Access-Control-Allow-Headers     Access-Control-Allow-Headers  Origin  X-Requested-With  Content-Type  Accept  Authorization            Access-Control-Allow-Origin                 Control-Allow-Origin                 cache-control    no-cache            Content-Type    application json             url   https   yoururl com somephpfile php       success  function response           console log  Respond was     response              error  function  request  status  error            console log  There was an error     request responseText                or keep it as is with the form-submit  You need this only  if you want to send a modified request with calculated additional content and not only some form-data  which is entered by the client  For example a hash  a timestamp  a userid  a sessionid and the like

User · Answer

I have one other idea  Which the URL that of PHP files which provided the download file  Then you have to fire the same URL via ajax and I checked this second request only gives the response after your first request complete the download file  So you can get the event of it  It is working via ajax with the same second request

User · Answer

Basic usage of  ajax would look something like this   HTML    lt form id  foo  gt       lt label for  bar  gt A bar lt  label gt       lt input id  bar  name  bar  type  text  value      gt        lt input type  submit  value  Send    gt   lt  form gt    jQuery      Variable to hold request var request      Bind to the submit event of our form     foo   submit function event           Prevent default posting of form - put here to work in case of errors     event preventDefault            Abort any pending request     if  request            request abort                 setup some local variables     var  form     this           Let s select and cache all the fields     var  inputs    form find  input  select  button  textarea            Serialize the data in the form     var serializedData    form serialize            Let s disable the inputs for the duration of the Ajax request         Note  we disable elements AFTER the form data has been serialized         Disabled form elements will not be serialized       inputs prop  disabled   true           Fire off the request to  form php     request     ajax           url    form php           type   post           data  serializedData                 Callback handler that will be called on success     request done function  response  textStatus  jqXHR              Log a message to the console         console log  Hooray  it worked                     Callback handler that will be called on failure     request fail function  jqXHR  textStatus  errorThrown              Log the error to the console         console error               The following error occurred                 textStatus  errorThrown                            Callback handler that will be called regardless        if the request failed or succeeded     request always function                 Reenable the inputs          inputs prop  disabled   false                  Note  Since jQuery 1 8   success     error   and  complete   are deprecated in favor of  done     fail   and  always     Note  Remember that the above snippet has to be done after DOM ready  so you should put it inside a   document  ready   handler  or use the     shorthand    Tip  You can chain the callback handlers like this    ajax   done   fail   always     PHP  that is  form php       You can access the values posted by jQuery ajax    through the global variable   POST  like this   bar   isset   POST  bar        POST  bar     null    Note  Always sanitize posted data  to prevent injections and other malicious code   You could also use the shorthand  post in place of  ajax in the above JavaScript code     post   form php   serializedData  function response           Log the response to the console     console log  Response    response         Note  The above JavaScript code is made to work with jQuery 1 8 and later  but it should work with previous versions down to jQuery 1 5

User · Answer

If you want to send data using jQuery Ajax then there is no need of form tag and submit button  Example    lt script gt        document  ready function                  btnSend   click function                    ajax                   url   process php                   type   POST                   data   bar      bar   val                     success  function  result                        alert  success                                                           lt  script gt    lt label for  bar  gt A bar lt  label gt   lt input id  bar  name  bar  type  text  value      gt   lt input id  btnSend  type  button  value  Send    gt

User · Answer

lt script src  http   code jquery com jquery-1 7 2 js  gt  lt  script gt   lt form method  post  id  form content  action  Javascript void 0    gt       lt button id  desc  name  desc  value  desc  style  display none   gt desc lt  button gt       lt button id  asc  name  asc   value  asc  gt asc lt  button gt       lt input type  hidden  id  check  value     gt   lt  form gt    lt div id  demoajax  gt  lt  div gt    lt script gt      numbers               form content button   click function                form content button   toggle            numbers   this id          function two numbers                function function two numbers           if  numbers                                   check   val  asc                      else                           check   val numbers                       alert sort var              ajax               url   test php               type   POST               data      form content   serialize                success  function data                       demoajax   show                        demoajax   html data                                          return false              document  ready function two      lt  script gt

User · Answer

Handling Ajax errors and loader before submit and after submitting success shows an alert boot box with an example   var formData   formData     ajax       type   POST       url  url      async  false      data  formData     Only input     processData  false      contentType  false      xhr  function                      load consulting   show            var xhr   new window XMLHttpRequest                Upload progress         xhr upload addEventListener  progress   function  evt                if  evt lengthComputable                    var percentComplete    evt loaded   evt total    100                      addLoad  progress-bar   css  width   percentComplete                                  false               Download progress         xhr addEventListener  progress   function  evt                if  evt lengthComputable                    var percentComplete   evt loaded   evt total                           false           return xhr             beforeSend  function  xhr            qyuraLoader startLoader               success  function  response  textStatus  jqXHR            qyuraLoader stopLoader            try                   load consulting   hide                 var data     parseJSON response               if  data status    0                                if  data isAlive                                            addLoad  progress-bar   css  width    00                         console log data errors                         each data errors  function  index  value                            if  typeof data custom     undefined                                     err     index  html value                                                     else                                                           err     index  addClass  error                                 if  index     TopError                                                                     er     index  html value                                                             else                                       er TopError   append   lt p gt     value     lt  p gt                                                                                                         if  data errors TopError                                er TopError   show                                er TopError   html data errors TopError                           setTimeout function                                      er TopError   hide 5000                                   er TopError   html                                 5000                                                           else                                           headLogin   html data loginMod                                   else                     document getElementById  setData   reset                        myModal   modal  hide                        successTop   show                        successTop   html data msg                   if  data msg        amp  amp  data msg     undefined                          bootbox alert  closeButton  false  message  data msg  callback  function                                  if  data url                                    window location href     lt  php echo site url     gt           data url                                else                                   location reload true                                                                                else                       bootbox alert  closeButton  false  message   Success   callback  function                              if  data url                                window location href     lt  php echo site url     gt           data url                            else                               location reload true                                                                                                         catch  e                if  e                        er TopError   show                        er TopError   html e                   setTimeout function                              er TopError   hide 5000                           er TopError   html                         5000

User · Answer

Please check this  It is the complete Ajax request code       foo   submit function event           Get the form data        There are many ways to get this data using jQuery  you        can use the class or id also      var formData       foo   serialize        var url    URL of the request           Process the form        ajax           type           POST        Define the type of HTTP verb we want to use         url            url         The URL where we want to POST         data          formData     Our data object         dataType       json        What type of data do we expect back          beforeSend   function                     This will run before sending an Ajax request                 Do whatever activity you want  like show loaded                     success function response               var obj   eval response               if obj                                if obj error  0                       alert  success                                      else                      alert  error                                                       complete   function                    This will run after sending an Ajax complete                    error function  xhr  ajaxOptions  thrownError               alert  error occured                   If any error occurs in request                           Stop the form from submitting the normal way        and refreshing the page     event preventDefault

[javascript] jQuery Ajax POST example with PHP

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to post