In the HTML file of my component, I have created a form. When I submit the form, it triggers an AJAX call to an action defined in the component. Currently, my code is functioning properly and I am receiving a response. However, I now need this response to be passed to a JavaScript function that I have created within the component's HTML file.
function markAddresses(addresses) {
geocoder = new google.maps.Geocoder();
addresses.forEach(address => {
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({map: map,position: results[0].geometry.location});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
})
}
I want to pass my response like markAddresses(response)
<form method="post" data-request="onSend">
<div class="col-md-5">
<input type="text" name="location" class="form-control">
</div>
<div class="col-md-2">
<select name="service[]" id="services" class="form-control">
{% for client in records %}
<option value="{{ client.service }}">{{ client.service }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-2">
<select name="area[]" id="search" class="form-control" >
{% for client in records %}
<option value="{{ client.area }}">{{ client.area }} Miles</option>
{% endfor %}
</select>
</div>
<div class="col-md-3">
<input type="submit" value="Looks for Shops" class="red-btn btn btn-default">
<a class="location-view" href="#">View all Shops</a>
</div>
This is how my Ajax is working. It appears to be utilizing the OctoberCMS Ajax framework.