Passing form data via AJAX to REST API And displaying results

Question

I'm new to WordPress but have been programming PHP for a long time... I searched a bunch of questions but couldn't find what I need.

I have a page with a search form that contains a few parameters and a submit button.

I have javascript that uses AJAX to submit the form parameters to a REST API endpoint on a non-WordPress server. When I get the response back from that server I want to display the results on the page.

Here is the form data that I pasted onto a page:

<form id="grpSearch">
        <div class="form-group">
            <label for="days[]"
                   style="font-weight:bold; text-align: right; margin-right:15px; float:left;">Day: </label>
            <input type="checkbox" name="days[]" value="1"> Su &nbsp;
            <input type="checkbox" name="days[]" value="2"> M &nbsp;
            <input type="checkbox" name="days[]" value="3"> T &nbsp;
            <input type="checkbox" name="days[]" value="4"> W &nbsp;
            <input type="checkbox" name="days[]" value="5"> Th &nbsp;
            <input type="checkbox" name="days[]" value="6"> F &nbsp;
            <input type="checkbox" name="days[]" value="7"> Sa &nbsp;
        </div>
        <div class="form-group">
            <label for="tod[]" style="font-weight:bold; text-align: right; margin-right:15px; float:left;">Time of
                Day: </label>
            <input type="checkbox" name="tod[]" value="8"> Morning &nbsp;
            <input type="checkbox" name="tod[]" value="9"> Afternoon &nbsp;
            <input type="checkbox" name="tod[]" value="10"> Evening &nbsp;
        </div>
        <div class="form-group">
            <label for="frequency[]" style="font-weight:bold; text-align: right; margin-right:15px; float:left;">Frequency: </label>
            <input type="checkbox" name="frequency[]" value="11"> Weekly &nbsp;
            <input type="checkbox" name="frequency[]" value="12"> Bi-Weekly &nbsp;
            <input type="checkbox" name="frequency[]" value="13"> Monthly &nbsp;
            <input type="checkbox" name="frequency[]" value="14"> Occasional &nbsp;
        </div>
        <div class="form-group">
            <input name="search" type="submit" class="button" value="Search"/>
        </div>
</form>

<div id="results"></div>

Here is the JavaScript that should be called when the submit button is clicked.

(function ($) {
function processForm(e) {
    $.ajax({
        url: 'https://example.com/groups',
        dataType: 'text',
        method: 'get',
        contentType: 'application/x-www-form-urlencoded',
        data: $(this).serialize(),
        success: function (data, textStatus, jQxhr) {
            makeHtml(jQuery.parseJSON(data));
            $('#grpSearch')[0].reset();
        },
        error: function (jqXhr, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });

    e.preventDefault();
}

function makeHtml(data) {
    $('#results').empty();
    for (var index in data) {

        // Start the result div for a single group
        var result = '<div class="result clearfix" style="padding-top: 15px;">';

        // Add the contact div
        result += makeContactDiv(group);

        // Add the content div
        result += makeContentDiv(group);

        result += '</div>';

        $('#results').append(result);
    }
} 
})(jQuery);

When this code is all on a plain html page (not in WordPress) it works very well. I now need to move the functionality into a page in WP. I thought this would be really easy to put the HTML in a page, add the javascript file to the header and it would just work. Sadly, this is not the case.

So, how do I get clicking the Search button to invoke the JavaScript code which would get results and update the page by appending content to the results div on my page on WordPress?

If there is another way that this needs to be done, please educate me.

Answer 1

I got everything working but it may not be the most elegant of solutions.

I put the form text as well as the empty results div on a page. I created a small plugin that checks to see if we are on that page. If so, insert the JavaScript into the footer. Otherwise, do nothing.

This checks for the page we are on:

public function display_group_information($content)
{
    global $post;

    if ($post->post_name == 'groups-activities-and-events'){
        add_action('wp_footer', [$this, 'load_group_ajax']);
    }
    return $content;
}

This adds the required javascript:

public function load_group_ajax(){
?>
    <script>
        !function(r){function n(n).....("#grpSearch").submit(n)}(jQuery);
    </script>

<?php
}

Again, probably not the most elegant way of doing it but it works.