Page 1 of 1

[Solved] - jQuery help with checkboxes

Posted: Wed Jun 17, 2009 12:05 pm
by Benjamin
I don't have the slightest clue how to create this.

I have a group of checkboxes in a form. When the user submits the form, a message should be displayed based on the checkboxes selected.

Code: Select all

 
<input type="checkbox" name="one" value="1" id="one" rel="orange" /> <label for="one">Orange</label>
<input type="checkbox" name="two" value="1" id="two" rel="apple" /> <label for="two">Apple</label>
<input type="checkbox" name="three" value="1" id="three" rel="pear" /> <label for="three">Pear</label>
 
Assuming the orange box is checked, the message should say:
You have selected the Orange fruit.
Assuming the orange and apple boxes are checked, the message should say:
You have selected the Orange and Apple fruits.
Assuming the orange, apple and pear boxes are checked, the message should say:
You have selected the Orange, Apple and Pear fruits.

Re: jQuery help with checkboxes

Posted: Wed Jun 17, 2009 1:22 pm
by Weirdan
I guess it should be something like

Code: Select all

 
$('form#formId').submit(function() { 
   alert($(':checkbox:checked').attr('rel').join(','));
});
 

Re: jQuery help with checkboxes

Posted: Wed Jun 17, 2009 11:59 pm
by josh
Why are you using rel tags? put the text in the val attribute, then implode() your $_POST. If you need it client side it'd be $('.myChecks').val().join(', ');

Re: jQuery help with checkboxes

Posted: Thu Jun 18, 2009 12:32 am
by Benjamin
josh wrote:Why are you using rel tags? put the text in the val attribute, then implode() your $_POST. If you need it client side it'd be $('.myChecks').val().join(', ');
It's client side and the value is not the same as the label text. The label text is what needed to be displayed in the confirmation dialogue. So I was thinking that I could place it in a rel tag for retrieval by the javascript. The checkboxes are dynamic, ie. they can be added/removed by an admin. Also, when the form is displayed, some values may already be checked, so this needs to be taken into account.

I ended up just handcoding the javascript for it. jQuery hasn't quite clicked for me yet.

Code: Select all

 
      var fruits = new Array();
 
      function add_fruit_name(key, name) {
            fruits[key] = name;
      }
 
      function remove_fruit_name(key) {
            delete(fruits[key]);
      }
 
      function checkbox_click(element, text) {
            if (element.checked) {
                add_fruit_name(element.id, text);
            } else {
                remove_fruit_name(element.id);
            }
      }
 
      function confirm_entry() {
          var cnt = 0;
          var fruit_string = '';
 
          for (key in fruits) {
              cnt++;
              fruit_string = fruit_string + fruits[key] + '\n';
          }
 
          if (cnt < 1 || cnt > 5) {
                alert('You must select between 1 and 5 fruits.');
                return false;
          }
 
          if (cnt > 1) {
                var cword = 'fruits';
                var phrase = 'these fruits';
          } else {
                var cword = 'fruit';
                var phrase = fruit_string;
          }
 
          message = 'You have selected the following ' + cword + ':\n\n' + fruit_string + '\nPlease be sure that your report contains information relevant to ' + phrase + ' or it will be rejected.';
 
          return confirm(message);
 
      }