Call a PHP function after AJAX

Question

When a user submits the form on my page I use AJAX to submit the information without refreshing the page. After the user submits the information I want to run a PHP function that I have already written that displays the information. Is this possible or do I need to run another ajax function to update after

    $(function () {
       $('add').on('submit', function (e) {
          $.ajax({
            type: 'post',
            url: 'submit.php',
            data: $('this').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });
          e.preventDefault();
          updateWords(); //PHP FUNCTION
        });
      });

Answer 1

You will need to run another AJAX call on success of the first one.

JavaScript cannot interact with PHP directly and therefore you can't call a PHP function from the success/complete function of the AJAX call.

Answer 2

in response of this.

I have multiple forms on the page and probably 5 different ajax calls in which no more then 2 are called at the same time, if json is better do you have a link to some reading material or additional stack example similar to this so i can teach myself – user934902

first of all

jquery was made for old browsers to support basic functions that ie6 does not support

the use of jquery is good if you want to have full support on almost all browser

but there are also many bad sides:

1. it's 81kb code wich is insane (without plugins)
2. it's very slow compared to native functions.
3. it's used by ppl who don't know how to write simple javascript.
4. and much more if we start to talk about the plugins.

now we are in a era where most of the ppl use their mobile devices and modern browsers which support standard javascript 1.7.Android,ios,safari,internet explorer 10,chrome,opera & firefox support javascript 1.7

http://caniuse.com/

the code below is supported by those browsers.

this is a ajax function written by me it handles post & get

you can read more about that function here https://stackoverflow.com/a/18309057/2450730

 function ajax(a,b,e,d,f,g,c){
  c=new XMLHttpRequest;
  !f||(c.upload.onprogress=f);
  !g||(c.onprogress=g);
  c.onload=b;
  c.open(e||'get',a);
  c.send(d||null)
 }
 // Params:
 // Url,callback,method,formdata or {key:val},uploadFunc,downloadFunc,placeholder

a simple get request would be

ajax('example.php',responseFunction);

and a complex post function would be

ajax('example.php',responseFunction,'post',new FormData(form),uploadFunc,dlFunc);

you need that.

so if you have your form

<form id="myForm">
<input name="name"> Name
<input name="surname"> Surname
<input name="mail"> Email
<input name="file" type="file" multiple> File/Files
</form>

you just have to write a function like that

var form=document.getElementsById('myForm');
form.onsubmit=function(e){
 e.preventDefault();
 ajax('submit.php',SUCCESS,'post',new FormData(this));
}

and here we come to your question :

create the submit.php file for your needs

<?php
 // do whatever you need with the posted info 
 // copy files to a specific folder
 // insert/update/delete the database
 // check for errors
 // lets say no errors 
 $err=array(); 
 // load extra info from database to an array called $extrainfo
 // load some functions... (you can do what you want here)
 // like executing the function you have already written and add that info to 
 // the $extrainfo.
 $extrainfo=array('updated correctly','files copied');
 $data=array('post'=>$_POST,'files'=>$_FILES,'info'=>$extrainfo,'errors'=>$err);
 echo json_encode($data);
?>

this returns a json encoded array to use later in javascript.

now we need to elaborate this json. in the SUCCESS function

function SUCCESS(){
 var data=JSON.parse(this.response);
 if(data.errors.length>0){
  // you have some errors 

 }else{
  // no errors
  // display your response in a proper way.
  console.log(data);
 }
}

inside this function you just have to display based on the response data.

data contains everything you need.

here is the whole code.

copy and past into a txt file and save it as submit.php . i have tested only in chrome for now.

<?php
if($_POST){
$err=array();
$extrainfo=array('updated correctly','files copied');
$data=array('post'=>$_POST,'files'=>$_FILES,'info'=>$extrainfo,'errors'=>$err);
echo json_encode($data);
}else{
?><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>upload</title>
<script>
var form,result;
function ajax(a,b,e,d,f,g,c){
 c=new XMLHttpRequest;
 !f||(c.upload.onprogress=f);
 !g||(c.onprogress=g);
 c.onload=b;
 c.open(e||'get',a);
 c.send(d||null)
}
function SUCCESS(){
    console.log(JSON.parse(this.response));
 var data=JSON.parse(this.response);
 if(data.errors.length>0){
  result.textContent='you have some errors:'+data.errors[0];
 }else{
  result.textContent=JSON.stringify(data, null, '\t');
 }
}
window.onload=function(){
 form=document.getElementById('myForm');
 result=document.getElementById('response');
 form.onsubmit=function(e){
  e.preventDefault();
  ajax('submit.php',SUCCESS,'post',new FormData(this));
 }
}
</script>
</head>
<body>
<form id="myForm">
<input name="name"> Name
<input name="surname"> Surname
<input name="mail"> Email
<input name="file[]" type="file" multiple> File/Files
<input type="submit" value="send">
</form>
<pre id="response"></pre>
</body>
</html>
<?php
}
?>

Answer 3

PHP is serverside , javascript is clientside. you can't call php from client if the page is already loaded.

so the easy way is ajax

in the submit.php add:

echo json_encode($_POST);

or the

PHP function that I have already written

... the information what you need.

and in the success function

success: function () {
 // i don't use jquery but the response contains the json string
 console.log('the words you wanna update:',JSON.parse(response));
 // updateWords(JSON.parse(response));
}

EDIT

you also don't need more than one ajax function

you say you already wrote a script to display the next information to the client.

add that script to the submit.php

and the succes function will give you what you need as response.

i added echo json_encode($_POST); because most of the time as answer/update info you need is that one you just posted.

Answer 4

If the function is dependant on the AJAX call to submit.php finishing, then create a new AJAX call. If not, then just append the function to submit.php and call it at the end of the file.

Answer 5

You should use the ajax function that performs the update information to update the page itself at the same time.

Just return usable HTML as the return from the ajax, and use that as the HTML content of the page.

Example: test.php

<script>
  function updateName() {
    var url = './test.php?inpName='  + $('#inpName').val();
    $.get( url, function( data ) {
    $( "#frmDivUpdate" ).html( data );
      alert( "Call was performed." );
    });
  }
  </script>


  <div id="frmDivUpdate">
    <form>
      Enter your name : <input name="inpName" id="inpName">
      <br>
      <input type="button" onClick="updateName();" value="Update">
    </form>
  </div>

  <?php 

  if (isset($_GET))
  {
      $inpName = $_GET["inpName"];
      echo "You updated your val to $inpName";
  }
  ?>