1

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
        });
      });
Improve this question
7
  • Then you should do another ajax call to this php function Commented Dec 9, 2013 at 15:34
  • Another AJAX call maybe? Also you can add processing of this function in previous AJAX call. If you are not doing something after first AJAX call response which matters. Commented Dec 9, 2013 at 15:34
  • 2
    Just run the php function from your submit.php script and return the data to the success function. That way you can do everything in one request. Unless you want the two to run simultaneously of course... Commented Dec 9, 2013 at 15:42
  • my answer is based on the fact that when you update something in the database you want to get a succes response and the new values.my code does both.no need for multiple ajax calls. json_decode is just to get the response in a javascript readable array. Commented Dec 9, 2013 at 16:22
  • @cocco, as I've said several times. Your code doesn't stop multiple ajax calls being needed. Commented Dec 9, 2013 at 16:24

5 Answers 5

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

15 Comments

thats what i thought, just was curious to see if this was possible, thanks
you don't need to execute another ajax call if you add the code you have already written inside the submit.php
to many ajax calls are worst than adding the php addwords function to the submit response. ajax is 2 ways .
Thanks for the downvote, however - you don't know that it's possible for the code to be removed from the file the AJAX call is in, and into submit.php.
if he write the code it's possible with if's and includes. anyway the answer you downvoted answers both. you execute the updateWords inside the success function.and even if he gets the response with the correct information he needs to execute another function to display that information.....
|
3

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
}
?>
Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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";
  }
  ?>
Improve this answer

Comments

0

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.

Improve this answer

7 Comments

How is this going to accomplish what the OP wanted to do?
Because this doesn't explain why/how to call a PHP function within a JavaScript function, or more-so why it isn't possible.
That was understood initially, the question was asking whether it was possible to call a PHP function within a JS function.
yeah with ajax you can call another php script . inside javascript there is no php as it's clientside
Yes I know - but if you read his question - you didn't answer it.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.