vendredi 18 décembre 2015

Jquery - Getting all the contents of a row

I am pretty new to jquery, or any web technology for that matter.

Here is my HTML code:

<form id = "featureform">
        <!-- Table inside the form -->
        <table id="mytable" class="table table-striped">
            <!-- First Row -->
            <tr id = "tableRow1">
                <td><input id="from_checkbox" class="form-input-checkbox" type="checkbox" checked
                                            data-toggle="toggle" data-on="From" data-off="From"></td>
                <td><input type="text" id="from_text" value="tester@test.com"></td>
            </tr>

            <!-- Second Row -->
            <tr id = "tableRow2">
                <td><input id="to_checkbox" class="form-input-checkbox" type="checkbox" checked
                                            data-toggle="toggle" data-on="To" data-off="To"></td>
                <td><input type="text" id="to_text" value="myself@dummy.com"></td>
            </tr>
        </table>
    </form>

So I have a table inside a form. Each row of the table has 2 columns.The first column will contain a bootstrap toggle checkbox. The text field will hold the value for that specific checkbox. Both input types (checkbox, and text field) have ids associated with them.

Here is what I want to do:

Help needed here: When the user toggles the checkbox, I want to know the "id" of the checkbox and the textfield.

This table will have multiple rows, so hardcoding for every row based on the ID is not the solution. I am looking for a generic solution that looks like this:

//form-input-checkbox is the class name assigned for every checkbox. So we monitor any events coming from these
//   checkboxes, and do the magic
$(".form-input-checkbox").change(function(){
    // Extract the id of the checkbox
    // Extract the id of the textfield in this row
    console.log($(this).closest("tr"));
});




Aucun commentaire:

Enregistrer un commentaire