Streaming live at 10am (PST)

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.


$(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('') +
    String(service) +
    document.getElementById("result").innerHTML = url;
var request;
    request = new XMLHttpRequest();
    request = new ActiveXObject("Microsoft.XMLHTTP");'GET', url);
if (request.status === 404) {
    alert("We currently do not service your area");

Any help with this will be awesome.


1 Like

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

Perhaps show us where/how you have implemented it?


Hey @samliew,
Here is the preview of the site:

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


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 = `${service}${suburb}`;
        $.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: