Multiple checkbox values search javascript

Posted by JV10 on Stack Overflow See other posts from Stack Overflow or by JV10
Published on 2012-11-08T04:57:57Z Indexed on 2012/11/08 5:00 UTC
Read the original article Hit count: 260

Filed under:
|
|

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 the HTML markup of my checkbox list:

<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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery