Use Shortcode on Custom Page

Question

How can I use a shortcode on a custom page in a theme? Let say I have a page that has a jQuery ajax function. I am able to send the data via JQuery post on the my_form.php page. On the confirm.php page, I want to use a shortcode from Contact Form DB plugin. Below is the source code that I wrote,

my_form.php

<?php
get_header(); 
// Include all the theme functions    
?>

<form name="season-form" class="form-horizontal" method="post" action="">
  <div class="form-group form-group-lg">
    <label for="carNo" id="label-cust"> Vehicle Registration No</label>
    <input type="text" class="form-control" name="vehicle_no" id="vehicle_no" placeholder="BHK1991">
  </div>
  <div class="form-group form-group-lg">
    <label for="email" id="email">Email</label>
    <input type="email" class="form-control" name="email" id="email" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-primary" id="submit_payment">Make Payment</button>
</form>
<div id="result"></div>

<?php get_footer(); ?>

my_function.js

jQuery(document).ready(function($) {
    $('#submit_payment').click(function(e){
        e.preventDefault();
        var str = $("form[name=season-form]").serialize();
        //alert(str);
        $.ajax({
            type: "POST",
            url: url_to_confitm.php,
            data: str 
        }).done(function(data){
            $("#result").html(data);
        });
    });
});

confirm.php

if(isset($_POST['vehicle_no'])){
    $vehicle_no = $_POST['vehicle_no'];
    $email = $_POST['email'];

    echo "Your Data: <br>$vehicle_no <br>$email<p />";
}

echo do_shortcode('[cfdb-table form="season parking form_copy"]');

1. I am able to get the result of post data but the shortcode appears to return nothing.
2. If I use the shortcode on my_form.php page, it display the data perfectly.

Answer 1

You should this way to handle ajax request. It's the recommended way to make a ajax call in WordPress.

my_function.js Update your jquery with this code.

jQuery(document).ready(function($) {
    $('#submit_payment').click(function(e){
        e.preventDefault();
        var str = $("form[name=season-form]").serialize();
        //alert(str);
        $.ajax({
            type: "POST",
            url: '//www.example.com/wp-admin/admin-ajax.php',
            data: str + '&action=confirmRequest' 
        }).done(function(data){
            $("#result").html(data);
        });
    });
});

ajax_request_handling Paste this in functions.php of your theme.

function _myConfirmHandler()
{
    if(isset($_POST['vehicle_no']))
    {
        $vehicle_no = $_POST['vehicle_no'];
        $email = $_POST['email'];

        echo "Your Data: <br>$vehicle_no <br>$email<p />";

    }
    echo do_shortcode('[cfdb-table form="season parking form_copy"]');
    echo do_shortcode('[contact-form-7 id="23" title="Contact form 1"]');
    exit;
}

add_action('wp_ajax_confirmRequest', '_myConfirmHandler');
add_action('wp_ajax_nopriv_confirmRequest', '_myConfirmHandler');

For more information refer to the link.