Simple Form Redirection

Standard

Recently, a friend asked if I could come up with a simple form that would allow you to enter a value into a field, hit the submit button, and have it take the user to a URL with the value they entered in the field appended to the URL. I’m not great with JavaScript, but I figured it’d be a good learning exercise for me.

Scripting is an area I have never been comfortable in. I can work with existing code without any problems, but writing my own has always been a challenge for me.

Here’s what I came up with:

<form action="http://subdomain.example.com/" method="post" name="redirect">
<input type="text" value="" name="url" id="" />
<input type="submit" value="Submit" name="submit"
onclick="this.form.action=document.redirect.action + document.redirect.url.value;" />
</form>

View Code on Snipplr

To use this, simply change the URL set in the form action to your own URL. Once the user hits submit, the form will post to http://subdomain.example.com/XXXX where ‘XXXX’ equals the value of the text field. Obviously, there’s no validation whatsoever. Also, the domain needs to have a slash after it or it’ll fail in IE. If a user enters a value that doesn’t pair up with a URL that resolves, it won’t work.

6 thoughts on “Simple Form Redirection

  1. It’s even simpler than that, Chris.

    Just change the method to GET instead of POST. Then all input fields are appended to the action URL as fieldname=value.

    form action=”http://subdomain.example.com” method=”GET” name=”redirect”
    input type=”text” value=”” name=”url” id=”” /
    input type=”submit” value=”Submit” name=”submit”/
    /form

  2. *nods* Right, but in this case the URL needed to resolve to a folder on the server, assuming it existed. I guess I should of explained the reasoning behind why it needed to be done this way.

    Client needed a simple way for their clients to access their folder on server. Each was setup as sub.domain.com/XXXX where XXXX = their client id. The form itself was at http://www.domain.com and needed to direct the user to sub.domain.com/XXXX.

  3. Ah, that makes more sense. I figured you knew what I posted, but… :)

    I remember seeing a form of this way back in the day (mid 90s?) that was used as a rudimentary security-by-obscurity password method. I think the one I saw added “.htm” so that users could only access pages if they knew their names.

    Anyway… carry on. :)

  4. It’s even simpler than that, Chris.

    Just change the method to GET instead of POST. Then all input fields are appended to the action URL as fieldname=value.

    <form action=”http://subdomain.example.com” method=”GET” name=”redirect”>
    <input type=”text” value=”” name=”url” id=”” />
    <input type=”submit” value=”Submit” name=”submit”/>
    </form>

  5. *nods* Right, but in this case the URL needed to resolve to a folder on the server, assuming it existed. I guess I should of explained the reasoning behind why it needed to be done this way.

    Client needed a simple way for their clients to access their folder on server. Each was setup as sub.domain.com/XXXX where XXXX = their client id. The form itself was at http://www.domain.com and needed to direct the user to sub.domain.com/XXXX.

  6. Ah, that makes more sense. I figured you knew what I posted, but… :)

    I remember seeing a form of this way back in the day (mid 90s?) that was used as a rudimentary security-by-obscurity password method. I think the one I saw added “.htm” so that users could only access pages if they knew their names.

    Anyway… carry on. :)

Comments are closed.