Как создать ссылку, включающую пользовательский ввод из поля ввода

Question

Я ищу интерфейс с веб-системой, содержащей статьи, определяемые уникальными кодами.

например, Система заказов содержит заказы ORD001, ORD002

Система заказов содержит веб-сайт, где каждый заказ имеет свою уникальную страницу.

Публичный c URL для просмотра ORD001 будет www.sampleorders.com/ORD001, ORD002 будет www.sampleorders.com/ORD002

Я хотел бы запретить пользователю вводить поле ввода, где он может ввести свой номер заказа и перенаправить на правильный веб-адрес.

Существует ли простой способ объединить предопределенную строку (www.sampleorders.com/) и пользовательский ввод формы (ORD001), используя html и javascript?

Answer 1

Вы можете использовать javascript и / или jquery для этого.

попробуйте передать этот идентификатор сообщения (в URL) во фрагменте ниже.

$("input#post_id").on("change", function(){ // Whenever this field changes

  var post_id = $("input#post_id").val(); // Get the value of the field
  
  $("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Which post would you load ?</label>

<br>

<input id="post_id" type="text">

<a id="link" href="#">Go</a>