current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
    
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 Mar 27 '13 at 14:29
add comment

2 Answers

up vote 2 down vote accepted

Using the change event:

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

jsFiddle & .change()

share|improve this answer
    
I really appreciate all your helps. I am implementing now, it works. How come the jquery looks simple, but dan hard to write correctly. –  Frank Zhu Mar 27 '13 at 18:03
    
Haha, yea it's easy to mess up. But fun to work with. :) –  Syon Mar 27 '13 at 18:14
    
@FrankZhu If this answer worked for you can you accept it by clicking the checkmark on the left? :) Thanks and good luck! –  Syon Mar 28 '13 at 12:20
    
I click the "check", it but it changes back again. I post another question, do you mind taking a look when you get a chance. –  Frank Zhu Apr 26 '13 at 17:53
add comment
up vote 0 down vote

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.net/kfdNs/

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.