更新或附加URL参数,而不是替换整个URL

时间:2014-07-16 19:28:15

标签: javascript php html

我正在尝试建立一个周历。目前,日历具有前向和后向链接,通过在末尾附加?date=来构建新URL。例如:

<a href="<?php get_current_url() ?>/?date=2014-07-23">Next week</a>
<a href="<?php get_current_url() ?>/?date=2014-07-09">Prev week</a>

我还想在日历中添加一个过滤器,只允许在日历上显示某些事件类型。我使用GET方法提出了以下内容:

<form method="GET" action="">
  <select name="type">
    <option selected disabled value=''>Type</option>
    // event option stuff
  </select>
  <input type="submit" value="submit">
</form>

提交后,此表单只会重建一个新的网址,并在最后添加?type=<something>。如果URL已经有一个日期参数,我的表单将忽略它。例如:

http://www.example.com/?date=2014-07-16

变为:

http://www.example.com/?type=dinner-date

同样,周导航会忽略过滤器。

是否有一种简单的方法可以让过滤器和导航链接协同工作?

例如,如果?date=已存在,则&type=会附加到网址中。如果一个或两个参数已经存在,则只需更新这些值。

1 个答案:

答案 0 :(得分:1)

我假设您可以使用jQuery:

<form method="GET" action="http://www.example.com">
    <input type="hidden" name="date" id="date" value="<?php echo date;?>" />
    <select name="type">
        <option selected disabled value=''>Type</option>
        <!-- event option stuff -->
    </select>
    <input type="submit" value="submit" onclick="buildLink($('#date').val());">
    <br>
    <input type=button onclick="buildLink('2014-07-23');" value="Next week" />
    <input type=button onclick="buildLink('2014-07-09');" value="Prev week" />
</form>

然后这是一个提交表单的简单Javascript函数,根据您的选择,日期在提交之前在表单中更改:

function buildLink(date) {
    $('#date').val(date);
    $('form').submit();
}