CODEWITHSUNDEEP
javascriptjqueryhtml
bumbumpaw
bumbumpaw

Reputation: 2528

Changing input values from table1 to table2 on keypress mode

see FIDDLE DEMO

Can anyone guide me on keypress event, I can't get my input values right? 

$(document).on('keydown', $('#table1 tbody tr td input'), function (e) {
var oldValue ='?';//get the input value before keypress or edit

    var newValue = "?"; //get the input value after keypress or edit

  $('#table2').find('tbody tr').each(function (i) {
        var $td2 = $(this).find('td input:text');
        if (oldValue == $td2.val()){
            $td2.val(newValue);    
        }
    });

});

and $(document).on('keydown', $('#table1 tbody tr td input'), function (e) { should only apply on table 1 first column ,right now it also applying when keypress on table1 column 2 is triggered.

Does if I edit "Apple" to "Apple Pie", Apple from table 2 will automatically change to "Apple Pie".

Upvotes: 0

Views: 160

Answers (2)

Jain
Jain

Reputation: 1249

Try this:

$(document).off('keydown').on('keydown', $('#table1 tbody tr td input'), function (e) {

var oldValue =$(e.target).val();//get the input value before keypress or edit
    $(document).on('keyup', $('#table1 tbody tr td input'),function(e){ 

        $('#table2').find('td input').each(function(){
            if($(this).val() === oldValue){
                $(this).val($(e.target).val());
            }
        $(document).off('keyup');
        });
    });              
});

Try this now:

 $(document).off('keydown').on('keydown', '#table1 input:first', function (e) {

var oldValue =$(e.target).val();//get the input value before keypress or edit
    $(document).on('keyup', '#table1 input:first',function(e){ 

        $('#table2').find('td input:first').val($(e.target).val());
        $(document).off('keyup');
    });              
});

Upvotes: 1

The Mechanic
The Mechanic

Reputation: 2329

here is fiddle

here is the snippet for better understand i have changed the event Reason: if you wish to instant change

HTML CODE

<form id='form1'>
<table id='table1'>
    <tbody>
        <tr>
            <td>
                <input type='text' class="1" value="Apple" />
            </td>
            <td>
                <input type='text' value="" />
            </td>
        </tr>
        <tr>
            <td>
                <input type='text' class="2" value="Banana" />
            </td>
            <td>
                <input type='text' value="" />
            </td>
        </tr>
    </tbody>
</table>Table2
<table id='table2'>
    <tbody>
        <tr>
            <td>
                <input type='text' class="1" value="Apple" />
            </td>
        </tr>
        <tr>
            <td>
                <input type='text' class="2" value="Banana" />
            </td>
        </tr>
        <tr>
            <td>
                <input type='text' class="3" value="Banana" />
            </td>
        </tr>
    </tbody>
</table>
<br />

JAVASCRIPT CODE

$(document).on('keyup', '#table1 tbody tr td input', function (e) {

var cls = $(this).attr('class');

var oldValue ='?';//get the input value before keypress or edit

var newValue = "?"; //get the input value after keypress or edit

newValue = $(this).val();

  $('#table2').find('tbody tr').each(function (i) {

    var targInp = $(this).find('td input.'+cls)//$(this).find('td input:text')hasClass(cls);
    oldValue = $(this).find('td input.'+cls).val();


    console.log('got it', oldValue);


    if (oldValue != newValue){
        targInp.val(newValue);    
    }
  });

});

Upvotes: 0

Related Questions