Question

I can’t seem to get this right. I’m looking for the right jQuery to do math on one visible and 4 hidden fields, but to make this easier, I only require one of each.

I’m trying to get a number entered into the input ‘oh’ and have it calculate on blur of the ‘oh’ field in that row. The math would be oh – par and the result would display in the span with the id “ord”.

I’ve tried quite a few different approaches, but was curious what the pros would come up with. I can get it to work with one row, but not be correct for the next row.

<form action="orderProcess.php" method="post">
  <table id="newOrder" border="0" class="infoTable">
    <tr>
      <th>name</th>
      <th>par</th>
      <th>type</th>
      <th>vendor</th>
      <th>sort</th>
      <th>deal</th>
      <th>Pack</th>
      <th>OH</th>
      <th>moq</th>
      <th>&nbsp;</th>
      <th>Order</th>
      </tr>
    <tbody>
    <?php do { ?>
      <tr data-id="<?php echo $row_connList['id']; ?>">
        <td><?php echo $row_connList['name']; ?></td>
        <td><?php echo $row_connList['par']; ?></td>
        <td><?php echo $row_connList['type']; ?></td>
        <td><?php echo $row_connList['vendorId']; ?></td>
        <td><?php echo $row_connList['sortId']; ?></td>
        <td><?php echo $row_connList['deal']; ?></td>
        <td><?php echo $row_connList['casePack']; ?></td>
        <td><input name="par" type="hidden" id="par" value="<?php echo $row_connList['par']; ?>" />
          <input name="moq" type="hidden" id="moq" value="<?php echo $row_connList['minOrderQty']; ?>" />
          <input name="mot" type="hidden" id="mot" value="<?php echo $row_connList['minOrderType']; ?>" />
          <input name="pack" type="hidden" id="pack" value="<?php echo $row_connList['casePack']; ?>" />
          <input name="oh" type="text" id="oh" size="6" />
        </td>
        <td><?php echo $row_connList['minOrderQty']; ?></td>
        <td>&nbsp;</td>
        <td><span id="ord"></span></td>
        </tr>
      <?php } while ($row_connList = mysql_fetch_assoc($connList)); ?>
      </tbody>
      <tr>
        <td><input name="Submit" type="button" value="Submit" /></td>
       </tr>
  </table></form>

Answer 1

As already mentioned in the comment above, IDs must be unique.
Use classes instead to identify your elements in each row.

i.e.

<input name="par" class="par" /* snip */ />
<input name="moq"class="moq" /* snip */ />

and finally

<span class="ord"></span>

Since blur events don’t bubble, you’ll have to go with separate event listeners:

$('#newOrder').find('tbody').find('.oh').bind('blur', function () {
    var $this = $(this),
        $parentRow = $this.closest('tr'),
        // Assuming it's integer values, parseFloat otherwise (without the radix).
        // || 0 is a fallback value in case the values do not resemble valid ints
        // you may want to add more sensible validation instead though
        ohVal = parseInt($this.val(), 10) || 0,
        parVal = parseInt($parentRow.find('.par').text(), 10) || 0;

    $parentRow.find('.ord').text(ohVal - parVal);
});