Как создать простую HTML-форму для создания ссылки из двух полей формы?

Question

На работе одной из систем я использую выходы расписаний рейса. URL для каждого рейса состоит из адреса формы, за которым следует ?voyageCode=, за которым следует номер рейса, который представляет собой двухбуквенный префикс маршрута и трехзначный номер рейса.

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

На практике я пытаюсь построитьформа со следующими данными:

1. Раскрывающееся меню или набор переключателей для выбора двухбуквенного кода маршрута;
2. Текстовое поле для ввода трехзначного маршрутаcode;
3. Кнопка или ссылка для объединения этих входов в ссылку в формате [LINK]?voyageCode=[ROUTE CODE][VOYAGE NUMBER]

Мои знания HTML довольно устарели, и я никогда особо не работал с формами,Кто-нибудь может посоветовать, как мне это построить?

Answer 1

Если вы действительно хотите объединить коды в один параметр запроса, вам придется использовать Javascript для извлечения значений из двух полей и изменения местоположения. Вам не нужен Javascript, если вы помещаете значения в отдельные параметры, как в ?routeCode=xx&voyageNumber=123. В этом случае вы просто дадите элементу выбора атрибут name=routeCode, а для поля ввода атрибут name=voyageNumber.

. Если вы захотите использовать первый подход, у вас будет что-то вроде * 1006. *

document.getElementById("idOfSubmitButton").addEventListener("load", function() {
    const routeCode = document.getElementById("idOfSelectElement").value;
    const voyageNumber = document.getElementById("idOfInputField").value;
    location.href = "base URL here" + "?voyageCode=" + routeCode + voyageNumber;
});

Answer 2

Почему бы вам не использовать тег select для выпадающего списка и классический input text для маршрута coude?

Затем для части ссылки вы должны захватить событие click на своемнажмите onClick и затем вызовите небольшую функцию, которая в основном сделает это:

function concatRouteCode(){
    var select= document.getElementById("routeCodeLetters");
    var routeCodeLetters = select.options[select.selectedIndex].value;
    var routeCodeNumber = document.getElementById('routeCode').value;

    return routeCodeLettres+routeCodeNumber;
}