Dealing with large numbers of HTML checkboxes

Question

I am dealing with a dynamic form that can potentially provide the user with an unspecified number of checkboxes in an array (category[]).

This causes a few issues.

Issue #1: Hitting the maximum number of POST variables that the browser and/or server allows. This can be solved by using a bit of script and actually posting the array in a single comma separated value.

Issue #2: Browsers getting very slow and / or crashing. One user has over 5000 checkboxes representing categories, which causes Chrome to bug out, Firefox to go very slowly and I dare not try it in IE yet!

I would love some suggestions or ideas on how to solve the second problem!

Regards,

Joel

How would anyone not lose their mind looking at a page with 5000 checkboxes on it? — Graham Clark, Feb 29 '12 at 09:34
Umm... Paging maybe? What server side language are you using? How you fetch the data? — Shadow The GPT Wizard, Feb 29 '12 at 09:34
GrahamClark: Tell me about it! But it's entirely user generated, they have a large directory with lots of categories in it and they want to assign something to a lot of categories. @ShadowWizard AJAX based paging is likely to be my solution but unless I'm removing the elements while changing the page the same issue might arise, using PHP and MYSQL, obviously paging requires more server requests and queries though. — Joel, Feb 29 '12 at 09:41
Why more requests? Change the PHP code as well so it won't send the whole data at once but rather only the data for the given page. Not going to be simple, but written correctly, it will be just fine. — Shadow The GPT Wizard, Feb 29 '12 at 09:43

score 4 · Accepted Answer · answered Mar 20 '12 at 11:50

4

I discovered that the cause of the lag / slowness was due to a jquery loop which was doing an each() on all inputs to determine if any fields have been changed. Obviously jQuery doesn't like looping through that many elements.

I stopped the loop from hitting the checkbox list and it's no longer slow.

It would be nice to be able to grab an array of values of the checkbox list in one hit rather than having to loop through them all!

answered Mar 20 '12 at 11:50

Joel

2,185
4
29
56

1

Can you elaborate on your solution? What was the jQuery loop, and how did you stop it? – Cyde Weys Jan 03 '13 at 22:40
1

The loop was just some custom JS to look at the form and determine whether or not the user had made any changes to any fields. It looped through every field within the form, and because there were so many checkboxes to look at and check the values of, it got angry. I simply omitted this group of checkboxes from the "form changes" check. – Joel Jan 04 '13 at 10:33

score 1 · Answer 2 · answered Feb 29 '12 at 09:41

1

I don't think it's a good strategy to render 5.000 checkboxes at once, as you say there's a huge performance issue, not to talk about usability (who's going to interact with such a page?).

IMHO you can either load/unload checkboxes using ajax (and store the selected options in a temporary js object) or handle the logic server-side with postbacks...

answered Feb 29 '12 at 09:41

mamoo

8,156
2
28
38

Good suggestion, keeping the data in a javascript object will at least mean no need for AJAX request cutting down on the need for server hits :) – Joel Feb 29 '12 at 09:49
1

A variation on this could be to also render the checkboxes in multiple fieldsets and use ajax to submit each fieldset individually when the form's submit event fires – wheresrhys Feb 29 '12 at 09:51

M. Ahmad Zafar · Answer 3 · 2012-02-29T10:13:48.487

1

UPDATED ANSWER

You can also try making a List box instead of a checkbox list. Here is the code and again it has no performance issues.

<?php
    if( isset($_POST['chk']) ):
        echo '<pre>';
        var_dump( $_POST['chk'] );
        echo '</pre>';
        die();
    endif;
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="test.php" method="post">
        <select name="chk[]" multiple style="height: 400px;">
        <?php
            for( $i = 0 ; $i < 10000 ; $i++ ):

                echo '<option value="' . $i . '">' . $i . '</option>';

            endfor;
        ?>
        </select>
        <input type="submit" />
    </form>
</body>
</html>

ORIGINAL ANSWER

I tried to create a page to understand the browser behavior and it works perfectly fine without any performance issue for 10,000 checkboxes.

Successfully tested on Firefox 10 and Chrome 17.

This is the code:

<?php
    if( isset($_POST['chk']) ):
        echo '<pre>';
        print_r( $_POST['chk'] ); //simply print the array
        echo '</pre>';
        die();
    endif;
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="test.php" method="post">
        <?php
            for( $i = 0 ; $i < 10000 ; $i++ ): //adjust this number to whatever number of checkboxes you want

                echo '<input type="checkbox" name="chk[]" checked /> Checkbox ' . $i . '<br />';

            endfor;
        ?>
        <input type="submit" />
    </form>
</body>
</html>

edited Feb 29 '12 at 10:13

answered Feb 29 '12 at 09:47

M. Ahmad Zafar

4,881
4
32
44

Hmm interesting. I know that there's a lot of other fields in the form including a WYSIWYG editor and some JS libraries which probably aren't helping the performance. – Joel Feb 29 '12 at 09:51
@Joel check my updated answered for a different approach if you may. – M. Ahmad Zafar Feb 29 '12 at 10:15
Yeah, they're pretty hideous though! :) I believe I will try and handle the data in a Javascript Object and remove/add checkboxes on the fly. Although DOM manipulation on a large scale isn't always brilliant! – Joel Feb 29 '12 at 10:31
That way you will be relying on the Client's Browser performance which is not a good idea. Such a huge DOM will create problems. – M. Ahmad Zafar Feb 29 '12 at 10:37
Do you not think that if I maintain a list of say 100 checkboxes (no more than would be visible) by removing them on the fly, it will keep it small? – Joel Feb 29 '12 at 10:53
To the user it may seem small but on the JavaScript end you will be working with the whole DOM like of 5000 elements, right? That would cause performance issues – M. Ahmad Zafar Feb 29 '12 at 10:59
I'm going to make the point of finding out why it's actually laggy / slow. As you said, a page with just 10000 checkboxes on is fine. I need to figure out what it is that makes it so slow before finding an actual solution. – Joel Feb 29 '12 at 14:45

Dealing with large numbers of HTML checkboxes

3 Answers3

UPDATED ANSWER

ORIGINAL ANSWER

Linked