Question

I’m doing a small project in Django by using Python.

In that, I am dynamically populating a table with data of pending tasks. Each row of the table contains a checkbox field. According to the priority level, number of rows can be less or more.
I Have to stop postback operation on submit button click event if none of the checkboxes are selected.

How do you identify the checkbox name or ID in JavaScript as they are generated dynamically?

Answer 1

html

<form method="post" class="myform" action=".">
    <table>
        <tbody>
            <tr>
                <th><label for="checkbox1">Checkbox 1</label></th>
                <td><input type="checkbox" id="checkbox1" name="checkbox1" /></td>
            </tr>
            <tr>
                <th><label for="checkbox2">Checkbox 2</label></th>
                <td><input type="checkbox" id="checkbox2" name="checkbox2" /></td>
            </tr>
            <tr>
                <th><label for="checkbox3">Checkbox 3</label></th>
                <td><input type="checkbox" id="checkbox3" name="checkbox3" /></td>
            </tr>
        </tbody>
    </table>
    <input type="submit" class="myform-submit" />
</form>

javascript (assuming jquery)

$(document).ready(function(){
    $(".myform-submit").bind("click", function(e) {
        e.preventDefault();
        var $form = $(this).closest(".myform");
        if ($("input:checkbox:checked").length) {
            alert("submitting");
            $form.submit();
        }
    });
});

jsfiddle

http://jsfiddle.net/c4urself/xWbEk/