CODEWITHSUNDEEP
phpjquery
Rob
Rob

Reputation: 6370

Grab checkbox values before form submission

I have the following loop, which shows a checkbox along with an answer (which is grabbed from Wordpress):

$counter = 1; 
foreach ($rows as $row){ ?>
   <input type="checkbox" name="answer<?php echo $counter; ?>[]" value="<?php echo the_sub_field('answer'); ?>" />
   <?php echo $row['answer'];
} ?>

This is part of a bigger loop that loops through a set of questions and for each question it loops through the answers (code above).

How can I grab the checkboxes that the user has checked and display the values within a div before the form is submitted?

I know I can use the following to check if the checkbox is checked:

$('form #mycheckbox').is(':checked');

I'm not sure where to start with all the looping!

Upvotes: 3

Views: 1209

Answers (4)

J.G.Sebring
J.G.Sebring

Reputation: 5964

The loop you provide is happening server side, as it is php code. When you wan't to validate the form before submission you must do it on the client, ie using javascript.

So, you will not use the same loop, but rather create a new one that is run when any checkbox is changed.

I suggest you to add a class name to the checkboxes (like class='cb_answer') in the php loop. This will help you to safely select the specific checkboxes when doing the validation.

Here is a script snippet that will add the value of selected checkboxes to a div each time any checkbox is changed. Add this just before </body>. May need to modify it to fit your needs.

<script>
    // make sure jQuery is loaded...
    $(documet).ready( {
        // when checkboxes are changed...
        $('.cb_answer').on('change', function() {
             // clear preview div...
             $('#answers_preview').html('');
             // loop - all checked checkboxes...
             $('.cb_answer:checked').each(function() {
                 // add checkbox value to preview div...
                 $('#answers_preview').append(this.val());
             });
        });
    });
</script>

assuming id='answers_preview' for the div to preview the answers and class='cb_answer' for the checkboxes.

Upvotes: 0

adeneo
adeneo

Reputation: 318182

var boxes = $('input[type="checkbox"][name^="answer"]');

$('#myDiv').empty();

boxes.on('change', function() {
    boxes.filter(':checked').each(function(i, box) {
        $('#myDiv').append(box.value);
    });
});

Get all the matching checkboxes, and whenever one of the checkboxes changes update a div with the values of the checked boxes.

Upvotes: 0

97ldave
97ldave

Reputation: 5249

You can use the selector :checked

$.each("#mycheckbox:checked", function() {
    $("div").append(this.val());
});

Upvotes: 1

Viktor S.
Viktor S.

Reputation: 12815

You may do something like below:

var divContent = "";
$("form input[type=checkbox]:checked").each(function() {
   divContent += this.value + "<br/>";
});
$("div").html(divContent);

Not completely clear to me when this should be executed. From your question it looks to me like that should happen when user clicks on submit button, in such case you just need to place that code into $("form").submit(function(){...});

Upvotes: 0

Related Questions