создать гиперссылка с гиперссылка + InputBox

Question

У меня есть страница профиля пользователя, который первая часть URL, является статической и последней частью является динамической, как этим

<a href="mywebsite.com/view/[ID]"> View profile </a> 

Я хочу создать InputBox, где я могу ввести идентификатор в поле ввода и данная идентификатор автоматически заполняет гиперссылку со значением поля ввода, подобным этому.

Type user ID [input-box] 
<a href="mywebsite.com/view/[input-box value]"> View profile </a> 

, пожалуйста, сообщите мне, как я могу это сделать.

Answer 1

Вы можете заменить URL с помощью JavaScript с помощью функции location.replace. Вы можете связать это с событием onclick на кнопке.

Type user ID: <input type='text' id='userid'> 
<button type='button' onclick="location.replace('http://mywebsite.com/view/'+document.getElementById('userid').value);">View Profile</button> 

Возможно, вам захочется добавить код обработки ошибок. Что делать, если поле «Идентификатор пользователя» пусто? Что делать, если они набирают «Гриб», и вы ожидаете номер? Что делать, если они набирают ../../../index.html? Если это только для вас, то вы можете предположить, что вы наберете что-то действительное.

Answer 2

Я хотел бы использовать jQuery для этого, то есть:

$("#in").keyup(function() { 
 
var value = $(this).val(); 
 
$("#out").text('<a href="https://mywebsite.com/view/'+value+'"> View profile </a>'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="in"> 
 
<p id="out"></p>

---

PS: How is JavaScript different from Java?

Answer 3

Ваш код может быть, как это,

user ID: <input type="text" id="user_id" value="" onkeypup="javascript:change_url(this.value);”> 

<a href="mywebsite.com/view/” id=“view_profile"> View profile </a> 

Вышеупомянутый код вызывает функцию javascript, change_url() для каждого ключа вверх.

Вы можете написать функцию либо в заголовке между тегами [head], либо внизу, перед тегом [/ body].

<script type="text/javascript"> 

    function change_url(input_user_id) { 

     //-- get the value of old href 
     var x = document.getElementById("view_profile").href; 

     //-- append input-field user id 
     x = x + "" + input_user_id; 

     //-- set href value back with appened user_id 
     document.getElementById("view_profile").href = x; 
    } 

</script>