Trigger change or input when javascript changes input value

Question

I'm working in a little project with JQuery, and i having a problem removing error classes from html elements.

I'm using $('selector').on('input') to get the event and remove the input class, my problem is when the field is generated with JavaScript;

Example

  $('#one').on('input',function(){
        $('#two').val(  $('#one').val()  );
    });


    $(':input').on('input', function ()
    {
        if ($(this).hasClass('example'))
        {
            $(this).removeClass('example');
        }
    });

 .example
    {
        color: orange;
        background-color: black;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Normal Case</h2>
        <input type="text" class="example">

        <h2>Problem</h2>
        <label for="one">#ONE</label>
        <input type="text" class="example" id="one">
        <br/>
        <label for="two">#TWO</label>
        <input type="text" class="example" readonly="readonly" id="two">

In this case, i change #two value when #one changes, #one remove .example but #two dont

I need to remove .example class from #two input

EDIT: I want to do it in a generic way because i have a LOT of this cases in my project

Is some way to trigger that kind of changes?

Thanks so much!

Calvin Nunes · Accepted Answer · 2018-05-04 12:58:54Z

Maybe the code I wrote below help you. It's not perfect but it's a good point of start.
I added a custom attribute that I called data-group for the inputs that are of the same "group".
I also modified the listener for input in a way that from a single listener function, you will have all inputs listening.

Check if this helps you.

$('.example').on('input',function(){
    var value = this.value; 
    var groupName = $(this).attr('data-group');
    var groupElems = $("[data-group='"+groupName+"']");
    groupElems.removeClass('example');
    groupElems.val(value);
});

.example
    {
        color: orange;
        background-color: black;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Problem</h2>
<label for="one">#ONE</label>
<input type="text" class="example" data-group="group1" id="one">
<br/>
<label for="two">#TWO</label>
<input type="text" class="example" data-group="group1" readonly="readonly" id="two">

        <h2>Problem</h2>
<label for="three">#THREE</label>
<input type="text" class="example" data-group="group2" id="three">
<br/>
<label for="four">#FOUR</label>
<input type="text" class="example" data-group="group2" readonly="readonly" id="four">

        <h2>Problem</h2>
<label for="five">#FIVE</label>
<input type="text" class="example" data-group="group3" id="five">
<br/>
<label for="six">#SIX</label>
<input type="text" class="example" data-group="group3" readonly="readonly" id="six">

Scott Marcus · Accepted Answer · 2018-05-04 12:51:39Z

1

Inside the true branch of your if statement, use the .nextAll() method, along with a selector to find the next input following this. That way, when the first input has the class removed, the next input that follows it will have its class removed as well.

Also, change your input event setup so that it is set to work on input elements of a certain class in the first place and give the first of each set of inputs that class.

$('#one').on('input',function(){
  $('#two').val(  $('#one').val()  );
});

// Only when an input with the "input" class gets input
$('input.input').on('input', function () {
  if ($(this).hasClass('input')) {
     $(this).removeClass('input');
     
     // Find the next input sibling that follows "this"
     $(this).nextAll("input").removeClass("input");
  }
});

.input {
  color: orange;
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Normal Case</h2>
<input type="text" class="input">

<h2>Problem</h2>
<label for="one">#ONE</label>
<input type="text" class="input" id="one">
<br>
<label for="two">#TWO</label>
<input type="text" class="input" readonly="readonly" id="two">

edited May 4, 2018 at 12:51

answered May 4, 2018 at 12:41

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

2 Comments

Juan Salvador Portugal Over a year ago

Hello, thanks for response, the thing is, i only need #two to remove the class if #one does it, not if any input does it

Scott Marcus Over a year ago

@JuanSalvadorPortugal That's what this code does because the extra line is only run if the true branch of the if statement is hit.

Saturnin · Accepted Answer · 2018-05-04 12:54:34Z

0

You can check, if the current field is #one using .is() :

$(':input').on('input', function () {


       if(($(this).is("#one"))) {

            if ($('#two').hasClass('example'))
            {
                $('#two').removeClass('example');
            }

       }

       if ($(this).hasClass('example'))
       {
           $(this).removeClass('example');
        }
});

answered May 4, 2018 at 12:54

Saturnin

362 bronze badges

1 Comment

Scott Marcus Over a year ago

The OP says that this will be a repeating pattern, so the answer can't be based on ids because ids need to be unique.

Collectives™ on Stack Overflow

Trigger change or input when javascript changes input value

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related