Multiple checkbox values search javascript

Question

I have a list of keywords, and I've created a checkbox for each. My template has a form wrapping the content, so I can't have a nested form around the checkbox list.

How can I send the selected checkbox values to my search results page?

The form that wraps the content doesn't have any actions or methods applied:

<form id="BoostMasterForm" runat="server">

This is an example of the HTML markup of my checkbox list (the checkboxes will be different depending on the keywords):

<div class="checkboxes">
  <ul>
    <li>
      <input type="checkbox" name="search" class="options" value="one">
      <label>one</label>
    </li>
    <li>
      <input type="checkbox" name="search" class="options" value="two">
      <label>two</label>
    </li>
    <li>
      <input type="checkbox" name="search" class="options" value="three">
      <label>three</label>
    </li>
  </ul>
  <input type="submit" value="Submit"/>
</div>

How can I use javascript or jQuery to submit the values of the multiple checkbox selections and on submit action them to the following URL: '/imagery/image-search.aspx'

The resulting URL for a search where option 1 and 3 are submitted should be: '/imagery/image-search.aspx?search=one%20three'

I'm using this javascript that I found on another post, however I need it to append the form an the action and the method. My website is ASP, where this post is for a PHP site:

Sending multiple checkbox options

$('.options').click(function() {
    var selectedItems = new Array();
    $(".checkboxes input:checkbox[name=search]:checked").each(function() {selectedItems.push($(this).val());});
    var data = selectedItems.join('|');
    $("#opts").val(data);
});

If anyone can help, it'd be greatly appreciated.

Cheers, JV

Its confusing what you want. Do you want to append some thing or just pass the URL like you said — polin
– polin, Commented Nov 8, 2012 at 5:00
I'm not sure whether it needs the action and method appended to the form, or not. But it needs to send the values of the selected checkbox when submitted. — JV10
– JV10, Commented Nov 8, 2012 at 5:04
I got it working thanks to @mleroy your patience and effort was greatly appreciated. The problem was the existing form that was in my page template wasn't allowing the page to submit. I removed the form and it worked. Thanks again — JV10
– JV10, Commented Nov 9, 2012 at 0:34

siger · Accepted Answer · 2012-11-08 05:38:44Z

1

This works for your example.

$('input[type=submit]').on('click', function(evt) {
    var selectedValues = [];
    var url = '/imagery/image-search.aspx?search=';

    $('input[type=checkbox]:checked').each(function() {
        selectedValues.push($(this).val());
    });

    url += selectedValues.join(' ');

    window.location = url;
});

answered Nov 8, 2012 at 5:38

siger

3,1472 gold badges33 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

JV10 Over a year ago

I just tried that, but it didn't work. Does it need to reference the form id at all?

JV10 Over a year ago

I can get it working in jsfiddle and do have jQuery 1.7.2 on my page, but I can't get it working. jsfiddle.net/qKHd8/1

siger Over a year ago

What doesn't work exactly? Can you open the javascript console of your browser and see if any error shows up? How do you include jQuery and where did you put that code on your page? Post the entire code if needed.

JV10 Over a year ago

Ok I've got it working with the alert displaying on my site. But when I change it to window.location = url; it doesn't go to the image-search.aspx page

siger Over a year ago

Try making the url an absolute url (so yourdomain.com/imagery/...). Provide more details as to what's not working exactly and if you're seeing errors.

|

polin · Accepted Answer · 2012-11-08 05:37:42Z

0

I am still not clear. But here is a code where you can build an string and pass it

    <script type="text/javascript">
function fnc()
{
    elements=document.getElementById("BoostMasterForm").elements;
    str="";
    for(i=0;i<elements.length;++i)
    {
        if(elements[i].type=='checkbox' && elements[i].checked)
        str=str+elements[i].value;
    }
    alert(str);
    //alert(window.location.href+'?str='+str);
//document.getElementById("aform").submit();
}
</script>

<form id="BoostMasterForm" onsubmit="fnc()">
<div class="checkboxes">
  <ul>
    <li>
      <input type="checkbox" id="search1" name="search" class="options" value="one">
      <label>one</label>
    </li>
    <li>
      <input type="checkbox" id="search2" name="search" class="options" value="two">
      <label>two</label>
    </li>
    <li>
      <input type="checkbox" id="search3" name="search" class="options" value="three">
      <label>three</label>
    </li>
  </ul>
  <input type="submit" value="Submit"/>
</div>
</form>

edited Nov 8, 2012 at 5:37

answered Nov 8, 2012 at 5:15

polin

2,8853 gold badges17 silver badges20 bronze badges

3 Comments

JV10 Over a year ago

Thanks, however the list is dynamic and will there will be different checkbox values, other than the example I provided.

JV10 Over a year ago

The alert works, but when I select multiple options they display in the alert like: 'onetwothree' will they be separated on the search?

siger Over a year ago

They won't, but I'm sure you can figure out how to add a space between the values from polin's code! :)

Collectives™ on Stack Overflow

Multiple checkbox values search javascript

2 Answers 2

7 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related