My task involves working with a report that generates a form in input mode. This form contains multiple rows of data, each row consisting of a button and an input field. The input field name remains consistent across all rows for easier processing by the CGI program. I am looking to implement a functionality where clicking on the button within a specific row automatically updates the input field on that same row using JavaScript. How can JavaScript locate and update the correct input field based on the button clicked?
I find myself at a standstill right from the beginning and unsure of how to proceed.
Here is a simplified version of the HTML structure:
<table>
<tr>
<td>Frank</td>
<td>Burns</td>
<td><input type="text" name="overtime" value="1000"></td>
<td><input type="button" name="averageIN" value="Average In" onclick="return avgIN('1000,'2000');">
</tr><tr>
<td>John</td>
<td>Doe</td>
<td><input type="text" name="overtime" value="500"></td>
<td><input type="button" name="averageIN" value="Average In" onclick="return avgIN('500,'2000');">
</tr>
</table>
Below is the incomplete snippet of the JavaScript code:
function avgIN(orig, avg) {
let text = "Request to Average In Overtime:\n\n"+
"Current OT Total: "+orig+"\n"+
"Averaged In Total: "+avg+"\n\n"+
"Click OK to accept";
if (confirm(text) == true) {
// Add logic here to update the overtime input field on the same row with the value of "avg"
}
else {
alert("Average In function canceled");
}
}