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!

If there are truly 100 rows with that exact HTML, you have invalid HTML. IDs must be unique. — Heretic Monkey
– Heretic Monkey, Commented Dec 30, 2016 at 17:22
@MikeMcCaughan I know, but my original code worked with IDs. Now I want to expand this code to make it work for these 100 rows. — P.Yntema
– P.Yntema, Commented Jan 1, 2017 at 19:05

Serg Chernata · Accepted Answer · 2017-01-01 20:32:47Z

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/

edited Jan 1, 2017 at 20:32

answered Dec 30, 2016 at 17:18

Serg Chernata

12.4k6 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

P.Yntema Over a year ago

This only works for the first class in the form. All the inputs below the first row are not autocompleted.

Serg Chernata Over a year ago

Not sure I understand, can you explain?

P.Yntema Over a year ago

I edited my question. I only get it working with the 'starting' field. The fields that are dynamically added, do not work.

LearnMoreCoding.com · Accepted Answer · 2016-12-30 17:21:54Z

0

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);
        }});
    });
});

answered Dec 30, 2016 at 17:21

LearnMoreCoding.com

1231 silver badge10 bronze badges

Comments

sinisake · Accepted Answer · 2016-12-30 17:52:19Z

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>

Collectives™ on Stack Overflow

Change value of input pair javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related