Happydevdays Happydevdays - 25 days ago 9
HTML Question

why does my jquery code pick up more rows than I'm expecting?

I have the following html table:

<table id="tbltimeconditions" class="table table-bordered table-hover tcdata">
<tbody>
<tr>
<td colspan="6">
<h3>Time Conditions&nbsp;&nbsp;<input type="button" name="enabletc" id="enabletc" class="btn btn-primary" value="Edit Time Conditions"></h3>
<button id="addtc" type="button" class="btn btn-success btn-circle tctamper" style=""><i class="fa fa-plus"></i></button>
</td>
<!--<td class="tctamper"></td>-->

</tr>
<input type="hidden" id="tc_dirty" name="tc_dirty" value="true">
<tr>
<td>
<button id="del_tc1" type="button" class="btn btn-warning btn-circle deletetcrow"><i class="fa fa-times"></i></button>&nbsp;&nbsp;TC 1:</td>
<td>
<input class="form-control starttc " type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime1">
</td>
<td>
<input class="form-control " type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime1">
</td>
<td>
<input class="form-control " type="input" placeholder="Extension" name="extension1">
</td>
<td>
<input class="form-control " type="input" placeholder="Domain" name="domain1">
</td>
<td colspan="2">
<label class="checkbox-inline"><b>Days of Week:</b></label>
<input class="checkbox-inline " type="checkbox" id="dow_m1" name="dow_m1">Mon&nbsp;
<input class="checkbox-inline " type="checkbox" id="dow_t1" name="dow_t1">Tue&nbsp;
<input class="checkbox-inline " type="checkbox" id="dow_w1" name="dow_w1">Wed&nbsp;
<input class="checkbox-inline " type="checkbox" id="dow_r1" name="dow_r1">Thu&nbsp;
<input class="checkbox-inline " type="checkbox" id="dow_f1" name="dow_f1">Fri&nbsp;
<input class="checkbox-inline " type="checkbox" id="dow_s1" name="dow_s1">Sat&nbsp;
<input class="checkbox-inline " type="checkbox" id="dow_n1" name="dow_n1">Sun&nbsp;</td>
</tr>
<tr id="submitbtnsection">
<td colspan="6" align="center">
<input type="submit" name="submit" id="submit" class="btn btn-primary" value="Save">&nbsp;&nbsp;
<input type="button" name="cancel" id="cancel" class="btn btn-warning submit" value="Cancel">&nbsp;&nbsp;
<input type="button" name="unassign" id="unassign" class="btn btn-warning" value="Unassign DID">
</td>
</tr>

</tbody>
</table>


Here is the jquery logic I have to find all the rows of data the user has inputted:

var rowCount = $('#tbltimeconditions tr').length;
console.log(rowCount + " is the rowCount");
if (rowCount >= 3) { // 3 because 1 for heading, 1 for '+' button row, 1 row for submit button

$('.tcdata tr').each(function (i, row) {
var $row = $(row);
var $ext = $row.find('input[name*="extension"]');
console.log($ext.val() + " is the ext") ;
var $start = $row.find('input[name*="starttime"]');
var $end = $row.find('input[name*="endtime"]');
var $domain = $row.find('input[name*="domain"]');

if ( !$start.val() || !$end.val() || !$domain.val() ) {
$(".emessbox").html("Whoops! Every time condition must have a start / end time, and a domain");
e.preventDefault();
return;
}
//check days of week.
var $dow_m = $row.find('input[name*="dow_m"]');
var $dow_t = $row.find('input[name*="dow_t"]');
var $dow_w = $row.find('input[name*="dow_w"]');
var $dow_r = $row.find('input[name*="dow_r"]');
var $dow_f = $row.find('input[name*="dow_f"]');
var $dow_s = $row.find('input[name*="dow_s"]');
var $dow_n = $row.find('input[name*="dow_n"]');
if ( (!$dow_m[0].checked ) && (! $dow_t[0].checked ) && (!$dow_w[0].checked ) && (!$dow_r[0].checked ) && (!$dow_f[0].checked) && (!$dow_s[0].checked) && (!$dow_n[0].checked) ) {

if ( /^dow_[mtwrfsn]{1}[0]{1}$/.test($dow_m.attr("name"))== true ) {

$(".emessbox").html("Whoops! Every time condition must have a day of week assign to it");
e.preventDefault();
//console.log('abuot to existin here');
return;
}
}


Problem

The jquery code that I've written to filter for only the actual rows of data is returning more than I want. So in the above rendered HTML table example, I only actually have one row of data... but captures all three rows in the table and returns the output:

undefined is the ext
8659111 is the ext
undefined is the ext


Question

I thought that this line:

$('.tcdata tr').each(function (i, row) {


would return all rows in my table that has the class "tcdata".

And then I thought that this line:

var $ext = $row.find('input[name*="extension"]');


would filter each row and only give me rows that have input controls with names that match the pattern, in this case "extension".

But it's clearly giving me more than I want and so the code is failing.
I can't seem to find my mistake.

Any suggestions would be appreciated.

Answer

You need to have a class as tcdata in required <tr> tags and you have to change $('.tcdata tr').each(function (i, row) { this to $('tr.tcdata').each(function (i, row) {

This way it will return just the rows you required.

JS

$('tr.tcdata').each(function (i, row) { ... });

HTML

<tr class="tcdata">
      <td>
        <button id="del_tc1" type="button" class="btn btn-warning btn-circle deletetcrow"><i class="fa fa-times"></i></button>&nbsp;&nbsp;TC 1:</td>
      <td>
        <input class="form-control starttc " type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime1">
      </td>
      <td>
        <input class="form-control " type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime1">
      </td>
      <td>
        <input class="form-control " type="input" placeholder="Extension" name="extension1">
      </td>
      <td>
        <input class="form-control " type="input" placeholder="Domain" name="domain1">
      </td>
      <td colspan="2">
        <label class="checkbox-inline"><b>Days of Week:</b></label>
        <input class="checkbox-inline " type="checkbox" id="dow_m1" name="dow_m1">Mon&nbsp;
        <input class="checkbox-inline " type="checkbox" id="dow_t1" name="dow_t1">Tue&nbsp;
        <input class="checkbox-inline " type="checkbox" id="dow_w1" name="dow_w1">Wed&nbsp;
        <input class="checkbox-inline " type="checkbox" id="dow_r1" name="dow_r1">Thu&nbsp;
        <input class="checkbox-inline " type="checkbox" id="dow_f1" name="dow_f1">Fri&nbsp;
        <input class="checkbox-inline " type="checkbox" id="dow_s1" name="dow_s1">Sat&nbsp;
        <input class="checkbox-inline " type="checkbox" id="dow_n1" name="dow_n1">Sun&nbsp;</td>
    </tr>