How to find next elements using jquery?

Question

In my given example, i have two text boxes. when value in first text box changed i want to find the immediate next text box (note : without id) and change its value.

The example given contains only single text box group. actually it can be more than one text boxes. (group of from & to text boxes of Financial Data)

so, when value in from text box (txtFinancialYearFrom) changed, i want to find the to text box (txtFinancialYearTo) and change its value as well.

JsFiddle Link - Example

Thanks in advance for the help!!

<table class="fotm-table">                       

                    <tr>
                        <td class="text-right" width="120">
                            <span id="ContentPlaceHolder1_lblFinancialYear">Financial Data :</span>
                        </td>
                        <td>
                            <span>
                                <input type="text" id="txtFinancialYearFrom" 
                                name="ctl00$ContentPlaceHolder1$txtFinancialYearFrom">
                            </span>
                        </td>
                        <td width="20" align="center">
                            <span style="align-content: center">to</span>
                        </td>
                        <td>
                            <span>
                                <input type="text" id="txtFinancialYearTo" 
                                name="ctl00$ContentPlaceHolder1$txtFinancialYearTo">
                            </span>
                        </td>
                    </tr>                        
                </table>

Given that the other input has an `id`, can you not just select it directly without traversing the DOM, `$('#txtFinancialYearTo`')`? — Rory McCrossan, Jul 03 '15 at 14:07
Did you try google? https://api.jquery.com/next/ is literally the first link if you google "jquery next element" you'll probably want something like $("input").keyup(function(){ $(this).next('input').val($(this).val()+1);}); — Charlie Wynn, Jul 03 '15 at 14:16
@RoryMcCrossan, i want to select it dynamically the next element, with reference to current element. — PrinceT, Jul 03 '15 at 14:18

score 1 · Accepted Answer · answered Jul 03 '15 at 14:37

Using the given information, since you are going to have more blocks (that should be rows on your table), this solution should work:

    var rows = $('.fotm-table tr');
    $(rows).each(function(){
        $('input:first', $(this)).on('change', function(){
            var fromValue = $(this).val();
            var row = $(this).closest('tr');
            $('td:last input', row).val(parseInt(fromValue) + 1);
        });
    });

The code gets all the rows from your table and for each one of them, it will add a listener that when you change the first textbox (input), it will change the value of the next textbox (here it's adding 1 to it).

score 1 · Answer 2 · answered Jul 03 '15 at 14:53

If I've understood correctly, you need something like this:

/* Loop through all table rows */
$('tr','table.fotm-table').each(function() {
   var tr = this;
    /* Cache all inputs a jquery object - you may want to specify which type    of input you are targeting i.e. $('input[type="text"]') */
   var inputs = $('input',tr);
    /* Cache the slave (second in the example) input in a jquery   object - you can do the same for multiple inputs, simply by   modifying the eq() index parameter
    */
   var slaveInput = inputs.eq(1);
    /* Listen for changes on the master input */
   var masterInput = inputs.eq(0).on('change',function() {
   /* Do smt on the slave input - fill it with the next year in  the example */
       var year = $(this).val(); 
       var followingYear = parseInt(year,10)+1
       slaveInput.val(followingYear);
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="fotm-table">                       

                        <tr>
                            <td class="text-right" width="120">
                                <span id="ContentPlaceHolder1_lblFinancialYear">Financial Year :</span>
                            </td>
                            <td>
                                <span>
                                    <input type="text" id="txtFinancialYearFrom" 
         name="ctl00$ContentPlaceHolder1$txtFinancialYearFrom">
                                </span>
                            </td>
                            <td width="20" align="center">
                                <span style="align-content: center">to</span>
                            </td>
                            <td>
                                <span>
                                    <input type="text" id="txtFinancialYearTo" 
         name="ctl00$ContentPlaceHolder1$txtFinancialYearTo">
                                </span>
                            </td>
                        </tr>                        
                    </table>

Here's an updated fork of the jsFiddle you provided: https://jsfiddle.net/jkdaza/thonfzwu/5/

Thanks @Dario. It's fantastic!! – PrinceT Jul 06 '15 at 05:53 — PrinceT, Jul 06 '15 at 05:53

score 0 · Answer 3 · edited May 23 '17 at 12:29

0

You can use this tricky solution from link:

$('#txtFinancialYearFrom').change(function(el) {
    $(':input:eq(' + ($(':input').index(this) + 1) + ')').val('test');
});

https://jsfiddle.net/g34yqL0u/2/

edited May 23 '17 at 12:29

Community

1
1

answered Jul 03 '15 at 14:21

suvroc

3,058
1
15
29

How to find next elements using jquery?

3 Answers3