Best way to use PHP and AJAX in the same page

Question

On the same page I have several types of code: PHP, JS, and HTML. I want to take the information from the HTML form and go through PHP processing without reloading the page once the send button has been clicked.

PHP gets a value (from the form) that it sends through an API and the API response is displayed on the page

HTML (first on page)

<form method="post">
  <input class="display-inline form-postcode" type="text" name="postcode" id="postcode" placeholder="Add your postcode for delivery estimate">
  <input class="form-postcode-submit" type="submit" value="Get estimate!">
</form>

PHP (second)

<?php
    if(isset($_POST['postcode'])) {
     $toPostcode = $_POST['postcode'];
}

// do stuff with $toPostcode
// use the API
// get response

echo $response;
?>

AJAX (third - on the page bottom)

<script>

function submitdata()
{
 var postcode = document.getElementById( "postcode" );

 $.ajax({
 type: 'post',
 data: {
 postcode:postcode
 },

  // ???

 });
}
</script>

I have to use PHP in the same file because i am working with woocommerce and i get many errors trying to put the file outside

Now i am wondering how can i use all of those in the same page

I would suggest to use PHP in some other files. as you are using Woocommerce (means WordPress), you can use hooks to play with the php execution. In which file are you adding form, html and jquery in WooCommerce? — Momin IqbalAhmed, May 17 '19 at 04:47

score 0 · Answer 1 · answered May 17 '19 at 00:59

0

Yes, you can use on the same page.

You have missing the process part, something like:

success: function(){
      // code where you present the results
    }

answered May 17 '19 at 00:59

PaulRM

389
4
13

This is the part i cant understand. What i am suppose to write in there? The 'echo $response' from PHP? – Christian Tampa May 17 '19 at 02:14
Check this stackoverflow. https://stackoverflow.com/questions/29794118/how-to-return-data-from-ajax-success-function/29794185 . Hope this will help you with ajax callback function – Momin IqbalAhmed May 17 '19 at 04:53

Barmar · Answer 2 · 2019-05-17T14:27:28.283

You need to put the PHP at the beginning of the script. When it sees the postcode parameter, it can return the AJAX response and then exit, without displaying the HTML of the full page.

So it should look something like this:

<?php
if(isset($_POST['postcode'])) {
     $toPostcode = $_POST['postcode'];


    // do stuff with $toPostcode
    // use the API
    // get response

    echo $response;
    exit;
}
?>

<html>
<head>
    ...
</head>
<body>
    ...
    <form method="post" id="postcode-form">
      <input class="display-inline form-postcode" type="text" name="postcode" id="postcode" placeholder="Add your postcode for delivery estimate">
      <input class="form-postcode-submit" type="submit" value="Get estimate!">
    </form>
    ...
    <script>
    $(function() {
      $("#postcode-form").submit(function(e) {
        e.preventDefault();
        submitdata();
      });
    });

    function submitdata()
    {
     var postcode = document.getElementById( "postcode" );

     $.ajax({
     type: 'post',
     data: {
     postcode:postcode
     },

      // ???

     });
    }
    </script>
</body>
</html>

It only exits when it's responding to an AJAX request, not when it's loading the HTML page. — Barmar, May 17 '19 at 14:25

Best way to use PHP and AJAX in the same page

2 Answers2