CODEWITHSUNDEEP
jqueryhtmlsharepoint
Pvas
Pvas

Reputation: 49

How to make text boxes appear using jQuery

I am trying to make the corresponding textarea appear when Abnormal is clicked and disappear when Normal is clicked. The problem I am having is that when I click Abnormal for one question it affects both textareas and not the one it corresponds to. 

$("[nfield='horizontal_field']").on("change", function() {
  $("[mrbvalue='Normal']").on('change', function() {
    if ($("[mrbvalue='Normal']:checked")) {
      $('[nfield="txt_fieldhori"]').show()
    }
  });

  $("[mrbvalue='Abnormal']").on('change', function() {
    if ($("[mrbvalue='Abnormal']:checked")) {
      $('[nfield="txt_fieldhori"]').hide()
    }
  });
})

$("[nfield='vert_field']").on('change', function() {
  $("[mrbvalue='Normal']").on('change', function() {
    if ($("[mrbvalue='Normal']:checked")) {
      $('[nfield="txt_nooo"]').show()
    }
  });
  
  $("[mrbvalue='Abnormal']").on('change', function() {
    if ($("[mrbvalue='Abnormal']:checked")) {
      $('[nfield="txt_nooo"]').hide()
    }
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="n-mrb n-choice q" nfield="horizontal_field">
  <div class="mrb-item"><label><input type="radio" name="horizontal_field" mrbvalue="Normal" class="k-valid"> Normal</label></div>
  <div class="mrb-item"><label><input type="radio" name="horizontal_field" mrbvalue="Abnormal" class="k-valid"> Abnormal</label></div>
</div>
<textarea class="n-text comment -EntireLine ee k-valid" nfield="txt_fieldhori" id="tet"></textarea>
<div class="n-mrb n-choice q" nfield="vert_field">
  <div class="mrb-item"><label><input type="radio" name="vert_field" mrbvalue="Normal" class="k-valid"> Normal</label></div>
  <div class="mrb-item"><label><input type="radio" name="vert_field" mrbvalue="Abnormal" class="k-valid"> Abnormal</label></div>
</div>
<textarea class="n-text comment -EntireLine ee k-valid" nfield="txt_nooo" id="te"></textarea>

Upvotes: 2

Views: 43

Answers (2)

Lajos Arpad
Lajos Arpad

Reputation: 76426

You are overcomplicating it and selecting all corresponding items instead the one you are interested about. Let's have a simpler, correct solution along with explanation:

var textAreas = document.querySelectorAll("textarea.n-text.comment");
var radioButtons = document.querySelectorAll("input[type=radio]");
for (let index = 0; index < radioButtons.length; index++) {
    radioButtons[index].addEventListener("change", function() {
      textAreas[(index - (index % 2)) / 2].style.display = (index % 2) ? "none" : "block";
  });
}

What happens:

  • we load all text areas into an array-like object
  • we load all radio buttons into an array-like object
  • we loop through the set of radio buttons, using the let keyword to acquire block context for the index
  • we add a change event for the current radio button
  • (index - (index % 2)) / 2 yields the correct text area index from the radio button index
  • each pair radio button should hide the text area and each odd should show
  • we change the display accordingly

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because you're selecting all textarea instances when an event occurs on the radio, and you're also unnecessarily nesting the event handlers.

To fix this you can simply hook a single event handler to all radio buttons which toggles the visibility of the related textarea, which can be retrieved using jQuery's DOM traversal methods, based on the selected value.

Also note that your HTML has a lot of invalid non-standard attributes. These either need to be removed or converted to data attributes, for example: data-nfield="txt_fieldhori". In either case you need to ensure you put a value attribute on the radio input elements themselves.

With all that said, try this:

$(":radio").on("change", function() {
  $(this).closest('.n-choice').next('textarea').toggle(this.value === 'Normal');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="n-mrb n-choice q">
  <div class="mrb-item">
    <label>
      <input type="radio" name="horizontal_field" value="Normal" class="k-valid" checked="true"> 
      Normal
    </label>
  </div>
  <div class="mrb-item">
    <label>
      <input type="radio" name="horizontal_field" value="Abnormal" class="k-valid"> 
      Abnormal
    </label>
  </div>
</div>
<textarea class="n-text comment -EntireLine ee k-valid" id="tet"></textarea>
<div class="n-mrb n-choice q">
  <div class="mrb-item">
    <label>
      <input type="radio" name="vert_field" value="Normal" class="k-valid" checked="true"> 
      Normal
    </label>
  </div>
  <div class="mrb-item">
    <label>
      <input type="radio" name="vert_field" value="Abnormal" class="k-valid"> 
      Abnormal
    </label>
  </div>
</div>
<textarea class="n-text comment -EntireLine ee k-valid"  id="te"></textarea>

Upvotes: 4

Related Questions