Checkboxes patently refuse to submit information onclick- HELP

Question

Hi this is my second post (and second week programming, ever) so apologies in advance.

I have a list of checkboxes that represent different search filters that I want passed to params. For example, if this were a restaurant search, I would want my users to be able to check off different types of cuisine that they are interested in. Just like Yelp.

All I want to do is to send the new parameters each time someone clicks on an option. I DON'T care about AJAX right now (I'll cross that bridge when I come to it).

Can i do this with an observe_form even though I'm not using AJAX? Can I use javascript? I've seen stuff about "event handlers" but i have no idea what those are. I hate to give up and ask but i've now been working for 19 hours and I can't handle anymore. Thanks!

CODE: (UPDATED FOR TYPO)

      <div id="cuisine_form_div">
  <% form_tag(hotels_path, :method => "GET", :id => :cuisine_form ) do %> 
  <%= check_box_tag('my_cuisine[]', 'Mexican', :onclick => "document.cuisine_form.submit();" ) %>
  <%= label_tag(:my_cuisine, "Mexican", :onclick => "document.cuisine_form.submit();" ) %>
  <%= check_box_tag('my_cuisine[]', 'Delis') %>
  <%= label_tag(:my_cuisine, "Delis") %>
  <%= submit_tag 'update' %>
  <% end %>
  </div><!--end.id="cuisine_form_div"-->

---

Note that whenever I insert the javascript like above, it prechecks the box on the screen but doesn't submit any info to the URL. If I click the submit button, everything works great, but "onclick" I can't get the URL to budge.

Answer 1

I'm thinking what you're wanting to do is on each click you'll need to test the 'checked' state of the checkbox. At that point you will need to read in what is checked from the ID or VALUE attribute. Then you can alert() the value to debug or use console.log if you're using Firebug or Developer tools in Chrome.

Also, you will want to write a function to put in your onClick event instead of trying to write the logic within the event.

start by just creating a function such as

function clickCheckbox {
   /* paste your existing onClick logic */
}

and modify it from there...

If you need exact syntax let me know.

I recommend using jQuery. Add the jQuery library to your head tag on all of your pages. This enables easier to use functions for AJAX and things.

You can do:

$('#CheckboxID').click(function() {
    if($(this).attr('checked')) {
        $(this).attr('checked',false);
    } else {
        $(this).attr('checked',true);
    }
});

Answer 2

Lots of errors, but now it is working in my test app! :)

These points were missing/broken

• Form needs id in order to find it in Javascript
• check_box_tag needs a third parameter to set selected state (and fourth (your third) is to add HTML code)
• Use onchange, so it does not matter whether the user clicks on the checkbox or on the label
• Add correct id to checkbox, so the label is attached to it
• Fix label according to the previous updates/fixes

The resulting form becomes more like this:

<% form_tag(cuisine_path, :method => "GET", :id => :cuisine_form, :name => :cuisine_form ) do %>
  <%= check_box_tag('my_cuisine[]', 'Mexican', true, { :id => :cuisine_mexican, :onchange => "document.cuisine_form.submit();" }) %>
  <%= label_tag(:cuisine_mexican, "Mexican" ) %>
  <%= check_box_tag('my_cuisine[]', 'Delis', false, { :id => :cuisine_delis, :onchange => "document.cuisine_form.submit();" }) %>
  <%= label_tag(:cuisine_delis, "Delis") %>
  <%= submit_tag 'update' %>
<% end %>