Hi I am a reader and getting a lot of help here. This is my first post. I know this could be a similar question, but I still could not find answer for it. Can someone please help me to write a JavaScript / jquery code: if a user modifies any of these fields, then the dbFlag value will set to "U" (init. as “N”). I am struggling to produce the correct code. Note: the data rows are populated from DB, so it could be 1 row, or N rows. Highly appreciate your time and efforts.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="form1" id="form1" action="saveData" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<th>Badge #</th>
<th>turn #</th>
<th>Comment</th>
</tr>
<tr>
<td><input type="text" size="7" name="badge" id="badge" value="000000" /></td>
<td>
<select name="descMpoint" id="descMpoint2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><textarea name="ment" cols="50" rows="2">txt area</textarea></td>
<td><input type="hidden" name="dbFlag" id="dbFlag" value="N" />
</tr>
</tbody>
</table>
<br>
<span class="tab"><input type="submit" name="updateData" value="Submit" id="updateData"/></span>
<br><hr>
</form>
</body>
</html>
Hi I am a reader and getting a lot of help here. This is my first post. I know this could be a similar question, but I still could not find answer for it. Can someone please help me to write a JavaScript / jquery code: if a user modifies any of these fields, then the dbFlag value will set to "U" (init. as “N”). I am struggling to produce the correct code. Note: the data rows are populated from DB, so it could be 1 row, or N rows. Highly appreciate your time and efforts.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="form1" id="form1" action="saveData" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<th>Badge #</th>
<th>turn #</th>
<th>Comment</th>
</tr>
<tr>
<td><input type="text" size="7" name="badge" id="badge" value="000000" /></td>
<td>
<select name="descMpoint" id="descMpoint2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><textarea name="ment" cols="50" rows="2">txt area</textarea></td>
<td><input type="hidden" name="dbFlag" id="dbFlag" value="N" />
</tr>
</tbody>
</table>
<br>
<span class="tab"><input type="submit" name="updateData" value="Submit" id="updateData"/></span>
<br><hr>
</form>
</body>
</html>
-
1
You want to use an
.on('change',function(){});event to capture the change then traverse the dom to update the value: Something like $('input').on('change', function(){$(this).closest('tr').find('input[name=dbFlag]').val('U')}); But you need to remove that ID - you can only have unique ID's - you can change to a class to make it easier. – Syon Commented Mar 27, 2013 at 14:29
2 Answers
Reset to default 11Using the change event:
$('#form1').on('change', 'input, select, textarea', function(){
$(this).closest('tr').find('input[name="dbFlag"]').val('U');
});
jsFiddle & .change()
In jQuery, use the change event function. Note that the function fires when the field in question is unfocused/blurred.
Example:
$("#badge").change(function(){
var currentElement = $(this); //reference to the element that was changed
//etc. etc.
});
JSFiddle: http://jsfiddle/kfdNs/