Is it possible to update url link based on user text input?

Question

For example, I know that something can be done in Javascript that allows users to update text based on user text input:

<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>

Check out the above code in action at: tizag.com/javascriptT/javascript- innerHTML.php

However, instead of the above code, I would like to know if it is possible to do something similar for a URL link. Below I set a step-by-step example of what I would like to do when a user enters text:

• Original link: http://www.google.com/search?q=

• Entering a user in a text field: ESPN

• User clicks button to send text to text field

• End link: http://www.google.com/search?q=espn

... BTW... , , .

Answer 1

JS, :

<a id="reflectedlink" href="http://www.google.com/search">http://www.google.com/search</a>
<input id="searchterm"/>

<script type="text/javascript">
    var link= document.getElementById('reflectedlink');
    var input= document.getElementById('searchterm');
    input.onchange=input.onkeyup= function() {
        link.search= '?q='+encodeURIComponent(input.value);
        link.firstChild.data= link.href;
    };
</script>

:

• ( );

• , , , ;

• encodeURIComponent(), , - -ASCII URL- ;

• search Location (link), URL-;

• data node , URL. innerHTML , HTML, & <.

Answer 2

# 1:
# 2:
# 3: URL

: http://jsfiddle.net/maniator/K3D2v/show/
: http://jsfiddle.net/maniator/K3D2v/embedded/

HTML:

<form id="theForm">
    <input id='subj'/>
    <input type='submit'/>
</form>

JS:

var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');

theForm.onsubmit = function(e){
    location = "http://jsfiddle.net/maniator/K3D2v/show/#" 
                              + encodeURIComponent(theInput.value);
    return false;
}

Answer 3

- , ​​ jQuery, JavaScript. jQuery , , URL- window.location, URL-

jsFiddle

HTML

<input type="text" id="q" />
<input type="button" id="submit" value="submit" />

JavaScript

$(function () {
    $('#submit').click(function() {
        var url = "http://www.google.com/search?q=";
        url += $('#q').val();
        window.location = url;
    });
});

Answer 4

:

<script type="text/javascript">
function changeText2(){
    var userInput = document.getElementById('userInput').value;
    var lnk = document.getElementById('lnk');
    lnk.href = "http://www.google.com?q=" + userInput;
    lnk.innerHTML = lnk.href;
}
</script>
Here is a link : <a href="" id=lnk>nothing here yet</a> <br>
<input type='text' id='userInput' value='Enter Search String Here' />
<input type='button' onclick='changeText2()' value='Change Link'/>

Answer 5

, :

<input type="text" name="prog_site" id="prog_site" value="http://www.edit-me.com" />
<a href="#" onclick="this.href=document.getElementById('prog_site').value" target="_blank">Open URL</a>

javascript, . ID , .