Call .php file with an ajax request - wordpress

Question

I am trying to call a php file from an ajax request in wordpress. The problem I am encountering is that the ajax request requires a path to the php file. I am unsure of where to place this php file in my wordpress installation. Further, this file cannot be included inline because I need to call this php file only when the user decides to call it. I don't use jquery right now but would be open to using it as I'm pretty sure that's client side only so the server wouldn't have to be involved.

As an example of something I would like to do let's try this with a form. This example was taken from http://thisinterestsme.com/ajax-form-submission-php/.

I would include this in the webpage.

<html>
    <head>
        <meta charset="UTF-8">
        <title>Example Ajax PHP Form</title>
    </head>
    <body>

        <form id="my_form_id">
            Your Email Address: <input type="text" id="email" /><br>
            <input type="submit" />
        </form>

        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#my_form_id').on('submit', function(e){
                    //Stop the form from submitting itself to the server.
                    e.preventDefault();
                    var email = $('#email').val();
                    $.ajax({
                        type: "POST",
                        url: 'submission.php',
                        data: {email: email},
                        success: function(data){
                            alert(data);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

Then elsewhere on the server I would have this file. The problem is I don't know where to place this file or what path to give the ajax request above.

<?php
$emailAddress = false;
if(isset($_POST['email'])){
    $emailAddress = $_POST['email'];
}

echo 'Received email was: ' . $emailAddress;
?>

norrin · Accepted Answer · 2017-12-20 23:59:35Z

1

Let's say you have this php:

<?php
 $emailAddress = false;
 if(isset($_POST['email'])){
    $emailAddress = $_POST['email'];
 }

 echo 'Received email was: ' . $emailAddress;
?>

You should name this file as page-submission.php and save it where your functions.php is located, then create a blank page name "submission". You can now then call this file in your ajax as /submission.

Here's the visual hierarchy how it works:

answered Dec 20, 2017 at 23:59

norrin

1711 silver badge8 bronze badges

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

8 Comments

frillybob Over a year ago

What if I want to use multiple php files? This method does not work anyway.

norrin Over a year ago

pay attention to the orange box that is labeled page-$slug.php I guess I should add to the instruction that to set/use the page/post title in the permalinks settings. This is the method that I use all the time and prevented me in polluting the functions.php

frillybob Over a year ago

I don't know enough about wordpress to make these modifications. Can you further elaborate?

norrin Over a year ago

The goal of step 4 is to see the echo "This is page-example.php" in your browser... if you successfully see that, it means you can put whatever code in page-example.php and call it via ajax.... and it doesn't matter if that URL is just an example... since you've used it in your sample code, I used that URL for consistency. You can use the wordpress url that you're working on.

norrin Over a year ago

whatever url you put in the browser to hit page-example.php that what you'll use on your ajax.

|

Jeff · Accepted Answer · 2017-12-21 18:59:38Z

1

You can add PHP functions to your functions.php file which can be easily executed from ajax:

function post_email_address(WP_REST_Request $request){
  return 'Received email was: ' . $request['email'];
}

add_action('rest_api_init', function(){
  register_rest_route( 'foo/v1', '/postEmail', array(
    'methods' => 'POST',
    'callback' => 'post_email_address',
  ));
});

Then in your front end:

  $(function(){
    $('#my_form_id').submit(function(e){
      //Stop the form from submitting itself to the server.
      e.preventDefault();
      var email = $('#email').val();
      $.post("/wp-json/foo/v1/postEmail", {
        email: email
      },function(data){
        console.log(data);
      });
    });
  });

"foo" is the namespace, you could use something more relevant to your app.

edited Dec 21, 2017 at 18:59

answered Dec 20, 2017 at 23:58

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

10 Comments

frillybob Over a year ago

I am unable to trigger the script still. I did exactly what you said with the php (also fixed the syntax error in the last line) and I put the ajax inside script tags on the frontend and left the form. When I hit submit there is a page reload and nothing happens.

Jeff Over a year ago

are you sure your document.ready function is running? ie. can you log to the console from there and see it? Might try changing $(document).ready(function(){ to $(function(){. Are you also able to log from the onSubmit function and see it before the page reloads?

Jeff Over a year ago

man i am sorry I am trying everything but I cant get it working either. will update if I can

Jeff Over a year ago

@frillybob Check out the edits! I tested and have this working! I used the docs for WP rest API: developer.wordpress.org/rest-api

Jeff Over a year ago

I had it in the submit function of the form

|

Collectives™ on Stack Overflow

Call .php file with an ajax request - wordpress

2 Answers 2

8 Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related