Передача выбранного значения в параметр URL ссылки

Question

У меня есть кнопка Buy, на которую пользователь может нажать, чтобы купить конкретный продукт.
Это приводит их к форме покупки, которую я построил.
В одном из полей этой формы используется параметр URL, поэтому он знает, какой продукт хочет купить пользователь.

Итак, я хочу иметь поле выбора HTML где-то на предыдущей странице (где находится кнопка Buy) и позволить пользователю выбирать продукт там.
Затем, когда они нажимают кнопку Buy, она передает выбранное значение через URL. Например:

// Some content here promoting the three products.

// Now I want a select field for the user to choose one of the three products, like this.

<select id="productSelect">
    <option value="product1">Product 1</option>
    <option value="product2">Product 2</option>
    <option value="product3">Product 3</option>
</select>

// Then I have some more content here showing the pros/cons of each product.

// Finally, I have a buy button at the bottom of the page that takes them to the page with the purchase form. 
// Here is where I want to grab the value of the select field and pass it through via the "product" parameter like this.

<a class="button" href="/buy/?product='select value here'">Buy</a>

Answer 1

Сделайте это с помощью JavaScript:

document.getElementsByClassName("button")[0].addEventListener("click", function(event) {
    var product = document.getElementById("productSelect").value;
    event.target.setAttribute("href", "/buy?product=" + product);
});

Это будет работать.