CODEWITHSUNDEEP
jqueryhtml
ilyas Jumadurdyew
ilyas Jumadurdyew

Reputation: 930

How to create url according to the checked checkboxes using jQuery

I have a small form like this

<form name="search_something" action=/results method="get">
<input type=checkbox name="choice1">Choice 1<br>
<input type=checkbox name="choice2">Choice 2<br>
<input type=checkbox name="choice3">Choice 3<br>
<input type=checkbox name="choice4">Choice 4<p>
<input type=submit value="Search">
</form>

If I check the choice1 & choice4 and then I click "Search" it returns me url like this:

http://example.com/results?choice2=on&choice4=on

But what I want is to make url like this:

http://example.com/results?choice=choice2&choice=choice4

Please help me.

Upvotes: 0

Views: 7187

Answers (3)

Nono
Nono

Reputation: 7302

Please tell me how will you get params value from url query string if all params key will same. anyway its very simple, you can use jQuery:

javascript code:

/**
 * jQuery
 * Document ready function
 */
$(function () {
    // url to post form
    var url = "http://example.com/results?";
    // tmp array var
    var choice = [];
    // when button click
    $("input:button[value='Search']").click(function () {
        // select all checkbox whos name start with choice
        $("input:checkbox[name^='choice']:checked").each(function (i, el) {
            // make url string
            choice += "choice=" + $(el).attr('name') + "&";
        });
        // delete last &
        choice = choice.slice(0, -1);
        // set form action and do post :) Yeah!!
        $('form').attr("action", url + choice).submit();
    });
});

html code:

<form name="search_something" action="" method="post">
    <input type="checkbox" name="choice1">Choice 1 <br />
    <input type="checkbox" name="choice2">Choice 2 <br />
    <input type="checkbox" name="choice3">Choice 3 <br />
    <input type="checkbox" name="choice4">Choice 4 <br />
    <input type="button" value="Search">
</form>

Upvotes: 0

Adisak Anusornsrirung
Adisak Anusornsrirung

Reputation: 690

By using your html code (not change your html):

$(function(){
    var url = "http://example.com/results";
    var choice = "";

    $('input[type=checkbox]').click(function(){
        choice = "";
        $('input[type=checkbox]').each(function (){
            if (this.checked)
                if (choice.length == 0)
                    choice += '?choice=' + this.name;
                else
                    choice += '&choice=' + this.name;
        });
        $('form').attr("action", url + choice);
    });
});

Upvotes: 1

Pawan
Pawan

Reputation: 1744

You can do it like below.(You have to modify your existing html a little bit as below):

HTML

<form name="search_something" action=/results method="get">
  <input type="checkbox" name="choice" value="choice1">Choice 1<br>
  <input type="checkbox" name="choice" value="choice2">Choice 2<br>
  <input type="checkbox" name="choice" value="choice3">Choice 3<br>
  <input type="checkbox" name="choice" value="choice4">Choice 4<p>
  <input type="button" id="btnSearch" value="Search">
</form>

JS:

$(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);
     window.location = url;
   });
});

DEMO

Upvotes: 4

Related Questions