Redirect to URL using code in GET form

Question

I am working on a project in Squarespace to create a very basic combination lock form where inputting different codes (invoice #'s) takes you to specific URLs. Because it is Squarespace, I don't think I have very many options for coding other than html (but I could be wrong - I'm very much in learning-mode!!).. I did find a similar question here Query String Redirection: How to change form input to URL?, but how to implement the response into squarespace's code block is way beyond me...

Right now my code looks like this:

    </span></p>
<div style="margin-top:5px;">
    <form method="GET" action="/our-team/bob">
    <div class="input-append">
    <input class="span2" id="appendedInputButton" name="code" type="text">
        <button class="btn btn-primary" type="submit">Submit!</button>
      </div>
    </form>
</div>

Using this code, the form takes you to the our-team/bob page every time, regardless of what is entered into the form. e.g. if 0000 is entered into the form, I am redirected to www.mydomain.com/our-team/bob?code=0000 -- which is still just the our-team/bob page; if 1234 is entered into the form, I am redirected to www.mydomain.com/our-team/bob?code=1234 --- which is still just the our-team/bob page; and if nothing is entered into the form and I click submit, it still redirects me to the our-team/bob page.

Ideally, each unique code will bring me to a unique page that I have developed. But squarespace doesn't let me use a "?" in a page url, so I can't just redirect that way. I would like to be able to enter a specific code that takes me to a corresponding page and need to check the code against an array with some simple logic like this:

If string is 1234, go to /our-team/bob If string is 5555, go to /our-team/jane If string is 0000, go to /our-team/allen (etc.) If string is anything else, show an error and not leave the page at all OR go to some sort of error page.

Hopefully this makes sense (and hopefully it is possible to do!) Please let me know if there is any other information I can provide you with. Your help is VERY much appreciated!

Answer 1

What you are asking for is not possible with HTML and standard HTTP protocol. The form values are either sent as query string parameters (if you are using GET) or as part of the request body (if you are using POST). Here you seem to be asking to make some mapping between the value entered by the user and the specific page being called on the server. The only way to achieve that is to use some javascript. Subscribe to the onsubmit event of the form and write the mapping between the client value and the server one:

<form method="GET" action="/our-team/bob" onsubmit="return handleSubmit();">
    ...
</form>

and then you could define the handleSubmit function to implement your custom logic:

<script>
    var handleSubmit = function() {
        var value = document.getElementById('appendedInputButton').value;
        if (value === '1234') {
            window.location.href = '/bob';
        } else if (value === '5555') {
            window.location.href = '/jane';
        } else if (value === '0000') {
            window.location.href = '/allen';
        } else {
            window.location.href = '/some-default-page';
        }
        return false;
    };
</script>