Hey guys,
I am trying to create a suburb search for my client so that his customers can select the service they want from a dropdown and type their suburb into a text input field. I have implemented XMLHttpRequest which to my knowledge will check if a webpage exists and if so will load said page. Everything appears to be loading smoothly once you press search but it continues to come up with a HTTP status code of 504 (Gateway Timeout) due to not being allowed access. Is there something in my code that I need to modify or is it a security risk to webflow for me to search this way.
CODE
$(document).ready(function() {
$('#search-click').on('click', function(e) {
var service = document.getElementById("service").value;
var suburb = document.getElementById("suburb").value.toString().toLowerCase();
var url =
String('https://www.blockeddrainrepair.com.au') +
String(service) +
String(suburb);
document.getElementById("result").innerHTML = url;
var request;
if(window.XMLHttpRequest)
request = new XMLHttpRequest();
else
request = new ActiveXObject("Microsoft.XMLHTTP");
request.open('GET', url);
request.send();
console.log(request)
if (request.status === 404) {
alert("We currently do not service your area");
}
})
});
You can find the code in the custom code section on the test-inner page. The published version is here. I have been using “Robina” as a suburb to test as that is a page. I’ve yet to make replace ’ ’ with ‘-’.
Interesting… Since posting it up I cannot seem to replicate the 504 error. Now I just need to modify the code so that it will take said person to the page they have requested.
I appreciate you looking into it thank you Sam
EDIT: For some reason when the request comes back 404 it doesn’t bring up the alert box. How am I able to specifically select the status code from the XMLHttpRequest
$('#search-click').on('click', function(e) {
var service = $('#service').val();
var suburb = $('#suburb').val().toLowerCase();
if(service && suburb) {
var url = `https://www.blockeddrainrepair.com.au${service}${suburb}`;
$('#result').text(url);
$.get(url, function(data) {
alert('Success!\n\n' + data);
}).fail(function() {
alert('We currently do not service your area.');
});
}
else {
alert('Please fill in the form fields.');
}
return false;
});