0

I have an html form. Whenever i click add button another copy of it appends. Whenever i click add button, id of my elements increases such as username_0, username_1, username_2... There are 2 radio buttons on my form that whenever i choose second radio button, a hidden textarea appears. Problem is i'm having problem with choosing my dynamic id's of radio buttons. I made a function but its only working for first element since i can't get dynamic id's

    <label for="evetKontrol_0">Evet</label>
    <input type="radio" id="evetKontrol_0" name="uygun_0" onclick="javascript:yesnoCheck();" value="uygun" checked>
    <label for="hayirKontrol_0">Hayır</label>
    <input type="radio" id="hayirKontrol_0" name="uygun_0" onclick="javascript:yesnoCheck();" value="uygunDegil">
    <div id="ifNo_0" style="visibility:hidden">
        <strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep_0" name="hayirSebep" style="height: 75px"><br>
    </div>

    function yesnoCheck() {
      if (document.getElementById('evetKontrol_0').checked) {
          document.getElementById('ifNo_0').style.visibility = 'hidden';
      }
      else document.getElementById('ifNo_0').style.visibility = 'visible';


    }

I need to be able to get my evetKontrol_#somenumber for my function for every copy of my form.

JSfiddle/ all of my code

I tried to use jQuery( "[attribute*='value']" ) but i couldn't manage to work it out.

Improve this question
1
  • I'm not sure I understand why you're using the id selector. You're better off with the class selector. For example, tag every evetKontrol_0 type radio item with class="evetKontrol". Then, use <div class="ifNo"> instead/in addition to id. Now, loop through the found "evetKontrol" classes to find the nearest div.ifNo class. Commented Apr 5, 2020 at 18:08

3 Answers 3

Reset to default
1

Consider the following.

Working Example: https://jsfiddle.net/Twisty/sonvakq2/21/

JavaScript

$(function() {

  function addElement(tObj) {
    var counter = $("[id^='ogrenci']", tObj).length;
    var html = '<div class="col-auto" id="ogrenci_' + counter + '"><label for="ad">Ad</label><input type="text" name="ad[]" class="form-control" id="ad_' + counter + '" placeholder="Öğrencinin Adı"/><label for="soyad">Soyad</label><input type="text" name="soyad[]" class="form-control" id="soyad_' + counter + '" placeholder="Öğrencinin Soyadı"/><label for="no">No</label><input type="text" name="numara[]" class="form-control" id="no_' + counter + '" placeholder="Öğrencinin Numarası"><label for="course">Bölümü</label><input type="text" name="bolum[]" class="form-control" id="course_' + counter + '" placeholder="Öğrencinin Bölümü"><label for="alKredi">Almak İstediği Kredi</label><input type="text" name="alKredi[]" class="form-control" id="alKredi_' + counter + '" placeholder="Almak İstediği Kredi"><label for="verKredi">Alabileceği Kredi</label><input type="text" name="verKredi[]" class="form-control" id="verKredi_' + counter + '" placeholder="Alabileceği Kredi"><label for=""><strong>Uygun mu?</strong> </label><br><label for="evetKontrol_' + counter + '">Evet</label><input type="radio" id="evetKontrol_' + counter + '" name="uygun_' + counter + '" value="uygun" checked><label for="hayirKontrol_' + counter + '">Hayır</label><input type="radio" id="hayirKontrol_' + counter + '" name="uygun_' + counter + '" value="uygunDegil"><div id="ifNo_' + counter + '" style="visibility:hidden"><strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep_' + counter + '" name="hayirSebep" style="height: 75px"><br></div><div class="input-group-addon"><a href="#" id="remove_' + counter + '" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a></div></div>';
    tObj.append(html);
  }

  function showHidden() {
    $("[id^='evetKontrol']").each(function(i, el) {
      var rel = $("#ifNo_" + i);
      if ($(el).is(":checked")) {
        rel.show();
      } else {
        rel.hide();
      }
    });
  }

  //add more fields group
  $("#add").click(function() {
    addElement($("#container"));
  });

  //remove fields group
  $('#container').on('click', "a[id^='remove']", function() {
    $(this).parents('div.col-auto').remove();
  });

  $("#container").on("click", "input[type='radio']", showHidden);
});

Your fiddle wasn't configured properly, so I addressed that first. I moved a lot of the repeatable items into Functions. Switched it all the jQuery and removed any of the local javascript calls.

You can see examples of how to use the Attribute selector in a relative manner to select items you want.

See More: https://api.jquery.com/category/selectors/attribute-selectors/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I understand the logic behind the code and it seems perfectly fine but it doesn't seem to work when i check radiobuttons, textarea wouldn't show up. @Twisty
0

You shouldn't need to use IDs for this. Just capture the onclick event and pass a boolean to determine if the hidden input should be shown. If you have multiple inputs to show and hide separately, you could pass the ID of the input along with the boolean.

function yesnoCheck(show) {
  var ta = document.getElementById('hiddenTA');
  if (show) {
    ta.style.visibility = 'visible';
  } else {
    ta.style.visibility = 'hidden';
  }
}
<label for="user1_0">User 1</label>
<input type="radio" name="users" id="user1_0" onclick="yesnoCheck(false)" checked />
<label for="user2_0">User 2</label>
<input type="radio" name="users" id="user2_0" onclick="yesnoCheck(true)" />

<input style="visibility:hidden" id="hiddenTA" />

Improve this answer

2 Comments

I don't have multiple inputs to show and hide. I have one input to show and hide i'll have lots of them. I need them to be unique, thats why i was using IDs. This works for my first form only. I will be storing every unique data from form in SQL database.
@acaiberry, I am slightly confused. You have a single text input, but multiple radio inputs. You can still use IDs just like you were, but you just need to pass a boolean to say whether or not the input should be shown.
0

In order to get the evetKontrol_#somenumber, pass that number in the onclick function.

In your JSfiddle, this would mean concatenating the counter variable into the function parameters like

... onclick="javascript:yesnoCheck(' + counter + ');" ...

Then update the function to use that value:

function yesnoCheck(counter) {
  if (document.getElementById('evetKontrol_' + counter).checked) {
    document.getElementById('ifNo_' + counter).style.visibility = 'hidden';
  } else {
    document.getElementById('ifNo_' + counter).style.visibility = 'visible';
  }
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.