CODEWITHSUNDEEP
javascriptjquery
manqlele
manqlele

Reputation: 77

Incrementing function argument after jQuery .clone()

I have a php script that prints out price values for current page in a table. Each row is a different price for 1 product and can be edited.

<table border="0" cellpadding="5" cellspacing="0" class="content" id="page_prices">
<thead>
  <tr>
      <th>description</th>
        <th>sku</th>
        <th>single</th>
        <th>quantity</th>
        <th>price</th>
        <th>currency</th>
        <th width="25"></th>
</thead>
<tbody> 

<?php
for($i=0; $i<$count_prices; $i++)
{
  echo "<tr>";
  echo "<td><input name=\"price_description[]\" type=\"text\" id=\"price_description\" size=\"20\" value=\"".$prices[$i]['description']."\">";
  echo "<td><input name=\"price_code[]\" type=\"text\" id=\"price_code\" size=\"5\" value=\"".$prices[$i]['code']."\">";
  echo "<td><input name=\"price_pcs[]\" type=\"text\" id=\"price_pcs\" size=\"5\" value=\"".$prices[$i]['pcs']."\">";
  echo "<td><input name=\"price_qty[]\" type=\"text\" id=\"price_qty\" size=\"5\" value=\"".$prices[$i]['qty']."\">";
  echo "<td><input name=\"price_value[]\" type=\"text\" id=\"price_value\" size=\"10\" maxlength=\"10\" value=\"".$prices[$i]['price_value']."\" onChange = \"CalcSale(this.form, $i);\">";
  
  echo "<td><input name=\"otstupka_pr[]\" type=\"text\" id=\"otstupka_pr\" size=\"5\" value=\"0\" onChange = \"CalcPerc(this.form, $i);\">";
  echo "<td><input name=\"regular_price[]\" type=\"text\" id=\"regular_price\" size=\"5\" value=\"".$prices[$i]['real_price']."\" onChange = \"CalcSale(this.form, $i);\">";
  echo "<td><input name=\"valid_to[]\" type=\"date\" id=\"valid_to\" size=\"10\" maxlength=\"10\" value=\"".$prices[$i]['valid_to']."\">";
  echo "<td>";
  echo "</tr>";
}

?>
  </tbody>
<tfoot>
    <tr><td colspan="7"> <a href="javascript: void(0)" id="add_page_price" class="add">Add price</a>
  </tfoot>
  </table>

There are 2 functions that calculate based on user input: CalcSale and CalcPerc. Each of them uses the value of the input and the counter $i in order to calculate separately on every row. When a user decides to add a new price and clicks on add_page_price the last row is cloned with:

$j("#add_page_price").click(function(){
 $j("#page_prices tbody tr:last").clone().appendTo("#page_prices tbody");
})

The question is: How can I clone the last row and increment the argument $i in the onChange = \"CalcSale(this.form, $i);\"

Upvotes: 0

Views: 49

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074335

How can I clone the last row and increment the argument $i in the onChange = \"CalcSale(this.form, $i);\"

I wouldn't do that at all. I'd suggest using modern event handling, probably involving event delegation:

1. Don't output an onChange attribute on the input elements, but do include either classes or data-* attributes on them (perhaps price-value and regular-price classes).

2. Change the CalcSale function to accept a DOM event.

function CalcSale(event) { // <== Consider using standard JavaScript convention: `calcSale`
   const row = $j(event.target).closest("tr");
   const priceValue = row.find(".price-value");
   const regularPrice = row.find(".regular-price");
   // ...use `priceValue` and `regularPrice` jQuery objects
}

3. Hook up CalcSale like this:

$j("#page_prices").on("change", ".price-value, .regular-price", CalcSale);

(Consider adding the input event too: .on("change input"...)

Then your cloning code doesn't have to worry about incrementing a counter (and it's easier to remove rows as well), and your existing code works:

// (Not changed)
$j("#add_page_price").click(function(){
 $j("#page_prices tbody tr:last").clone().appendTo("#page_prices tbody");
})

Upvotes: 2

Related Questions