lundi 2 septembre 2019

Add comma seperated value to URL based on the checked box using javascript

Based on the question below and example , I wanted to achieved that result based on the clicked box with the name and value to be added on the url.example of that is based on the checked box the url output https://test.com/searchnewdata?Year=2020,2019,2018&Model=EcoSport,Edge.

Basic JS basis

$(document).ready(function(){
   $("#btnSearch").click(function(){
       //var url="http://example.com/results?choice=choice2&choice=choice4"
       var url="http://example.com/results?choice=";
       var flag=false;
     $("input:checkbox[name=choice]:checked").each(function(){
         if(!flag)
         {
           url=url+$(this).val();
           flag=true;// To trace if first query string added
         }
         else
         {
             url=url+"&choice="+$(this).val();
         }         
      });
        alert(url);
   });
});

HTML CODE

<form name="search_something" action=/results method="get">

   <text>Year</text>
   <li class="checkbox margin-top-x"><label
        for="refine-search-Year-2019"><input type="checkbox"
                                                                        name="Year" value="2019"
                                                                        id="refine-search-Year-2019">2019 <span
                                                                        class="filterVehicleCount">(15)</span></label>
                                                            </li>
                                                            <li class="checkbox margin-top-x"><label
                                                                    for="refine-search-Year-2018"><input type="checkbox"
                                                                        name="Year" value="2018"
                                                                        id="refine-search-Year-2018">2018 <span
                                                                        class="filterVehicleCount">(30)</span></label>
                                                            </li>
                                                            <li class="checkbox margin-top-x"><label
                                                                    for="refine-search-Year-2017"><input type="checkbox"
                                                                        name="Year" value="2017"
                                                                        id="refine-search-Year-2017">2017 <span
                                                                        class="filterVehicleCount">(43)</span></label>
                                                            </li>
                                                            <li class="checkbox margin-top-x"><label
                                                                    for="refine-search-Year-2016"><input type="checkbox"
                                                                        name="Year" value="2016"
                                                                        id="refine-search-Year-2016">2016 <span
                                                                        class="filterVehicleCount">(30)</span></label>
                                                            </li>

                                <text>Model</text>

                              <li class="checkbox margin-top-x"><label
                                                                    for="refine-search-Make-Acura"><input
                                                                        type="checkbox" name="Make" value="Ecosport"
                                                                        id="refine-search-Make-Acura"><span
                                                                        class="notranslate">Ecosport</span> <span
                                                                        class="filterVehicleCount">(1)</span></label>
                                                            </li>
                                                            <li class="checkbox margin-top-x"><label
                                                                    for="refine-search-Make-BMW"><input type="checkbox"
                                                                        name="Make" value="Edge"
                                                                        id="refine-search-Make-BMW"><span
                                                                        class="notranslate">Edge</span> <span
                                                                        class="filterVehicleCount">(1)</span></label>
                                                            </li>                                                           

  </form>

Desired Result for example based on the checked box.

https://test.com/searchnewdata?Year=2020,2019,2018&Model=EcoSport,Edge

Checkbox Screenshot




Aucun commentaire:

Enregistrer un commentaire