How to change the value of subsequent inputs?

Asked

Viewed 764 times

4

In a form there are N occurrences of values for the same product, to facilitate I want to apply the same value to the subsequent inputs.

For example, using the structure below:

<input class="valor partida" type="text" name="novo_valor_partida-1" value="11,11" data-produto="0101000" data-id="1">

<input class="valor partida" type="text" name="novo_valor_partida-2" value="11,11" data-produto="0101000" data-id="2">

<input class="valor partida" type="text" name="novo_valor_partida-3" value="11,11" data-produto="0101000" data-id="3">

When you modify the value in input 1, 2 and 3 will also receive the value. If input 2 is changed, only input 3 receives the value and so on.

Since there are N fields, I will use the attribute data-produto to select the inputs.

javascript jquery

2 answers

7


You can do it like this:

$('input').on('change', function() {
    $(this).nextAll('input').val(this.value);
});

jsFiddle: https://jsfiddle.net/abyy9qr8/

The nextAll() get all the next siblings of the element, in this case with the selector input.

I used the event change but you can also use the keyup and so it happens at the moment of writing. You might want to use both to make sure that it works even if the content has been uploaded by copy/Paste.

  • Does this guarantee that inputs will be analyzed in the same order as in html? Just curious.

  • @Renan not sure of the order, but the Docs say "Get all following siblings", therefore previous siblings will not be included.

  • Sergio, using Blur and an older version do not get the same result. I am using, unfortunately, version 1.4.4 and Blur event due to some checks I will do in input.

  • @Marcelodeandrade you mean you need to use the event .blur()? or you can use both? $('input').on('change blur', function() {

  • I can use both, but I believe that the version I am using will not help because error occurs Uncaught TypeError: $(...).on is not a function in the method other than not applying the nextAll

  • @Marcelodeandrade ah, because the .on( came later :) changes to .bind(

  • @Sergio one thing I noticed is that it "hangs" depending on the level of the element. For example: If the element is in a TR does not work. Example of the HTML I am using: jsfiddle

  • @Marcelodeandrade in your example in the question the inputs are siblings hence the solution I indicated in the reply. If they are not, and you want to give the same value, you have to do it differently, for example: https://jsfiddle.net/4k3x49sL/1/ That’s why it’s important to have as much detail as possible for the answer to be accurate and to help.

  • I got it, @Sergio.

Show 4 more comments

0

I made an example in jQuery.

  • I select all inputs that the data-produto be it 0101000
  • I add to all of them a Listen for the events change and keyup
  • Save the value of the input that called the event
  • I assign the new value to all inputs

var $todosInputs = $('input[data-produto=\'0101000\']');
$todosInputs.on('change keyup', function() {
  $(this).nextAll($todosInputs).val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="valor partida" type="text" name="novo_valor_partida-1" value="11,11" data-produto="0101000" data-id="1">
<input class="valor partida" type="text" name="novo_valor_partida-2" value="11,11" data-produto="0101000" data-id="2">
<input class="valor partida" type="text" name="novo_valor_partida-3" value="11,11" data-produto="0101000" data-id="3">

  • But if I edit the second element, the first one is also affected.

  • Corrected by @Marcelodeandrade

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.