0

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>
  <input type="checkbox" name="Year" value="2019">2019<br>
  <input type="checkbox" name="Year" value="2018">2018<br>
  <input type="checkbox" name="Year" value="2017">2017<br>
  <input type="checkbox" name="Year" value="2016">2016<p>




   <text>Model</text>
  <input type="checkbox" name="Make" value="choice1">BMW<br>
  <input type="checkbox" name="Make" value="choice2">Ecosport<br>
  <input type="checkbox" name="Make" value="choice3">Acura<br>
  <input type="checkbox" name="Make" value="choice4">Edge<p>
   <input type="button" id="btnSearch" value="Search">

  </form>

Desired Result for example based on the checked box.

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

Checkbox Screenshot

  • What's not working in whatever you've tried so far? Also I recommend [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) interface and its searchParams instead of manual URL generation. – laggingreflex Sep 03 '19 at 03:33
  • can you post your answer using that way so i can upvote. thanks –  Sep 03 '19 at 03:34

2 Answers2

0

Can you try this Live demo link (click on preview to start demo)

$(document).ready(function(){
   $("#btnSearch").click(function(){
      var yearArray = []; 
      $("input:checkbox[name=Year]:checked").each(function(){
         yearArray.push($(this).val());
       });
      var makeArray = []; 
      $("input:checkbox[name=Make]:checked").each(function(){
         makeArray.push($(this).val());
       });
      var url="http://example.com/results?Year="+yearArray.join()+"&Model="+makeArray.join();
        alert(url);
   });
});
Mehran Khan
  • 3,616
  • 1
  • 13
  • 10
0

The URI spec, RFC 3986, specifies that URI path components should not contain unencoded reserved characters and comma is one of those reserved characters. Using the URL interface will take care of this encoding and decoding for you.

Here is a working example.

$(document).ready(function() {
  const url = new URL("http://example.com/results");

  $("#btnSearch").click(function() {
    setSearchParams('Year');
    setSearchParams('Make');
    console.log(url);
  });

  function setSearchParams(name) {
    let searchParams = [];

    $(`input:checkbox[name=${name}]:checked`).each(function() {
      searchParams = [...searchParams, $(this).val()];
    });

    searchParams.length ? url.searchParams.set(name, searchParams.join()) : url.searchParams.delete(name);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="search_something" action=/results method="get">

  <text>Year</text><br>
  <input type="checkbox" name="Year" value="2019">2019<br>
  <input type="checkbox" name="Year" value="2018">2018<br>
  <input type="checkbox" name="Year" value="2017">2017<br>
  <input type="checkbox" name="Year" value="2016">2016<br>

  <text>Model</text><br>
  <input type="checkbox" name="Make" value="choice1">BMW<br>
  <input type="checkbox" name="Make" value="choice2">Ecosport<br>
  <input type="checkbox" name="Make" value="choice3">Acura<br>
  <input type="checkbox" name="Make" value="choice4">Edge<br>
  <input type="button" id="btnSearch" value="Search">

</form>

Now if you want to get the search params. Use url.searchParams.get('Year') and it will automatically decode the URL to give you the data as comma-separated.

Community
  • 1
  • 1
nash11
  • 8,220
  • 3
  • 19
  • 55
  • 1
    See this answer (https://stackoverflow.com/a/8828831/9739129) to know why you shouldn't use comma in your URL. You can also read the link I provided in the answer (Section 2.2) for the best practice when it comes to reserved characters in the URL. – nash11 Sep 03 '19 at 06:39
  • If I only select Year only it should not return this output Not : http://example.com/results?Year=2019%2C2018&Make=" The output should be : Not : http://example.com/results?Year=2019%2C2018 , no Make cause i did not select make –  Sep 03 '19 at 06:40
  • In your current code it returns example.com/results?Year=2019%2C2018&Make=" There should be no Make=" ,if its not selected –  Sep 03 '19 at 06:43
  • are you still there sir ? –  Sep 03 '19 at 06:46
  • I am okay with the(Section 2.2) issue. My concern is that if I dont select Make it should not include Make on the output url like this http://example.com/results?Year=2019%2C2018&Make= , there should no Make = , the correct ouput if i dont select make should be http://example.com/results?Year=2019%2C2018%2C2017 –  Sep 03 '19 at 06:51
  • 1
    @Mr.RajivKumar - I have already updated the answer to take care of that – nash11 Sep 03 '19 at 06:54
  • Hi sir i have a question , are you still there ? –  Sep 03 '19 at 08:46
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198869/discussion-between-mr-rajiv-kumar-and-nash11). –  Sep 03 '19 at 08:46
  • can we talk in chat ? –  Sep 03 '19 at 09:06