CODEWITHSUNDEEP
jqueryhtml
Casey
Casey

Reputation: 1981

Renaming a check box with jQuery

I need to rename a check box when I insert a new table row into a table. For the love of pete I don't know why this isn't working

$('.productSelect').blur(function() {
      $('#invoiceTable tbody>tr:last').clone(true)
          .insertAfter('#invoiceTable tbody>tr:last').find("input").val("")
          .find("select").val("").find("checkbox")
          .attr('name', "soldOut[" +rowCount + "]");
    rowCount++;
    return false;
    });

The HTML:

<tr>
<td><img src="/pics/deleteRow.png" class="delete"> </td>
<td class="productColumn">

    <select name="productID[]" class="productSelect" >
        <option value="0"></option>
    </select>

</td>


<td>
    <select name="lotID[]" class="lotNumber" >
        <option value=0>Lot #</option>
    </select>
</td>
<td>
    <select name="wheelID[]" class="wheelNumber">
        <option value=0>Wheel</option>
    </select>

</td>
<td>
    <select name="packageType[]" class="packageType">
        <option value=0>Pkg Type</option>
    </select>
</td>
<td class="numberPieces"><input name="numberPieces[]" class="numberOfPieces"></td>
<td class="quantityField"><input name="weight[]" class="weight" ></td>
<td class=priceField><input name="price[]" type="number" step="any">
</td>
<td class="subtotalField"><input type="number" step="any" readonly="readonly"></td>
<td class="soldOut"><input type="checkbox" name="soldOut[<?php echo $rowNum; ?>]" class="soldOutBox" ></td>

Any idea what the problem is?

Upvotes: 0

Views: 172

Answers (1)

wirey00
wirey00

Reputation: 33661

when you do a find() you need to do an .end() to go back in the stack so you are back at your previous element

$('div').find('span') // you are now at the span level.. so you have to do 
$('div').find('span').end() // to get back at the div level

Another example

$('div').find('p').find('span') // <-- you are at the span level
$('div').find('p').find('span').end() // <-- you are now at the p level
$('div').find('p').find('span').end().end() // back at the div level

so you have to do

  $('#invoiceTable tbody>tr:last').clone(true)
      .insertAfter('#invoiceTable tbody>tr:last').find("input").val("").end() // add end
      .find("select").val("").end() // add end
      .find("checkbox").attr('name', "soldOut[" +rowCount + "]");

Another error made was this

.find("checkbox") // <-- there are no checkbox elements

Change it to this

.find("input[type=checkbox]") // they are input with type=checkbox

FIDDLE

Upvotes: 2

Related Questions