Copy link to clipboard
Copied
I have a form with many rows built in a cfloop. I am trying to do a simple client side calculation if the user changes a value in a text box. I can ge the calculation to work, but it places the result in the last row of the form rather than the row the user changed. In other words, they change the values in a text box on row 3 for example. It calculates the right value(using row 3 values) and places the result in the last row(for example row 54).
<td align="center">
<cfinput id="costPerUnit_#currentrow#" name="costPerUnit_#currentrow#" required="yes" value="#products.COSTPERUNIT#" tabindex="-1">
</td>
<td align="center">
<cfinput id="ozPerUnit_#currentrow#" name="ozPerUnit_#currentrow#" required="yes" value="#products.OZPERUNIT#" tabindex="-1">
</td>
<td align="center">
<cfajaxproxy bind="javascript:doCalcCostPerOz({costPerUnit_#currentrow#},{ozPerUnit_#currentrow#})" />
<script>
function doCalcCostPerOz(c,o) {document.getElementById("costPerOz_#currentrow#").value = (parseFloat(c)/parseFloat(o)).toFixed(2);}
</script>
<cfinput id="costPerOz_#currentrow#" name="costPerOz_#currentrow#" type="text" value="#products.COSTPEROZ#">
</td>
Does anyone have any insight how to make sure the results of the above calculation go to the proper row? I assume it has something to do with the bind expression above and the fact that the costPerOz_#currentrow# is not in the bind expression.
Copy link to clipboard
Copied
I think I found a workaround for this. I stored the currentrow in a hidden input field and passed it to the javascript function. Here is the code that worked for me:
<!--- thisinput field only stores the current row in order to display the resule of the below javascript calculation --->
<cfinput id="rowIndex_#currentrow#" name="rowIndex_#currentrow#" type="hidden" value="#currentRow#">
<td align="center">
<cfajaxproxy bind="javascript:doCalcCostPerOz({costPerUnit_#currentrow#},{ozPerUnit_#currentrow#},{rowIndex_#currentRow#})" />
<script>
var fieldName = "costPerOz_";
function doCalcCostPerOz(c,o,r) {
document.getElementById(fieldName.concat(r)).value = (parseFloat(c)/parseFloat(o)).toFixed(2);
}
</script>
<!---#products.COSTPEROZ#--->
<cfinput id="costPerOz_#currentrow#" name="costPerOz_#currentrow#" type="text" value="#products.COSTPEROZ#" readonly="yes" tabindex="-1">
</td>