Custom Suburb Search

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");
}
})
});

Any help with this will be awesome.

Cheers,
Ben

1 Like

The code looks fine to me, there aren’t any syntax errors.

Perhaps show us where/how you have implemented it?

2 Likes

Hey @samliew,
Here is the preview of the site:
https://preview.webflow.com/preview/blocked-drain-repair?utm_source=blocked-drain-repair&preview=9cb7a174d199fb6069bf2a0c8bb50e79

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 ‘-’.

1 Like

Looks working to me

Screenshot_2018-10-12_211059

1 Like

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

Thank you in advance

1 Like
$('#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;
});
1 Like

@samliew You are the scripting king my friend :pray:. Absolutely brilliant. I can’t put enough hearts on your answer.

Simplistic and functional without bloat.

Thank you again Sam, Legendary :star_struck: