How do I call the selected class or name inside the loop with JavaScript or jQuery?

Question

My javascript code like this :

$('input[name="is_follow_up"]').change(function(){
    var val = $(this).val(),
        input = $('.input-reason');
    if (val == 'n') 
        input.show()
    else 
        input.hide();
});
$('.select-reason').change(function(){
    var reason = $(this).val(),
        others = $('.textarea-others');
    if (reason == 4) {
        others.show();
        $(this).removeAttr('name');
        others.find('textarea').attr('name', 'reason');
    }
    else {
        others.hide()
        $(this).attr('name', 'reason');
        others.find('textarea').removeAttr('name');
    }
});

My html code like this :

@foreach($orders as $order)
...
    <label class="radio-inline">
        <input type="radio" name="is_follow_up" id="inlineRadio1" value="y" required checked> accept
    </label>
    <label class="radio-inline">
        <input type="radio" name="is_follow_up" id="inlineRadio2" value="n" required> reject
    </label>
    <div class="row input-reason" style="display: none">
        <div class="col-sm-2">Reason:</div>
        <div class="col-sm-5">
            <div class="form-group">
                <select class="form-control select-reason" name="reason">
                    <option value="Reason 1">Reason 1</option>
                    <option value="Reason 2">Reason 2</option>
                    <option value="Reason 3">Reason 3</option>
                    <option value="4">Reason 4</option>
                </select>
            </div>
            <div class="form-group textarea-others" style="display: none">
            <textarea rows="5" class="form-control"></textarea>
            </div>
        </div>
    </div>
...
@endforeach

If I have 5 data order. there will be 5 iterations. If I choose reject in first iteration, it will show textarea in all iteration

I want :

If user selects reject in the first iteration, it only show textarea in the first iteration

If user selects reject in third iteration, it only show textarea in third iteration

etc

How can I do it?

@Rush.2707, I'm still confused. You should provide a detailed answer — moses toh, Nov 24 '17 at 08:44

Makarand Patil · Answer 1 · 2017-11-24T10:03:05.127

First You are using @foreach loop and inside the loop you are giving radio button the same name which is not correct as all the radio buttons will be having the same name and therefore at a time you can check only one radio button.

In this case what you can do is append the index of the iteration to the name of the radio button and make the name as name="is_follow_up1", name="is_follow_up2" and so on.

You can refer How to find the foreach index for getting iteration value as you are using php.

Similarly you have to do the same for select box as well as text area so they can be uniquely identified as is my code snippet below which you can refer to update your HTML.

Also i have added iteration attribute in some elements to get the value which are present in snippet.

Later You can update the Jquery code as in snippet to get the desired functionality that you want.

Please let me know if you have any doubt regarding the same.

$(document).ready(function() {
  $('input[name^="is_follow_up"]').change(function() {
    var val = $(this).val(),
      iteration = $(this).attr('iteration'),
      input = $('.input-reason' + iteration);
    if (val == 'n')
      input.show()
    else
      input.hide();
  });
  $('select[name^="reason"]').change(function() {
    var reason = $(this).val(),
      iteration = $(this).attr('iteration'),
      others = $('.textarea-others' + iteration);
    if (reason == 4) {
      others.show();
      $(this).removeAttr('name');
      others.find('textarea').attr('name', 'reason');
    } else {
      others.hide()
      $(this).attr('name', 'reason');
      others.find('textarea').removeAttr('name');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio-inline">
      <input type="radio" name="is_follow_up1" iteration='1' id="inlineRadio1" value="y" required checked> accept
  </label>
<label class="radio-inline">
      <input type="radio" name="is_follow_up1" iteration='1' id="inlineRadio2" value="n" required> reject
  </label>
<div class="row input-reason1" style="display: none">
  <div class="col-sm-2">Reason:</div>
  <div class="col-sm-5">
    <div class="form-group">
      <select class="form-control select-reason" name="reason1" iteration='1'>
                  <option value="Reason 1">Reason 1</option>
                  <option value="Reason 2">Reason 2</option>
                  <option value="Reason 3">Reason 3</option>
                  <option value="4">Reason 4</option>
              </select>
    </div>
    <div class="form-group textarea-others1" style="display: none">
      <textarea rows="5" class="form-control"></textarea>
    </div>
  </div>
</div>
<label class="radio-inline">
      <input type="radio" name="is_follow_up2" iteration='2' id="inlineRadio1" value="y" required checked> accept
  </label>
<label class="radio-inline">
      <input type="radio" name="is_follow_up2" iteration='2' id="inlineRadio2" value="n" required> reject
  </label>
<div class="row input-reason2" style="display: none">
  <div class="col-sm-2">Reason:</div>
  <div class="col-sm-5">
    <div class="form-group">
      <select class="form-control select-reason" name="reason2" iteration='2'>
                  <option value="Reason 1">Reason 1</option>
                  <option value="Reason 2">Reason 2</option>
                  <option value="Reason 3">Reason 3</option>
                  <option value="4">Reason 4</option>
              </select>
    </div>
    <div class="form-group textarea-others2" style="display: none">
      <textarea rows="5" class="form-control"></textarea>
    </div>
  </div>
</div>
<label class="radio-inline">
      <input type="radio" name="is_follow_up3" id="inlineRadio1" iteration='3' value="y" required checked> accept
  </label>
<label class="radio-inline">
      <input type="radio" name="is_follow_up3" id="inlineRadio2" iteration='3' value="n" required> reject
  </label>
<div class="row input-reason3" style="display: none">
  <div class="col-sm-2">Reason:</div>
  <div class="col-sm-5">
    <div class="form-group">
      <select class="form-control select-reason" name="reason3" iteration='3'>
                  <option value="Reason 1">Reason 1</option>
                  <option value="Reason 2">Reason 2</option>
                  <option value="Reason 3">Reason 3</option>
                  <option value="4">Reason 4</option>
              </select>
    </div>
    <div class="form-group textarea-others3" style="display: none">
      <textarea rows="5" class="form-control"></textarea>
    </div>
  </div>
</div>

bipen · Accepted Answer · 2017-11-24T09:09:38.997

Use this context. :) (hopefully I am getting you right here).

Try this,

  $('.select-reason').change(function(){
    var reason = $(this).val(),
        others = $('.textarea-others');
    if (reason == 4) {
        others.show();
        $(this).removeAttr('name');
        $(this).closest('div').next().find('textarea').attr('name', 'reason');
    }
    else {
        others.hide()
        $(this).attr('name', 'reason');
        $(this).closest('div').next().find('textarea').removeAttr('name');
    }
    });

Actually there are lots of way to find particular div with closest(), parent() and so on but what am I doing here (in simple words):

Your this is select-reason element.
closest('div') will be <div class="form-group">
next() goes to <div class="form-group textarea-others" style="display: none">
and find() finds the textarea you are looking for

See it is that simple if you take this context as it will only work with changed elements only. Previously, $('.textarea-others') will select all the textarea in the page.

PS: this will work unless you change your html and add another div in between select and textarea as next() will point to new div now.

Same for is_follow_up change:

$('input[name="is_follow_up"]').change(function(){
  var val = $(this).val(),
      input = $('.input-reason');
   if (val == 'n') 
     $(this).closest('div.display-someblock').find('.input-reason').show();
   else 
     input.hide();
});

To make it easy I wrapped elements inside for loop with a <div class="display-someblock">

 @foreach($orders as $order)
 ...
   <div class="display-someblock">
   <label class="radio-inline">
      <input type="radio" name="is_follow_up" id="inlineRadio1" value="y" required checked> accept
   </label>
 .....
  </div>

I try it. But it still does not works. See my full html like this : https://pastebin.com/p8sHbgc1 — moses toh, Nov 24 '17 at 09:46
@SuccessMan Ok the html is different. Which is not good. Anyways remove the div I created. and instead of `$(this).closest('div.display-someblock').find('.input-reason').show();` use `$(this).closest('div.row').next().find('.input-reason').show();` — bipen, Nov 24 '17 at 10:18
@bipen Don't you think if he is looping the specific HTML code suppose 3 times and giving the same name to the radio button, he will only be able to select 1 radio button among them from all the 3 groups. — Makarand Patil, Nov 24 '17 at 10:47

How do I call the selected class or name inside the loop with JavaScript or jQuery?

2 Answers2