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
<input type="checkbox" name="days[]" value="2"> M
<input type="checkbox" name="days[]" value="3"> T
<input type="checkbox" name="days[]" value="4"> W
<input type="checkbox" name="days[]" value="5"> Th
<input type="checkbox" name="days[]" value="6"> F
<input type="checkbox" name="days[]" value="7"> Sa
</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
<input type="checkbox" name="tod[]" value="9"> Afternoon
<input type="checkbox" name="tod[]" value="10"> Evening
</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
<input type="checkbox" name="frequency[]" value="12"> Bi-Weekly
<input type="checkbox" name="frequency[]" value="13"> Monthly
<input type="checkbox" name="frequency[]" value="14"> Occasional
</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.