Form value creates a URL

Question

I am trying to create a very simple form with a little bit of extra code to get the results as described below: the problem is I don't know how to go about doing it.

What I am trying to achieve:

I have a form which has one text input box with the name 'url'. I want the user to be able to input a number into the box. When the user submits the form they should be redirected to a new website. The new website's URL will be based on the number inputted into the form.

The first part of the URL will always be: http://name.com/

Then the number that the user inputted will be attached to the end. So if 123456 is entered into the form then on submission of the form the user would be taken to http://name.com/123456

How can I get this working? I am guessing it will require JavaScript or something.

This does require some programming - either client side using Javascript, or server side using one of many server side technologies. — Oded, Aug 04 '12 at 20:31
In javascript you would grab the current URL, the value input and simply redirect to a newly constructed URL from them - it is not complicated. — Oded, Aug 04 '12 at 20:32
@oded Its not complicated if you know the answer. Clearly i don't else i wouldn't be asking. For someone with such a high reputation on this site your answer was not entirely helpful. Everyone has to learn from someone or somewhere.... — andrew anderson, Aug 04 '12 at 20:34
It is not an answer - it is a comment. I agree that one needs to learn from somewhere, but this question doesn't detail any of effort you have put into finding an answer - code, notions etc... We _do_ expect some effort and evidence of that effort from those who ask questions - Stack Overflow is not a "give me teh codez" kind of site. — Oded, Aug 04 '12 at 20:36

score 17 · Accepted Answer · edited Oct 29 '19 at 14:35

17

<script>
    function process()
    {
        var url = "http://name.com/" + document.getElementById("url").value;
        location.href = url;
        return false;
    }
</script>

<form onSubmit="return process();">
    URL: <input type="text" name="url" id="url">
    <input type="submit" value="go">
</form>

edited Oct 29 '19 at 14:35

Peter Mortensen

30,738
21
105
131

answered Aug 04 '12 at 20:36

Hanky Panky

46,730
8
72
95

1

keep in mind that this wont submit other data such as _GET or _POST data along with the form. – jeremy Aug 04 '12 at 20:52

score 8 · Answer 2 · answered Aug 04 '12 at 20:37

8

You can add onsubmit="this.action='http://google.com/'+this.fieldName.value;" to your tag.

answered Aug 04 '12 at 20:37

jeremy

9,965
4
39
59

This one is the cleanest, but needs some clarification. In the case of the initial poster, it should be something like ```
```
– Francesco Potortì Nov 21 '22 at 12:11

Chris Clower · Answer 3 · 2012-08-04T20:49:28.697

2

This should do it:

<script type="text/javascript">
    function goToPage() {
        var page = document.getElementById('page').value;
        window.location = "http://name.com/" + page;
    }
</script>
<input type="text" id="page" />
<input type="submit" value="submit" onclick="goToPage();" />

edited Aug 04 '12 at 20:49

answered Aug 04 '12 at 20:38

Chris Clower

5,036
2
18
29

Form value creates a URL

3 Answers3

Linked