CODEWITHSUNDEEP
javascriptjqueryhtmlfunction
acaiberry
acaiberry

Reputation: 31

Dynamically adding ID in js / jquery

I have a form that i take inputs and i use a script to copy my form when add button is clicked. There is a radiobutton in my form which contains a hidden textarea. Whenever i choose value="uygunDegil" , that textarea changes to visible. The problem is when i append my copy form, i won't be able to access my copy radiobutton with my function,lets say i choose value="uygunDegil" on my 5th copy field my first hidden textarea turns to visible instead of 5th one. I need to add some kind of id and iterate it to my form dynamically or to my radiobutton but i don't know how to. I'm new to JS so any help or advice would be appreciated.

Form.php

<form method="post">
<div class="form-group row">
  <div class="col-auto">
    <label for="ad">Ad</label>
    <input type="text" name="ad[]" class="form-control" id="ad" placeholder="Öğrencinin Adı"/>
    <label for="soyad">Soyad</label>
    <input type="text" name="soyad[]" class="form-control" id="soyad" placeholder="Öğrencinin Soyadı"/>
    <label for="no">No</label>
    <input type="text" name="numara[]" class="form-control" id="no" placeholder="Öğrencinin Numarası">
    <label for="course">Bölümü</label>
    <input type="text" name="bolum[]" class="form-control" id="course" placeholder="Öğrencinin Bölümü">
    <label for="alKredi">Almak İstediği Kredi</label>
    <input type="text" name="alKredi[]" class="form-control" id="alKredi" placeholder="Almak İstediği Kredi">
    <label for="verKredi">Alabileceği Kredi</label>
    <input type="text" name="verKredi[]" class="form-control" id="verKredi" placeholder="Alabileceği Kredi">
    <label for="evetKontrol">Evet</label>
    <input type="radio" id="evetKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygun" checked>
    <label for="hayirKontrol">Hayır</label>
    <input type="radio" id="hayirKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygunDegil">
    <div id="ifNo" style="visibility:hidden">
        <strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep" name="hayirSebep" style="height: 75px"><br>
    </div>
      <div class="input-group-addon">
          <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
      </div>
  </div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>

copy of my form that i append

   <div class="form-group rowCopy" style="display: none;">
    <div class="col-auto">
      <label for="ad">Ad</label>
      <input type="text" name="ad[]" class="form-control" id="ad" placeholder="Öğrencinin Adı"/>
      <label for="soyad">Soyad</label>
      <input type="text" name="soyad[]" class="form-control" id="soyad" placeholder="Öğrencinin Soyadı"/>
      <label for="no">No</label>
      <input type="text" name="numara[]" class="form-control" id="no" placeholder="Öğrencinin Numarası">
      <label for="course">Bölümü</label>
      <input type="text" name="bolum[]" class="form-control" id="course" placeholder="Öğrencinin Bölümü">
      <label for="alKredi">Almak İstediği Kredi</label>
      <input type="text" name="alKredi[]" class="form-control" id="alKredi" placeholder="Almak İstediği Kredi">
      <label for="verKredi">Alabileceği Kredi</label>
      <input type="text" name="verKredi[]" class="form-control" id="verKredi" placeholder="Alabileceği Kredi">
      <?php  echo '<strong>Uygun mu?</strong><br><br>'; ?>
      <label for="evetKontrol">Evet</label>
      <input type="radio" id="evetKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygun" checked>
      <label for="hayirKontrol">Hayır</label>
      <input type="radio" id="hayirKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygunDegil">
      <div id="ifNo" style="visibility:hidden">
          <strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep" name="hayirSebep" style="height: 75px"><br>
      </div>
        <div class="input-group-addon">
            <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
        </div>
    </div>
</div>

fields.js

$(document).ready(function() {
   //group add limit
   var maxGroup = 25;

   //add more fields group
   $(".addMore").click(function() {
      if ($('body').find('.row').length < maxGroup) {
         var fieldHTML = '<div class="form-group row">' + $(".rowCopy").html() + '</div>';
         $('body').find('.row:last').after(fieldHTML);
      } else {
         alert('Maximum ' + maxGroup + ' groups are allowed.');
      }
   });
   //remove fields group
   $("body").on("click", ".remove", function() {
      $(this).parents(".row").remove();
   });
});

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

JS fiddle to demostrate

Upvotes: 0

Views: 793

Answers (3)

acaiberry
acaiberry

Reputation: 31

With the information given by ironCat, i managed to find a solution to my problem.Changed my code a little bit. Hope it will be useful for newbies like me.

$(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^='hayirKontrol']").each(function(i, el) {
      var rel = $("#ifNo_" + i);
      if ($(el).is(":checked")) {
        rel.css("visibility", "visible");
      } else {
        rel.css("visibility", "hidden");
      }
    });
  }

  //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("change, click", "input[type='radio']", showHidden);
  showHidden();
});
<!DOCTYPE html>
<html>
  <head>
    <title>Fazla Kredi</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
  </head>
  <body>

    <form method="post">
      <div class="form-group row" id="container">
        <div class="col-auto" id="ogrenci_0">
          <label for="ad">Ad</label>
          <input type="text" name="ad[]" class="form-control" id="ad_0" placeholder="Öğrencinin Adı" />
          <label for="soyad">Soyad</label>
          <input type="text" name="soyad[]" class="form-control" id="soyad_0" placeholder="Öğrencinin Soyadı" />
          <label for="no">No</label>
          <input type="text" name="numara[]" class="form-control" id="no_0" placeholder="Öğrencinin Numarası">
          <label for="course">Bölümü</label>
          <input type="text" name="bolum[]" class="form-control" id="course_0" placeholder="Öğrencinin Bölümü">
          <label for="alKredi">Almak İstediği Kredi</label>
          <input type="text" name="alKredi[]" class="form-control" id="alKredi_0" placeholder="Almak İstediği Kredi">
          <label for="verKredi">Alabileceği Kredi</label>
          <input type="text" name="verKredi[]" class="form-control" id="verKredi_0" placeholder="Alabileceği Kredi">
          <label for=""><strong>Uygun mu?</strong> </label><br>
          <label for="evetKontrol_0">Evet</label>
          <input type="radio" id="evetKontrol_0" name="uygun_0" value="uygun" checked>
          <label for="hayirKontrol_0">Hayır</label>
          <input type="radio" id="hayirKontrol_0" name="uygun_0" 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>
          <div class="input-group-addon">
            <a href="javascript:void(0)" id="add" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
          </div>
        </div>
      </div>
      <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
    </form>
<script src="fields.js"></script>
  </body>
</html>

Upvotes: 0

Roger Krueger
Roger Krueger

Reputation: 303

Switch "ifNo" to being a class--IDs MUST be unique to work right--and then put this in your yesnoCheck:

$(this).parent().find('.ifNo').css('visibility','visible')

The parent (singular to only go up one level!) puts you at .col-auto, so you're still inside your row and a find only finds the "ifNo" you want.

Which works well enough for something this simple. But for anything remotely complicated I use the same idea ironCat posted: generate unique row IDs and use them to navigate.

Upvotes: 1

ironCat
ironCat

Reputation: 161

try add var counter = 0; and '<div class="form-group row" id="radio' + counter +'">'

$(document).ready(function() {
       //group add limit
       var maxGroup = 25;
       var counter = 0;


       //add more fields group
       $(".addMore").click(function() {
          if ($('body').find('.row').length < maxGroup) {
             var fieldHTML = '<div class="form-group row" id="radio' + counter +'">' + $(".rowCopy").html() + '</div>';
             counter +=1;
             $('body').find('.row:last').after(fieldHTML);
          } else {
             alert('Maximum ' + maxGroup + ' groups are allowed.');
          }
       });

or simple class without counters <div class="form-group row" class="myRadio">

Upvotes: 2

Related Questions