Show next element if user types in the previous element-CodePudding

I am having five Textarea, but I want to show Textarea one by one as the user types into those. For example, only the 1st Textarea should be visible on page load, and 2-5 should be hidden. When the user types into the 1st Textarea, the 2nd should be visible, and 3-5 should be hidden. Again, when user types into 2nd Textarea then 3rd should be shown, and 4-5 should be still hidden and so on. I have written some jQuery for it, please have a look. (Also I am having 20 textarea like this, so I need a neat code with this selector if possible.)

<textarea id="step1"></textarea>
<textarea id="step2"></textarea>
<textarea id="step3"></textarea>
<textarea id="step4"></textarea>
<textarea id="step5"></textarea>

<style>
#step2,#step3,#step4,#step5{display:none}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#step1').keyup(function(){ 
    if ($(this).val().length == 0) { 
        $('#step2').css("display","none");
    } 
    else { 
        $('#step2').css("display","block");
        }
}).keyup();
</script>

CodePudding user response：

You could use a selector like this: $('[id^=step]') to fetch all elements having the id starting with step when adding them the keyup event handler.

But it would be at risk of returning false positives if the document accidentally contained elements having a similar id. Also $('textarea[id^=step]') wouldn't be strict enough in my opinion.

So also for the sake of having a better strategy I slightly modified the document so that each step element is actually a div container embedding a label and a textarea with the added benefit of having the evidence of which textarea you are seeing on screen watching the label next to it.

My demo adds the keyup event handler to each of those elements having the step class with the convention that their id should begin with the string step anyway and following a consecutive number.

Such event handler when triggered, will extract the number part of the id of the container triggering the event, and will fetch the container having the consecutive id next to it ( 1). Such container will be hidden or shown based on the condition if the current textarea contains text AND the next textarea doesn't.

I'm not perfectly sure I totally understood that point though, feel free to correct me with details on where and why I might be wrong

$('.step textarea').keyup(function() {      
  const id = $(this).closest('.step').prop('id');
  const idMatch = /step(\d )/im.exec(id);    
  if (idMatch != null) {
    const idNext = parseInt(idMatch[1]) 1;       
    const nextStep = $(`#step${idNext} textarea`);      
    if(nextStep.length){
      if ($(this).val().length == 0 && $(nextStep).val().length == 0) {    
        $(`#step${idNext}`).css("display", "none");
      } else {
        $(`#step${idNext}`).css("display", "block");
      }
    }
  }    
})

#step2,
#step3,
#step4,
#step5 {
  display: none
}

<div id="step1" >
  <label>step1</label>
  <textarea></textarea>
</div>

<div id="step2" >
  <label>step2</label>
  <textarea></textarea>
</div>

<div id="step3" >
  <label>step3</label>
  <textarea></textarea>
</div>

<div id="step4" >
  <label>step4</label>
  <textarea></textarea>
</div>

<div id="step5" >
  <label>step5</label>
  <textarea></textarea>
</div>

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