1

I have dynamically created an array of checkboxes in PHP for a form, but I don't want the Submit button to appear unless at least one checkbox is checked. Scouring the Internet most people who want the Submit button to only appear after checking a checkbox only have one "I agree" checkbox. Is it the dynamic creation that is preventing my script working?

PHP↴

// Dynamically create checkboxes from database
function print_checkbox($db){
    $i = 0;
    foreach($db->query('SELECT * FROM hue_flag') as $row) {
        if ($i == 0 || $i == 3 || $i== 6 || $i == 9){
            echo '<br><br>';
        }
        $i++;
        echo '<span class="'.$row['1'].'"><label for="'.$row['1'].'">'.ucfirst($row['1']).'</label><input type="checkbox" name="hue[]" id="hue" value="'.$row['0'].'"></span> ';
    }
}

jQuery↴

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#hue[]').click(function(){
        $('#input_gown').toggle();
    });
});
</script>

PHP function call↴

<?php print_checkbox($conn_normas_boudoir);?>

Admittedly I know nothing about jQuery or JavaScript and am still learning PHP. So, if there's a better way to implement this, let me know.

Improve this question
3
  • +1 for use of ↴ :) Also my first guess is the square brackets are conflicting with the jquery selector engine, but I'll have to dig a little deeper to be sure Commented Apr 26, 2013 at 16:53
  • Never mind, you are using the ID selector but passing the input name.. I'd type an answer but I guess this is being pointed out by much faster typers than I as you read this Commented Apr 26, 2013 at 16:55
  • You're giving all your checkboxes the same ID. That's not allowed; IDs have to be unique. Commented Apr 26, 2013 at 16:59

2 Answers 2

Reset to default
2

You're giving all your checkboxes the same ID. That's not allowed; IDs have to be unique.

An easy solution to both problems is to assign all the checkboxes a common class:

    echo '<span class="'.$row['1'].'"><label for="'.$row['1'].'">'.ucfirst($row['1']).'</label><input type="checkbox" name="hue[]" class="hue" value="'.$row['0'].'"></span> ';

Then select the class in jQuery:

$('.hue').change(function(){
    $('#input_gown').toggle();
});

But that may give unexpected results; what if two checkboxes are checked? The #input_gown element will toggle on and off again. Perhaps you only want it shown if at least one checkbox is checked:

$('.hue').change(function(){
    var val = false;
    $('.hue').each(function() {
        val = val || $(this).is(':checked'); // any checked box will change val to true
    });
    $('#input_gown').toggle(val); // true=show, false=hide
});

http://jsfiddle.net/mblase75/AyY3Z/

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I see. I thought id was supposed to be the same as name. I guess I should have read this first. I'll try out your recommendation.
Sorry, did you rewrite .click to .change because change is a more basic level of the same effect?
I followed your code verbatim, but the button just remains hidden. How do I go about error checking jQuery?
Whoops, forgot a $. fixed.
Oh, I see it now. I was trying to avoid javaScript for this project, but it looks like I'll need to add that to my plate pretty soon. Thanks a bunch!
0

Your jQuery selector is looking for elements with id hue[]. But your elements have the id of just hue.

Change this:↴

$(document).ready(function(){
    $('#hue[]').click(function(){
        $('#input_gown').toggle();
    });
});

to this (IDs should really always be unique, and the square brackets will need to be escaped to work with the selector engine), (a demo)):↴

$(document).ready(function(){
    $('input[name=hue\\[\\]]').click(function(){
        $('#input_gown').toggle();
    });
});
Improve this answer

3 Comments

Thanks for that solution. I suppose I should remove the id tag altogether, though.
You only need an ID attribute if you plan on accessing or styling (there is a valid argument to avoid ID style selectors) elements directly. Blazemonger's approach will also work, but bind to input name I think is most semantically correct with minimal HTML, but that is just me
Oh really? I thought binding it to the name looked like a work around. I'll keep it in mind in future when I read up on jQuery. Thanks again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.