Having trouble with jquery dynamic input and regex matching. Partially works-CodePudding

I have a dynamic input field where a user can add as many colors as he wants using an "Add" button. The array works fine. Posts fine. My issue is with a some regex matching. Basically if a user enters one of the colors in the regex pattern a div container with another input shows. This works fine.

The issue:

User enters "purple" - no match, nothing shows. Good.
User enters "blue" - match, div shows. user deletes "blue" div disappears. Good.
User enters "red" - match, div appears. Good.
User enters "yellow" - no match, div disappears. Not Good.

Once the match has occurred I need the div to stay visible. What's happening though is it's removing the div if the next input is not a match.

$("#add").click(function(e){
    $('input[name="item_color[]"]').keyup(function() {
        var data = $(this).val();
        var regx = /(blue|red|orange)/gmi;
           
        if (data.match(regx)){  
            $("#divcolor").show();
        }
        else {
            $("#divcolor").hide();
        }
    });
});

I've tried removing the

$("#divcolor").hide();

which somewhat works. except if the user goes back through the inputs and deletes the match that caused the div to show initially the div continues to show.

Basically I just need it to show the div if any match occurs in any of the inputs and hide the div if no matches occur. I really need the div to show/hide on keyup is the biggest thing.

Any help would be appreciated. I'm sure its something easy. I just can't wrap my mind around the logic.

CodePudding user response：

You could solve the issue by checking all inputs each time you call the handler and set a var to true, if there is a match:

let matches = false;

$('input[name="item_color[]"]').each(function() {
  if ($(this).val().match(regx)){  
    matches = true;
  }
});

Furthermore the issue, that you mentioned in the comments, that the event handler isn't working when you define it outside the add handler, is related to the fact, that the inputs aren't created at the time of the definition. To prevent it you could attach the event listener directly to the body but add a selector to it:

$('body').on('keyup', 'input[name="item_color[]"]', function() {

Then the event listener is attached to an element that exists and the selector is used not before the listener is called.

Working example:

$("#add").click(function(){
  $('#input-wrapper').append('<input name="item_color[]">');
});

$('body').on('keyup', 'input[name="item_color[]"]', function() {
    let matches = false;
    var regx = /(blue|red|orange)/gmi;
    
    $('input[name="item_color[]"]').each(function() {
      if ($(this).val().match(regx)){  
          matches = true;
      }
    });
    
    if (matches){  
        $("#divcolor").show();
    }
    else {
        $("#divcolor").hide();
    }
});

#divcolor {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="add">Add</button>

<div id="input-wrapper">
  <input name="item_color[]">
</div>

<div id="divcolor">
  <p>div visible</p>
</div>