Limiting number of entries in a checkbox

[stevenpryer]

I've created a databasejoin element that renders as a checkbox. Great feature by the way!

I'm using it as part of an eVoting system that allow visitors to vote for a set number of positions. Although there are 13 different candidates to choose from, I want to be able to limit voters to a maximum of 5 votes.

I'm hoping this will be possible with some PHP validation code, but I haven't been able to find a solution as yet.

Many thanks for any help

 

[cheesegrits]

Best approach would be with some custom JS to limit the number that can be selected.

I think you could do it with a form_X.js file (replace X with numeric form ID, goes in ./components/com_fabrik/js), with something like this:

jQuery('#yourtable___chbox').on('click', '.fabrikinput', function(e) {
   if (jQuery("input[name^='yourtable___chbox[']:checked").length > 5) {
      alert("You can have 5 votes";
      this.checked = false;
   }
});

Replace yourtable___chbox (two occurences) with your full element name.

You might also be able to do it with something similar in a JS click event on the element, without the need for a JS file.

-- hugh

 

[stevenpryer]

Brilliant, thanks cheesegrits!!

Although I couldn't initially get it working as a .js file, I did paste the code as a JS Click event on the element and it works perfectly (with one slight addition of a close bracket on the third line)!
Many thanks for your prompt response

 

[cheesegrits]

You don't want to add all that code as a click event, as it's adding click event handling. So each time you click, it's going to add another event handler. So next time you click it'll run twice. Then three times, etc.

Sent from my HTC One using Tapatalk

 

[stevenpryer]

Ooops, showing my ignorance of these matters!
Thanks very much for the advice. I've currently added the following as a click event:

jQuery('#mytable___votes').on('click', '.fabrikinput', function(e) {
if (jQuery("input[name^='mytable___votes']:checked").length > 5) {
alert("You can have a maximum of 5 votes");
this.checked = false;
}
});​

Can you advise how I might change this to stop the situation that you're describing? It certainly appears to work perfectly

 

[cheesegrits]

It will work, it's just adding unnecessary duplicated event handling each time you click.

You could try this ...

if (jQuery("input[name^='mytable___votes']:checked").length > 5) {
   alert("You can have a maximum of 5 votes");
   this.element.checked = false;
}

-- hugh

 

[stevenpryer]

I tried this, and it works, but unfortunately the checkbox doesn't get cleared after you click ok to the warning dialog box. I also tried mytable___votes.checked = false; but still no joy.

I wonder if you can explain what issues I might expect from adding 'unnecessary duplicated event handling'.

Thanks as ever for your help.

 

[cheesegrits]

Just put that code I gave you in a form_X.js, as per my original instructions.

-- hugh

 

[stevenpryer]

Perfect, I added the following, and it now works!

jQuery('#yourtable___chbox').on('click', '.fabrikinput', function(e) {
if (jQuery("input[name^='yourtable___chbox[']:checked").length > 5) {
alert("You can have 5 votes");
this.checked = false;
}
});

Many thanks, Steven

 

[cheesegrits]

Presumably you changed the element names?

Sent from my Nexus 7 using Tapatalk

 

[stevenpryer]

No, it was just that I didn't add the missing ')' on the third line, when I first tried it as a form_X.js file.