Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect row data change in html (form) table (JavaScript / Jquery)

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="comment" 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>
like image 509
Frank Zhu Avatar asked Jul 31 '26 14:07

Frank Zhu


1 Answers

Using the change event:

$('#form1').on('change', 'input, select, textarea', function(){
    $(this).closest('tr').find('input[name="dbFlag"]').val('U');
});

jsFiddle & .change()

like image 72
Syon Avatar answered Aug 03 '26 04:08

Syon



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!