Отправить переменные get для довольно URL

Question

Я создаю симпатичную базу URL, и у меня проблема с получением переменных в форме. У меня есть URL, как localhost/events/1 (1 - переменная get $_GET['eventID']). Я хочу отправить eventID с формой, как показано ниже

<select name='eventID'>
    <option value='1'>firstEvent</option>
    <option value='2'>secondEvent</option>
    <option value='3'>thirdEvent</option>
</select>

но когда я нажимаю кнопку отправки, чтобы отправить информацию на страницу, и мой URL-адрес меняется на этот

localhost/events/?eventID=1

но я хочу, чтобы мой URL был похож на это

localhost/events/1

как я мог достичь этого?

Answer 1

Согласно W3C Знак вопроса является частью определения отправки формы с помощью метода GET, поэтому вы не можете сделать это на самом деле. но вы можете перенаправить страницу с помощью JavaScript.

 <form id="form" method="get">
 <select name='eventID'>
     <option value='1'>firstEvent</option>
     <option value='2'>secondEvent</option>
     <option value='3'>thirdEvent</option>
 </select>
 <input type="button" onclick="document.location.href= '/events/' + form.eventID.value" value="Submit">
 </form>

Answer 2

Если вы хотите сделать это на стороне клиента, вы можете использовать событие javascript onsubmit и перенаправить на нужную страницу. Например:

<script type="text/javascript">
function yourFunction()
{
    var sel = document.getElementById('eventID');
    if (sel.selectedIndex !== -1)
    {
        window.location.href = '/events/' + sel.options[sel.selectedIndex].value;
    }

    return false;
}
</script>

<form method="get" onsubmit="return yourFunction()">
<select name="eventID" id="eventID">
    <option value="1">firstEvent</option>
    <option value="2">secondEvent</option>
    <option value="3">thirdEvent</option>
</select>
<input type="submit">
</form>

Answer 3

Спасибо всем. Я хочу решение без javascript или jquery, но, кажется, нет способа сделать это без них обоих. Я наконец написал код в Jquery для решения этой проблемы.

 <form id="events" method="get">
    <select name='eventID'>
     <option value='1'>firstEvent</option>
     <option value='2'>secondEvent</option>
     <option value='3'>thirdEvent</option>
    </select>
 <input type="button" onclick="document.location.href= '/events/' + form.eventID.value" value="Submit">
 </form>

$('#events').on('submit', function(e){
    e.preventDefault();
    document.location.href= '/events/' + $(this).find('select#sportID').val();
})