Question

我正在创建一个漂亮的网址基础网站，我在表单中获取变量时出现问题。我有一个类似localhost/events/1的网址（1是获取变量$ _GET [＆＃39; eventID＆＃39;]）。我想使用下面的表单发送eventID

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

但是当我点击提交按钮将信息发送到页面并且我的网址更改为此

localhost/events/?eventID=1

但我希望我的网址看起来像这样

localhost/events/1

我怎么能达到这个目的？

Answer 1

如果您想在客户端执行此操作，可以使用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 2

根据W3C问号是form submission with the GET method定义的一部分，因此您无法实际执行此操作。但你可以用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 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();
})

发送漂亮网址的获取变量

3 个答案: