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