jQuery serialize checkboxes that are dynamically created from MySQL

Question

I create rows in a HTML table dynamically from MySQL values in a PHP loop. Each row represents a row in MySQL and are identified by an id.

I want to be able to have a <input type='checkbox'> on each row and have a "Delete selected rows" button at the bottom row.

My question is how I should POST the selected checkboxes and how to identify them in the PHP- file.

I have this script to serialize <input type='text'> fields:

function serealizeInputs (input)
    {
        var array = [];
        input.each(function(){ array.push($(this).val()) });
        return array;
    }
var value = serealizeInputs($('.my_input_field'));

How can I write a similar for checkboxes?

I'm quite new to this as you might see. Let me know if you need to see some more code.

Mehmet Can Kamar · Accepted Answer · 2012-11-23 13:22:16Z

1

You can use prop attribute to check whether checkbox is checked or not. Here is a live demo

function serializeCheckboxes(input)
    {
        var array = [];
        input.each(function(){ 
            if($(this).prop("checked"))
            {
                array.push($(this).attr("id"))  
            }                
        });
        alert(array);
        return array;

    }

edited Nov 23, 2012 at 13:22

answered Nov 16, 2012 at 11:29

Mehmet Can Kamar

771 silver badge5 bronze badges

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

7 Comments

David Over a year ago

Hello and thank's for your code. It seems to be close to what I want! However when the checboxes are populated they do not have the property "checked". Is there a way to recognize what checkboxes the user have checked?

Mehmet Can Kamar Over a year ago

It already checks that user have checked. Care if you are using older versions of jQuery(1.6), you cannot use prop attribute. You may try "$(this).attr("checked")"

mexique1 Over a year ago

Why not just use the :checked selector ? api.jquery.com/checked-selector

Mehmet Can Kamar Over a year ago

Yes, definetely :checked selector would be nicer.

David Over a year ago

@MehmetCanKamar The checkboxes are unchecked when created, the user should then choose wether to check them or not and based on value send a serialized string on what boxes have been checked.

|

mexique1 · Accepted Answer · 2012-11-16 14:46:00Z

To retrieve all checked boxes, use the :checked selector http://api.jquery.com/checked-selector/

The common technique to manage this is to post the primary keys of each row to delete as an array using the array operator []

<?php foreach ($rows as $id => $row) : ?>
    <input type="checkbox" name="to_delete[]" value="<?php echo $id ?>" />
<?php endforeach; ?>

In your PHP code managing the deletion, the to_delete entry will be an array of string.

foreach ($_POST['to_delete'] as $rowId) {
    // Delete the row from database
}

Also, be unobtrusive ! Rely on a standard <form> element wrapping all your <input> elements. This will really simplify your JavaScript code, as you just need to call jQuery.serializeArray to retrieve an array of the checked boxes.

$('#form').on('submit', function(e) {
    e.preventDefault();
    var data = $(this).serializeArray();
    // POST an AJAX request with data
    return false;
});

Collectives™ on Stack Overflow

jQuery serialize checkboxes that are dynamically created from MySQL

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related