Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Form value creates a URL

Tags:

html

forms

url

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.

like image 337
andrew anderson Avatar asked Aug 04 '12 20:08

andrew anderson


People also ask

Which attribute value for input tag is used to take URL as input?

The <input> element's value attribute contains a string which is automatically validated as conforming to URL syntax.

What is input URL?

The <input type="url"> defines a field for entering a URL. The input value is automatically validated before the form can be submitted.

How do you link a form in HTML?

To Link HTML Input type submit to another page using HTML Form tags, we have to declare/write our HTML input type submit button between HTML Form Tag's Starting and Closing Tags. In HTML Form tag's Action attribute, we have to give our Another Web page's link (Where we want to Link out Input type submit Button).

How do I display form data in HTML?

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. The formtarget attribute overrides the target attribute of the <form> element. Note: The formtarget attribute is new for the <input> element with type="submit" in HTML5.


2 Answers

<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>
like image 61
Hanky Panky Avatar answered Oct 26 '22 13:10

Hanky Panky


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

like image 36
jeremy Avatar answered Oct 26 '22 13:10

jeremy