使用a在网址上不显示“名称”

Question

我正在写一个简单的表格，但我遇到了一个问题。表单必须生成这样的URL

https://website.com/properties/hotelvinadelmar?locale=es&check_in_date=22-03-2019&check_out_date=25-03-2019&number_adults=4&number_children=9

/ properties /（在本例中为“hotelvinadelmar”）之后的部分是特定酒店的代码，而其余部分是客户提供的用于检查是否有空的信息。 我写了这个表格：

Sucursal: <br>
<select name="test" id="id" required>       
        <option value="hotelvinadelmar?locale=es">Viña del Mar</option>
        <option value="hotelsantiago1?locale=es">Nueva Providencia</option>
        <option value="hotelsantiago2?locale=es">Providencia</option></select> 
    <br><br>
</select>

这几乎可以工作，但会产生这样的网址 (...)/properties/?test=hotelvinadelmar?locale=es&number_adults=1(...) 这是创建一个像这样结构的网址 [form action (the url I entered)][Option Name][selected Option Value] 但事情必须是这样的 [form action (the url I entered)][selected Option Value]

怎么能实现这一目标？提前致谢！

Answer 1

这是正确的行为，因为提交的表单数据test=hotelvinadelmar将在URL (...)/properties/之后添加，为了获得所需的结果，您可以尝试将action属性添加到表单中作为<form action="/hotel">并将select更改为：

<select name="hotelname" required>       
        <option value="hotelvinadelmar">Viña del Mar</option>
        <option value="hotelsantiago1">Nueva Providencia</option>
        <option value="hotelsantiago2">Providencia</option></select> 
    <br><br>
</select>  

生成的链接将是：(...)/properties/hotel?name=hotelvinadelmar(...)

或者您可以使用onSubmit事件的javascript函数，例如：

<script>
function submitForm(){
    var hotelName = document.getElementById('hotelName').value;
    var param1Value = document.getElementById('id').value;
    switch(hotelName) {
        case 'hotelvinadelmar':
           window.location.href = '/hotelvinadelmar?param1=' + param1Value + '&param2=' + (...);
           break;
        case 'hotelsantiago1':
           window.location.href = '/hotelsantiago1?param1=' + param1Value;
           break;

    }
    // stop submit
    return false;
}
</script>
<form onsubmit="submitForm()" method="get">
    <select id="hotelName" required>       
        <option value="hotelvinadelmar">Viña del Mar</option>
        <option value="hotelsantiago1">Nueva Providencia</option>
        <option value="hotelsantiago2">Providencia</option></select> 
    </select> 
    <input type="submit" value="submit"/>
</form>