create dynamic link based on text input field

javascript php forms hyperlink location-href

19,127

Here we go have fun. just copy the code and save it as html. you don't need php or such. it is way too simple to need a server side code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    $('#button').click(function(e) {  
        var inputvalue = $("#input").val();
        window.location.replace(" http://www.example.com/page/"+inputvalue);

    });
});
</script> 
</head>
<body>

       <input type="text" value="11" id="input"> 
       <button type="button" id="button">Click Me!</button>
</body>
</html>

19,127

Reza Abbasian

Updated on September 15, 2022

Comments

Reza Abbasian over 1 year

I'm trying to make a text input field where visitors can enter a value and then hit go or submit.

Based on the digit number they would be send to a new page.

For example if they enter 123 and hit submit it would send them to http://www.example.com/page/123

Could anybody please help me get this up and running? Thank you
- h.s.o.b.s almost 10 years
  
  Show us what you tried so far.
Reza Abbasian almost 10 years

tnx farzan, but i will use this form in a php script,
Zardaloop almost 10 years

I have wrote the code for you simply just change the url to what you need. and mark this as the accepted answer if that answers your question.
Reza Abbasian almost 10 years

Great Thanks you. but when click on button not redirect me to url.
Zardaloop almost 10 years

it does, I have tested the code and it works. What is the error on console?
Zardaloop almost 10 years

so please mark my answer as the accepted answer just click on the little tick sign on the left hand side of my answer. Thanks Reza jan
Sebastian almost 5 years

Note that if you use window.location.href = "..." instead of window.location.replace(...) the browser back button will work.