Search code examples
javascripthtmlhrefmultiple-select

Dealing with href when selecting multiple options


I am trying to give the users the option to select multiple years in my webpage, so I used the checkbox type. Currently, I am struggling at redirecting pages when the user select multiple years.

In HTML

<h4> Brands </h4>
<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#" class="brands" name = "Nike">Nike</a></li>
        <li><a href="#" class="brands" name = "Adidas">Adidas</a></li>
        <li><a href="#" class="brands" name = "Vans">Vans</a></li>
    </ul>
</div>

<h4> Years </h4>
<div class="mutliSelect">
    <ul>
        <li>
            <input type="checkbox" value="2010" />2010</li>
        <li>
            <input type="checkbox" value="2011" />2011</li>
        <li>
            <input type="checkbox" value="2012" />2012</li>
        <li>
            <input type="checkbox" value="2013" />2013</li>
        <li>
            <input type="checkbox" value="2014" />2014</li>
        <li>
            <input type="checkbox" value="2015" />2015</li>
    </ul>
</div>

Previously I am able to select one year with dropdown menu

<li><a href="{% url 'data:getdata' brands '2014' %}" class="year">2015</a></li>

Now, I want to redirect to a link after the user select a brand and multiple years, such as:

data/Nike/(store multiple years somehow)


Solution

  • Suppose the URL you want to redirect looks like:

     http://www.example.com?data=...
    

    and you want to send as data: 2010,2011,2013. You can send it as:

     http://www.example.com?data='{"List":[2010,2011,2013]}'
    

    and at the receiver handle the received string as a stringifyed JSON.