pretty url에 대한 변수 가져 오기

Question

예쁜 URL 기반 웹을 만들고 양식에 변수를 가져 오는 데 문제가 있습니다. 나는 localhost/events/1과 같은 URL을 가지고 있습니다 (1은 $ _GET [ 'eventID'] 변수를 얻습니다). 나는 아래

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

같은 양식을 사용하여 이벤트 ID를 보내려하지만 난 클릭하면 페이지에 정보를 보낼 수있는 버튼이

localhost/events/?eventID=1 

내 URL 변경을 제출하지만 난 내 URL을 원하는 이처럼 보이게

localhost/events/1 

어떻게하면 좋을까요?

Answer 1

클라이언트 측에서이 작업을 수행하려는 경우 자바 스크립트 을 사용하여 이벤트를 제출하고 원하는 페이지로 리디렉션 할 수 있습니다. 예를 들어 :

<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 2

W3C에 따르면 물음표는 form submission with the GET method의 정의의 일부입니다, 그래서 당신은 실제로이 작업을 수행 할 수 없습니다. 하지만 자바 스크립트로 페이지를 리디렉션 할 수 있습니다.

<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 3

덕분에. javacript 나 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(); 
})