1. We have added a Gift Upgrades feature that allows you to gift an account upgrade to another member, just in time for the holiday season. You can see the gift option when going to the Account Upgrades screen, or on any user profile screen.
    Dismiss Notice

JavaScript help

Discussion in 'Computer Talk' started by Cilpot, Jun 28, 2005.

  1. Cilpot

    Cilpot Pretentious Schmuck

    Joined:
    Oct 15, 2001
    Messages:
    2,095
    Gender:
    Male
    Location:
    Oslo, Norway
    I have a form consisting of a variable number of checkboxes generated from a php-loop. What I want to do is to count the number of checked checkboxes (and display this number) and de-activate them once a number has been reached.

    For example, consider the form as a 'vote' and there are 50 options, but only 10 are allowed to be chosen. When 10 checkboxes has been checked a message will say that no more choices are allwed. And while checking a number is displayed saying how many choises are left.

    Help greatly appreciated :)
     
  2. stormbind

    stormbind Retenta personam!

    Joined:
    Feb 1, 2003
    Messages:
    14,081
    Location:
    London
    This is a quicky that is untested with no implied warranty, but hopefully it will act as a guide. The elements on the page have to be rendered before the script starts so initiate it with document.body.onload or add it inline to the bottom of the page.

    I write all scripts so that no editing to the HTML is required.

    Code:
    // First thing to do is get an array of all the checkboxes
    // ae : all (form) elements
    // cb : checkboxes
    
    var ae = document.forms[0].elements; // not sure about this?
    var cb = new Array();
    for (i=0;i!=ae.length;i++){
    if (ae[i].type=='checkbox') cb.push(ae[i]);
    }
    
    // Then you need to have the checkboxes fire a function each time they are clicked
    
    for (i=0;i!=cb.length;i++){
    cb[i].attachEvent('onclick',cb_count);
    }
    
    function cb_count(){
    var counter = 0;
     for (i=0;i!=cb.length;i++){
       if (cb[i].checked) counter++;
     }
    if (counter > 9){
     for (i=0;i!=cb.length;i++) cb[i].disabled='true';
     alert('Limit reached. You have checked '+counter+' boxes.'); // job done (I think)
    }
    }
    
     // you can add an element to the page that always displays current counter:
     // document.getElementById('counter_output').innerHTML=counter;
    
     
  3. AlanH

    AlanH Mac addict, php monkey Moderator Hall of Fame Staff Supporter GOTM Staff

    Joined:
    Jan 9, 2003
    Messages:
    29,301
    Gender:
    Male
    Location:
    England
    Here's some code for a page that does some of what you want. I'm sure it can be done neater and cleaner, and you'll no doubt have different ideas on what you really want it to do.

    [EDIT] Sorry, cross posted with Stormbind. See ... I knew there was a neater way to do it :D

    Code:
    <?php
    	$num_options = 50;
    	// process the form
    	$options = $HTTP_GET_VARS['option'];
    	if (!empty($options)) {
    		// do what you need to do that record the votes
    	}
    ?>
    
    <head>
    <script language="JavaScript" type="text/javascript">
    function count_votes() {
        var id;
        var box;
        var count = 0;
        // count the number of checked boxes
        for (i = 0; i < <?php echo $num_options; ?>; i ++) {
            id = "check_"+i;
            box = document.getElementById (id);
            if (box.checked)
                count ++;
        }
        // update the "votes" text
        var num_votes_field = document.getElementById ("votes");
        num_votes_field.innerHTML = count;
        // check for the maximum number of options
        if (count >=10) {
            // disable the checkboxes
            for (i = 0; i < <?php echo $num_options; ?>; i ++) {
                id = "check_"+i;
                box = document.getElementById (id);
                box.disabled = true;
            }
        }
    }
    </script>
    </head>
    <body>
    <form>
    <div id="votes" name="votes">0</div>
    <input type = "submit">
    <table>
    <?php
    for ($opt = 0; $opt < $num_options; $opt ++) {
    	$check = (in_array ("check_$opt",$options) ? 'checked' : '');
        echo "<tr><td><input type=\"checkbox\" name=\"option[]\" id=\"check_$opt\" value=\"check_$opt\" onchange=\"count_votes();\" $check></td><td>Option $opt</td></tr>\n";
    }
    ?>
    </table>
    </form>
    </body>
    
     
  4. stormbind

    stormbind Retenta personam!

    Joined:
    Feb 1, 2003
    Messages:
    14,081
    Location:
    London
    The number of times I went through the same loop disqualifies it from being neat :p
     
  5. Cilpot

    Cilpot Pretentious Schmuck

    Joined:
    Oct 15, 2001
    Messages:
    2,095
    Gender:
    Male
    Location:
    Oslo, Norway
    Man, incredible!! Thank you very much.. Both of you :goodjob:

    (I incorporated a version of AlanH's solution, btw)
     
  6. AlanH

    AlanH Mac addict, php monkey Moderator Hall of Fame Staff Supporter GOTM Staff

    Joined:
    Jan 9, 2003
    Messages:
    29,301
    Gender:
    Male
    Location:
    England
    Well, if your checkbox array build works you've done a better job of javascript encapsulation than me. I feel writing javascript dynamically using php is a bit messy - a little bit like self-modifying code.
     
  7. stormbind

    stormbind Retenta personam!

    Joined:
    Feb 1, 2003
    Messages:
    14,081
    Location:
    London
    Cilpot and yourself are obviously PHP programmers where server side & client side code are mixed together.

    I prefer PERL & JavaScript, where server side & client side code are completely separate. In my opinion, this helps webmasters and administrators to work side-by-side without stepping on each other's toes.

    There is no right or wrong though :)
     
  8. stormbind

    stormbind Retenta personam!

    Joined:
    Feb 1, 2003
    Messages:
    14,081
    Location:
    London
    :rolleyes:

    What do you take me for?

    Popping the initial array of elements might have conserved a miniscule amount of memory, so there could have been a number of tweaks. I just covered up one error :mischief:
     
  9. Cilpot

    Cilpot Pretentious Schmuck

    Joined:
    Oct 15, 2001
    Messages:
    2,095
    Gender:
    Male
    Location:
    Oslo, Norway
    Thanks again guys, it's now up and running :goodjob:

    I must admit that even though I work as a PHP-developer, my JavaScript skills are embarresingly sub-par.
     

Share This Page