I want to have a webpage with a long table full of input values. I want to get a checkbox checked when an individual row input value is modified. I have not been able to get the JavaScript part to work.
The below is my try
<!DOCTYPE html>
<html>
<head>
<style>table {border: 1px solid black;} </style>
</head>
<body>
<div class="container">
<form action="" method='POST'>
<table id="table" class="table">
<thead>
<tr>
<th data-type="number">No.</th>
<th>First name</th>
<th>Modified <br>"to be hidden"</th>
</tr>
</thead>
<tr>
<td><input name="no[]" value="1" oninput="mod(this)"></td>
<td><input name="f[]" value="Andrea" oninput="mod(this)"></td>
<td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
</tr>
<tr>
<td><input name="no[]" value="2" oninput="mod(this)"></td>
<td><input name="f[]" value="Peter" oninput="mod(this)"></td>
<td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
</tr>
<tr>
<td><input name="no[]" value="3" oninput="mod(this)"></td>
<td><input name="f[]" value="Sarah" oninput="mod(this)"></td>
<td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
</tr>
</table>
</form>
</div>
<script>
function mod(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("modcheck").modifed(i).checked = true;
}
</script>
</body>
</html>
You can iterate over each row, and add an oninput function to check the corresponding checkbox when input textbox is modified.
let rows = document.querySelectorAll("tr");
rows.forEach(row=>{
row.querySelectorAll("input:not(#modcheck)").forEach(input=>{
input.oninput = (e)=>{
row.querySelector("#modcheck").checked = true;
}
})
})<!DOCTYPE html>
<html>
<head>
<style>
table {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<form action="" method='POST'>
<table id="table" class="table">
<thead>
<tr>
<th data-type="number">No.</th>
<th>First name</th>
<th>Modified <br>"to be hidden"</th>
</tr>
</thead>
<tr>
<td><input name="no[]" value="1"></td>
<td><input name="f[]" value="Andrea"></td>
<td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
</tr>
<tr>
<td><input name="no[]" value="2"></td>
<td><input name="f[]" value="Peter"></td>
<td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
</tr>
<tr>
<td><input name="no[]" value="3"></td>
<td><input name="f[]" value="Sarah"></td>
<td><input id="modcheck" type="checkbox" name="modify[]" value=""></td>
</tr>
</table>
</form>
</div>
</body>
</html>