Change value of input pair javascript

Question

For an application I am working on, I want to autocomplete a field using the input of the other field. My form will contain several pairs of inputs, which causes the problem for me to only change one specific input field.

$(function () {
        $(".master").change(function () {

            word = $(this).val();
            $(this).parents('tr').find(".slave").val(word);

        });
    });

To add extra fields to the form, the script below is used.

$(document).ready(function() {
    var max_fields      = 1000; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<tr><td><div class="form-group"><input type="text" class="master" name="or['+x+']"></div></td><td>&nbsp;</td><td><div class="form-group"><input type="text" class="slave" name="tr['+x+']"></div></td></tr>'); //add input box
        }
    });
});

This is the form I'm using. This is one of the 100 rows in this form.

<form method="POST">
    <table width="100%" class="input_fields_wrap">
        <tr>
            <td width="48%">
                <div class="form-group">
                    <select id="original" name="original" class="form-control">
                      <option value="nederlands">Nederlands</option>
                    </select> 
                </div>
            </td>
            <td width="4%"></td>
            <td width="48%">
                <div class="form-group">
                    <select id="translated" name="translated" class="form-control">
                      <option value="frans">Frans</option>
                    </select> 
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="form-group"><input type="text" class="master" name="or[0]"></div>
            </td>
            <td>&nbsp;</td>
            <td>
                <div class="form-group"><input type="text" class="slave" name="tr[0]"></div>
            </td>
        </tr>
    </table>
    <button type="submit" id="save" class="btn btn-success pull-right">Opslaan</button>
    </form>

So just to be clear, I want to change the value of the "translation" input according to the value of the input in the same row. As my form contains so many rows, I don't know how to change that specific input according to the input in the same table row. Thanks in advance!

Answer 1

Here you go, I had to take out the ajax call but if you need help adding it back in just let me know.

I changed your html a bit by using classes instead of id's and this is the relevant js.

$(function () {
    $("table").on('change', '.master', function () {

        word = $(this).val();
        $(this).parents('tr').find(".slave").val(word);

    });
});

https://jsfiddle.net/6LaLm33t/4/

Answer 2

If you don't want (or can't, for some reason) to change HTML (you will have to do it, anyway, if there are multiple id's!), this is one of the ways to get desired result:

$('table tr td:first-child input').on("keyup", function() {

$(this).closest('tr').find('td:last-child input').val($(this).val());
});

So, if you have 3 cells (td's) in row, first selector will 'grab' first input, second one will find last/second input in the same row.

$('table tr td:first-child input').on("keyup", function() { //or desired event...change...input..

$(this).closest('tr').find('td:last-child input').val($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>
                <div class="form-group"><div class="ui-widget"><input type="text" id="original" class="form-control" name="or[0]"></div></div>
            </td>
            <td>&nbsp;</td>
            <td>
                <div class="form-group"><input type="text" id="translation" class="form-control tags" name="tr[0]"></div>
            </td>
        </tr>
<tr><td>
                <div class="form-group"><div class="ui-widget"><input type="text" id="original" class="form-control" name="or[0]"></div></div>
            </td>
            <td>&nbsp;</td>
            <td>
                <div class="form-group"><input type="text" id="translation1" class="form-control tags" name="tr[0]"></div>
            </td>
        </tr>
<tr><td>
                <div class="form-group"><div class="ui-widget"><input type="text" id="original1" class="form-control" name="or[0]"></div></div>
            </td>
            <td>&nbsp;</td>
            <td>
                <div class="form-group"><input type="text" id="translation2" class="form-control tags" name="tr[0]"></div>
            </td>
        </tr>        
        
        
</table>  

Answer 3

What you can do is get the parent, and then find the #translation of that parent. original and translation should probably be classes.

var word = '';
$(function () {
    $(".original").change(function () {
        word = $(this).val();
        var arr;
        $.ajax({ type: "POST", async: false, url: 'wordsuggestion' + word, success: function(data) { 
            arr = data;
            $(this).parents('tr').find(".translation").val(arr);
        }});
    });
});